js数组使用es6遍历方法

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

js数组使用es6遍历方法

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

1. for…of 遍历数组元素

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

优点:能直接拿到元素值,支持 breakcontinue、return。

示例:

js数组使用es6遍历方法

法语写作助手

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

js数组使用es6遍历方法 31

查看详情 js数组使用es6遍历方法

 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()。不复杂但容易忽略细节。

上一篇
下一篇
text=ZqhQzanResources