当前位置: 首页 > news >正文

JavaScript---查询数组符合条件的元素

for循环

最基础灵活,可通过索引控制遍历起点、终点和步长,支持 break 和 continue

使用

const arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {console.log(arr[i]);
}

for...of 循环 

直接遍历元素值(非索引),支持 break/continue,兼容数组、字符串、Set 等可迭代对象

使用

for (const item of arr) {if (item > 2) break; // 可提前终止console.log(item);
}

forEach() 

简洁易读,但​​无法中断循环​​(除非抛异常),不返回新数组

 使用

arr.forEach((item, index) => {console.log(`索引 ${index}:值 ${item}`);
});

map()方法

 返回新数组(元素经回调处理),适合数据转换

使用

const doubled = arr.map(item => item * 2); // [2, 4, 6]

find()方法

返回数组中​​第一个​​满足条件的元素,找不到时返回 undefined
​适用场景​​:精确查找单个对象或值。

for (const item of arr) {if (item > 2) break; // 可提前终止console.log(item);
}

简洁易读,但​​无法中断循环​​(除非抛异常),不返回新数组

 使用

const users = [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' }
];
// 查找 id 为 2 的用户
const user = users.find(item => item.id === 2);
console.log(user); // { id: 2, name: 'Bob' }[2,5,6](@ref)

特点

  • 找到匹配项后立即停止遍历,性能高效
  • 返回的是原数组的引用,修改会同步更新原数组

filter()方法 

 返回包含​​所有​​满足条件元素的新数组。
​适用场景​​:需获取多个匹配项(如筛选商品列表)。

使用

const numbers = [1, 2, 3, 4, 5];
// 查找所有偶数
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4][1,4,5](@ref)

 特点

  • 返回新数组,不影响原数组。
  • 遍历整个数组,性能低于 find()

findIndex()方法

 返回首个满足条件元素的​​索引​​,找不到时返回 -1
​适用场景​​:需获取元素位置(如删除或修改元素)。

使用

const fruits = ['apple', 'banana', 'cherry'];
// 查找 'banana' 的索引
const index = fruits.findIndex(fruit => fruit === 'banana');
console.log(index); // 1[3,6](@ref)

 对比indexOf()

ndexOf() 仅适用于简单值(如数字、字符串),无法处理对象或复杂条件

// 仅适用于简单值
const idx = fruits.indexOf('banana'); // 1[3](@ref)

 some() 方法​

测试数组中是否​​至少有一个​​元素满足条件,返回布尔值。
​适用场景​​:验证数据有效性(如检查是否有禁用用户)。

使用

const hasAdmin = users.some(user => user.role === 'admin');
console.log(hasAdmin); // true 或 false[2](@ref)

对比every() 

 every() 检查​​所有元素​​是否均满足条件

const allAdults = users.every(user => user.age >= 18);

 对比选择

​方法​返回值是否可中断适用场景性能排名(从高到低)
for-精细控制索引、高性能需求1(优化版最佳)
for...of-简洁遍历值、支持异步2
forEachundefined简单遍历、无需中断3
map/filter新数组数据转换或筛选4
find/some元素或布尔值✅(找到即停)查找或条件检测-
for...in-​仅对象属性遍历​最差(避免用于数组)

 

http://www.dtcms.com/a/264799.html

相关文章:

  • 解决 npm install canvas@2.11.2 失败的问题
  • 【公司环境下发布个人NPM包完整教程】
  • SPI、I2C和UART三种串行通信协议的--------简单总结
  • NLP:文本张量表示方法
  • 【安全工具】SQLMap 使用详解:从基础到高级技巧
  • 【字节跳动】数据挖掘面试题0001:打车场景下POI与ODR空间关联查询
  • C++实现状态机
  • 20250703|Leetcodehot100之739【】今天计划
  • Linux环境下使用 C++ 与 OpenCV 实现 ONNX 分类模型推理
  • 洛谷P2119 [NOIP 2016 普及组] 魔法阵【题解】【前缀和优化】
  • Java 大视界 -- Java 大数据在智能医疗健康管理中的慢性病风险预测与个性化干预(330)
  • Javaee 多线程 --进程和线程之间的区别和联系
  • nvm:NodeJs版本管理工具下载安装与使用教程
  • macOS挂载iOS应用沙盒文件夹
  • 飞算 JavaAI 智控引擎:全链路开发自动化新图景
  • 【字节跳动】数据挖掘面试题0003:有一个文件,每一行是一个数字,如何用 MapReduce 进行排序和求每个用户每个页面停留时间
  • 橡胶硬度计在不同领域中的应用
  • mybatis考试
  • 无人机一机多控技术的核心要点
  • 亿级物联网MQTT集群:OpenResty深度优化实践
  • Docker for Windows 设置国内镜像源教程
  • 基于spark的航班价格分析预测及可视化
  • v3 中的storeToRefs
  • AWS WebRTC:根据viewer端拉流日志推算视频帧率和音频帧率
  • uniapp实现图片预览,懒加载
  • 数据分类分级系统的建设思路
  • Rust 安装使用教程
  • 【已解决】执行conda init提示No action taken.
  • 客服机器人知识库怎么搭?智能客服机器人3种方案深度对比(含零售落地案例)
  • 部署KVM 虚拟化平台