js数组使用es6遍历方法-js教程-PHP中文网

js数组使用es6遍历方法

舞夢輝影

发布： 2025-11-12 23:37:02

原创

605人浏览过

ES6引入了多种数组遍历方法，for...of可直接获取元素并支持中断，entries()结合for...of可同时获取索引和值，forEach配合箭头函数适合副作用操作但不可中断，map用于生成新数组，filter用于筛选数据，find和findIndex用于查找符合条件的元素或索引。

js数组使用es6遍历方法

JavaScript 数组在 ES6 中引入了多种新的遍历方法，让代码更简洁、可读性更强。相比传统的 for 循环或 forEach，ES6 提供了更灵活的遍历选择，适用于不同场景。

1. for...of 遍历数组元素

for...of 是 ES6 新增的语法，可以直接获取数组中的每个元素值，适合简单遍历。

优点：能直接拿到元素值，支持 break、continue、return。

示例：

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

查看详情

const arr = ['a', 'b', 'c'];
for (const item of arr) {
  console.log(item); // 输出 a, b, c
}

登录后复制

2. entries() + for...of 获取索引和值

如果需要同时获取索引和值，可以使用 entries() 方法，它返回一个包含索引和对应值的迭代器。

示例：

const arr = ['x', 'y', 'z'];
for (const [index, value] of arr.entries()) {
  console.log(index, value); // 0 x, 1 y, 2 z
}

登录后复制

3. forEach 配合箭头函数（虽非 ES6 新语法，但常用）

forEach 结合箭头函数写法更简洁，适合执行有副作用的操作（如修改外部变量、DOM 操作等）。

注意：不能中断循环（break/continue 无效）。

示例：

const arr = [1, 2, 3];
arr.forEach((item, index) => {
  console.log(`第${index}项是${item}`);
});

登录后复制

4. map 创建新数组

map 用于对每个元素进行处理并返回一个新数组，不改变原数组。常用于数据转换。

示例：

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6]

登录后复制

5. filter 过滤数组元素

filter 返回满足条件的新数组，适合筛选数据。

示例：

const nums = [10, 15, 20, 25];
const overTwenty = nums.filter(n => n > 20);
console.log(overTwenty); // [25]

登录后复制

6. find 和 findIndex 查找元素

find 返回第一个满足条件的元素，findIndex 返回其索引。

示例：

const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const user = users.find(u => u.id === 2);
console.log(user); // { id: 2, name: 'Bob' }

登录后复制

基本上就这些常见用法。根据需求选择合适的方法：想中断循环用 for...of，要转换数据用 map，筛选用 filter，查元素用 find，拿索引值对用 entries()。不复杂但容易忽略细节。

以上就是js数组使用es6遍历方法的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

JS注解怎么标注字符串类型_ JS字符串类型参数的注解使用说明 JS注解怎么标注交叉类型_ JS交叉类型参数的注解方法与示例 js不同类型的工厂函数 Mongoose中将_id字段设置为数字类型并实现自动递增序列号 JS数组如何排序_JavaScript数组sort方法使用与自定义排序教程