遍历数组方法for、forEach、map、filter、every、some、reduce --- find、findIndex、keys、values、entries
1、forEach()
// 参数1:item 数组中的每项元素
// 参数2:index 数组的索引值
// 参数3:array 原数组
// 注意点:
// 1、空数组不会执行forEach, forEach中的return,只是跳出本次循环,后续循环还会继续执行(需要通过return结束循环,使用for循环)
// 2、遍历的次数,在循环开始就确定了,遍历过程中追加的元素,不会遍历
// 3、空元素会跳过遍历,undefined和null不会
let arr = [1, 2, , 3] // 只会循环三次
let arr = [1, 2, undefined, null, 3] // 循环5次
// 一般使用方法 arr.forEach(item => {})
// 需要索引值使用传参
arr.forEach((item, index, array) => {
console.log(item, 'item');
console.log(index, 'index');
console.log(array, 'array');
})
// 例:
let a = [1, 2, ,3]; // 最后第二个元素是空的,不会遍历(undefined、null会遍历)
let obj = { name: 'OBKoro1' };
let result = a.forEach((value, index, array) => {
a[3] = '改变元素';
a.push('添加到尾端,不会被遍历')
console.log(value, 'forEach传递的第一个参数'); // 分别打印 1 ,2 ,改变元素
console.log(this.name); // OBKoro1 打印三次 this绑定在obj对象上
// break; // break会报错
return value; // return只能结束本次回调 会执行下次回调
console.log('不会执行,因为return 会执行下一次循环回调')
}, obj);
console.log(result); // 即使return了一个值,也还是返回undefined
// 回调函数也接受接头函数写法
2、filter() 过滤原数组,返回满足条件的新数组
let arr = [1, 2, 3]
arr1 = arr.filter(item => item > 2)
console.log(arr1); // [3]
// 带参数
arr2 = arr.filter((item, index, arr) => {
return item < 3 && index > 0
})
console.log(arr2); // [2]
3、map() 遍历数组,对数组员数进行处理之后,返回新数组
let arr = [1, 2, 3]
let arr1 = arr.map(item => {
return item + '拼接'
})
console.log(arr1); // ["1拼接", "2拼接", "3拼接"]
4、every() 检测数组所有元素是否符合条件
// 如果有一个元素不满足条件,就返回false,不会继续执行
// 如果都满足条件返回true
let arr = [3, 2, 10, 5]
let val = arr.every(item => item > 5)
console.log(val); // false
5、some() 数组中是否有满足条件的元素
// 如果有一个条件满足就返回true, 后面的元素不会继续执行
// 如果都不满足,返回false
let arr = [3, 2, 10, 5]
let val = arr.some(item => item > 5)
console.log(val); // true
6、find() 根据条件找到符合条件的第一个数组成员,并返回该成员,如果没找到返回undefined
// ES6: find() 和findIndex() 都可以识别NaN, indexOf不可以
let arr = [3, 2, 10, 5, 12]
let val = arr.find(item => item > 5)
console.log(val); // 10
7、findIndex() 根据条件找符合的第一个元素的位置,找到了返回索引值,找不到返回-1
let arr = [3, 2, 10, 5, 12]
let val = arr.findIndex(item => item > 5)
console.log(val); // 2
8、ES6: keys()&values()&entries() 遍历键名、遍历键值、遍历键名+键值
let arr = [5, 12, 9]
for (let k of arr.keys()) {
console.log(k); // 0, 1, 2
}
for (let k of arr.values()) {
console.log(k); // 5, 12, 9
}
for (let k of arr.entries()) {
console.log(k); // [0, 5], [1, 12], [2, 9]
}
9、reduce() 数组迭代器,数组中的每一个元素执行回调函数,不包括数组中被删除的元素和未被赋值的元素
// arr.reduce(callback, [initialValue]) callback 必需, initialValue(第一次调用的初始值) 可选
// callback的参数
// 参数1(初始值,或上一次回调函数的返回值):必需
// 参数2(当前元素值):必需
// 参数3(当前索引值):可选
// 参数4(当前数组):可选
// 用法1:数组求和
let arr = [1, 2, 4, 8, 10]
let sum = arr.reduce(function(prev, cur) {
return prev + cur
}, 0)
console.log(sum); // 25
let sum = arr.reduce(function(prev, cur) {
return prev + cur
}, 10)
console.log(sum); // 35
// 用法2:数组最大值,最小值
let arr = [6, 20, 4, 8, 10]
let maxNum = arr.reduce(function(prev, cur) {
// return Math.max(prev, cur)
return Math.min(prev, cur)
})
console.log(maxNum);
// 用法3:数组去重
let arr = [1, 5, 6, 5, 4, 6]
let arr1 = arr.reduce(function(prev, cur) {
prev.indexOf(cur) === -1 && prev.push(cur)
return prev
}, [])
console.log(arr1); // [1, 5, 6, 4]
// 用法4:二维数组,转化为一维数组
let arr = [[1, 2], [4, 5], [7, 8]]
let arr1 = arr.reduce(function(prev, cur) {
return prev.concat(cur)
}, [])
console.log(arr1); // [1, 2, 4, 5, 7, 8]