JS遍历数组的12种⽅法
⼀、 for
普通版
for(let i =0; i < arr.lengthl; i++){
// ...
}
优化版
// 使⽤临时变量，将长度缓存起来，避免重复获取数组长度，当数组较⼤时优化效果才会⽐较明显。
let len = arr.length;
for(let i =0; i < len; i++){
// ...
}
for 循环和 in 能正确响应 break、continue 和 return 语句，但 forEach 不⾏。
⼆、 forEach
注意：forEach 不会对空数组进⾏检测
arr.forEach((item, index, arr)=>{
// ...
})
item : 每个元素 index : 元素数组下标 arr : 数组本⾝
三、 map
map 有返回值
map 和 forEach 都不会对空数组进⾏检测
map 不会改变原始数组
const result = arr.map((item, index, arr)=>{js数组方法总结
return item *2;
})
console.log(result);// [2, 4, 6]
四、 f
只有可迭代对象（iterator）才能使⽤（Array, Map, Set, String,TypedArray, arguments 对象等等）
for(let item of arr){
// ...
}
五、 filter
接收⼀个回调函数作为参数，返回值是⼀个新数组
注意：
filter() 不会对空数组进⾏检测
filter() 不会改变原始数组
const arr =[
{name:'tony', age:'20'},
{name:'jack', age:'18'}
]
const result1 = arr.filter(item =>{
return item.age >=20;
})
const result2 = arr.filter(item =>{
return item.age >=20;
})
console.log(result1);// [{name: 'tony', age: 20}]
console.log(result2);// [] --> 没有满⾜条件的就返回⼀个空数组
六、 every
如果每⼀项返回 true, 则返回 true（全部符合条件），否则返回 false
every 不会对空数组进⾏检测
every 不会改变原始数组
const arr =[1,2,3,4,5];
const result = arr.every((item, index, arr)=>{
return item >3;// 每⼀项是否⼤于3
})
console.log(result);// false
----------------------------------------------------------
const arr =[1,2,3,4,5];
const result = arr.every((item, index, arr)=>{
return item >0;// 每⼀项是否⼤于0
})
console.log(result);// true
七、 some
some 如果每⼀项都返回 true，则返回 true（只要有⼀个符合），否则返回 false。
some 不会对空数组进⾏检测
some 不会改变原数组
const arr =[1,2,3,4,5];
const result = arr.some((item, index, arr)=>{
return item >3;// 数组有没有⼤于3的
})
console.log(result);// true --> 只要有⼀个⼤于3结果都为 true
⼋、 reduce
reduce 顺着挨个累加，对于空数组是不会执⾏回调函数的。
const arr =[1,2,3];
// 没指定初始值的情况下
console.log(initialValue);// 第⼀次循环 initialValue = 1
return initialVaule + currentValue;// 6 --> 从左往右累加起来
})
// 给了初始值之后
console.log(initialValue);// 第⼀次循环 initialValue = 10
return initialVaule + currentValue;// 16 --> 从左往右累加起来
},10)
九、 reduceRight
reduceRight 倒着挨个累加，遍历的是空数组的话，不会执⾏
const arr =[1,2,3];
console.log(initialValue);// 第⼀次循环 initialValue = 3
return initialVaule + currentValue;// 6
})
console.log(initialValue);// 第⼀次循环 initialValue = 10
return initialVaule + currentValue;// 16
},10)
⼗、 find
到符合条件的第⼀项，没到返回 undefined，对于空数组，是不会执⾏的，并且不改变原数组
const arr =[
{name:'tony', age:'20'},
{name:'jack', age:'18'}
]
const result1 = arr.find(item =>{
return item.name ==='jack';
})
console.log(result1);// {name: 'jack', age: 18}
const result2 = arr.filter(item =>{
return item.namee ==='mary';
})
console.log(result2);// undefined
⼗⼀、 fiendIndex
返回符合条件的第⼀项的下标，没有则返回 -1，对于空数组，是不会执⾏的，并且不改变原数组
const arr =[
{name:'tony1',age:'20'},
{name:'tony2',age:'20'},
{name:'tony3',age:'20'},
{name:'jack',age:"30"},// 只管返回第⼀个满⾜条件的
{name:'jack',age:"100"}
];
const result = arr.findIndex(item =>{
return item.name ==='jack';
})
console.log(result);// 3
⼗⼆、 keys、values、entries
它们都返回⼀个遍历器对象，可以⽤ f 循环进⾏遍历
keys – 返回元素索引
values – 返回元素本⾝
entries – 返回元素和下标
const arr =['a','b','c'];
for(let index of arr.keys()){
console.log(index);
/
/ 0
// 1
// 2
}
for(let ele of arr.values()){
console.log(ele);
// a
// b
// c
}
for(let[index, ele]ies()){
console.log(idnex, ele);
// 0 "a"
// 1 "b"
// 2 "c"
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。