整理一下常用的JavaScript数组遍历的方法。
for
let arr1 = ["Apple", "Orange", "Pear"];
for (let i = 0; i < arr1.length; i++) {
console.log(arr1[i]); // Apple Orange Pear
}
for..of
// 使用for..of进行遍历
let arr2 = ["Apple", "Orange", "Pear"];
// 遍历数组元素
for (let key of arr2) {
console.log(key);// Apple Orange Pear
}
for..in（不推荐）
for..in循环不仅可以遍历对象，也可以遍历数组【数组是一种特殊的对象】
let arr3 = ["Apple", "Orange", "Pear"];
// 遍历数组元素
for (let key in arr3) {
console.log(arr3[key]);// Apple Orange Pear
}
for..in还会遍历非数字键
let a = [1, 2, 3];
a.foo = true;
for (let k in a) {
console.log(k); // 1 2 3 foo
}
注意：
for..in 循环会遍历 所有属性，不仅仅是这些数字属性。在浏览器和其它环境中有一种称为“类数组”的对象，它们 看似是数组。也就是说，它们有 length 和索引属性，但是也可能有其它的非数字的属性和方法，这通常是我们不需要的。for..in 循环会把它们都列出来。所以如果我们需要处理类数组对象，这些“额外”的属性就会存在问题。
for..in 循环适用于普通对象，并且做了对应的优化。但是不适用于数组，因此速度要慢 10-100 倍。更多可查看：为什么不推荐用for...in遍历数组
forEach()
使用forEach()方法，允许为数组的每个元素都运行一个函数，forEach()方法与map()方法很相似，也是对数组的所有成员依次执行参数函数。但是，forEach()方法不返回值，只用来操作数据。这就是说，如果数组遍历的目的是为了得到返回值，那么使用map()方法，否则使用forEach()方法。
接受三个参数：数组中正在处理的当前元素、当前元素的索引、调用forEach()数组本身。
arr4.forEach(function(element, index, array) {
// ...
});
let arr4 = ["Apple", "Orange", "Pear"];
// 遍历数组元素
arr4.forEach(function(element, index, arr4) {
console.log('元素名称：' + element)
console.log("索引：" + index)
console.log('数组：' + arr4); // Apple Orange Pear
})
map()
map()方法将数组的所有成员依次传入参数函数，然后把每一次的执行结果组成一个新数组返回。作为数组元素的映射，它提供了一个回调函数，参数依次为处于当前循环的元素、该元素下标、数组本身，三者均可选。默认会返回一个数组。
接受三个参数：数组中正在处理的当前元素、当前元素的索引、调用map()数组本身。
const resultArr = arr5.map(function(element, index, array) {
// 返回新值而不是当前元素
})
let arr5 = ["Apple", "Orange", "Pear"];
// 遍历数组元素
const resultArr = arr5.map(element => {
return element
})
console.log(resultArr); // [ 'Apple', 'Orange', 'Pear' ]
filter()
filter()方法用于过滤数组成员，满足条件的成员组成一个新数组返回。它不会修改原始数组，而是返回一个新的数组，新数组包含满足筛选条件的元素。
接受三个参数：数组中正在处理的当前元素、当前元素的索引、调用filter()数组本身。
let resultArr = arr6.filter(function(element, index, array) {
// ...
});
它的参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。
let arr6 = [1, 2, 3, 4, 5, 6];
// 过滤数组元素
const resultArr = arr6.filter(element => element > 3)
console.log(resultArr); // [ 4, 5, 6 ]
find()
找到具有特定条件的对象，使函数返回TRUE的第一个(单个元素)。
接受三个参数：数组中正在处理的当前元素、当前元素的索引、调用find()数组本身。
let resultArr = arr7.find(function(element, index, array) {
// ...
});
let arr7 = [
{
id: 1,
name: 'John'
},
{
id: 2,
name: 'Pete'
},
{
id: 3,
name: 'Mary'
},
]
const resultArr = arr7.find(element => element.id == 2);
console.log(resultArr); // { id: 2, name: 'Pete' }
findIndex()
接受三个参数：数组中正在处理的当前元素、当前元素的索引、调用findIndex()数组本身。
let resultIndex = arr8.findIndex(function(element, index, array) {
// ...
});
返回找到元素的索引，而不是元素本身，找不到符合条件的元素返回-1。
let arr8 = [
{
id: 1,
name: 'John'
},
{
id: 2,
name: 'Pete'
},
{
id: 3,
name: 'Mary'
},
]
const resultIndex = arr8.findIndex(element => element.id == 2);
console.log("索引：", resultIndex); // 1
reducer()
接收一个函数作为累加器，每一次运行reducer会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。
let resultCount = arr9.reduce(
function(accumulator, item, index, array) {
// ...
},[initial]);
参数
应用函数时，上一个函数调用的结果将作为第一个参数传递给下一个函数。因此，第一个参数本质上是累加器，用于存储所有先前执行的组合结果。最后，它成为 reduce 的结果。
let arr9 = [1, 2, 3, 4, 5]
let resultCount = arr9.reduce((sum, current) => sum + current, 0);
console.log(resultCount); // 15
初始值为0，第一次运行sum值为0，current是第一个数组元素 为1
在第二次运行时，sum = 1，我们将第二个数组元素2与其相加并返回。
在第三次运行中，sum = 3，我们继续把下一个元素与其相加，以此类推……
如果没有初始值的话，reduce会将第一个元素作为初始值，并从第二个元素开始迭代，如果数组为空，在没有初始值的情况下会报错。
reducerRight()
reduceRight()遍历为从右到左。
let arr9 = [1, 2, 3, 4, 5]
let resultCount = arr9.reduceRight((sum, current) => sum + current, 0);
console.log(resultCount); // 15
some()
接受三个参数：数组中正在处理的当前元素、当前元素的索引、调用some()数组本身。
let resultArr = arr10.some(function(element, index, array) {
// ...
});
检查数组中是否有元素满足条件，如果满足条件返回true，否则返回false。不会修改数组。
let arr10 = [1, 2, 3, 4, 5]
const result = arr10.some(item => item > 3);
console.log(result); // true
every()
接受三个参数：数组中正在处理的当前元素、当前元素的索引、调用every()数组本身。
let result = arr11.every(function(element, index, array) {
// ...
});
检查数组中元素是否都满足条件，如果都满足条件返回true，否则返回false
let arr11 = [1, 2, 3, 4, 5]
const result = arr11.every(element => element > 3);
console.log(result); // false
keys()，values()，entries()
ES6 新增的三个方法用于遍历数组，它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历，values()是对键值的遍历，entries()是对键值对的遍历。
let arr12 = ['张三', '李四', '王五', '赵六']
// 键名遍历
for (let index of arr12.keys()) {
console.log("index", index); // 0 1 2 3
}
// 键值遍历
for (let items of arr12.values()) {
console.log("items", items); // 张三 李四 王五 赵六
}
// 键值对遍历
for (let items of arr12.entries()) {
console.log("items", items); // [ 0, '张三' ][ 1, '李四' ][ 2, '王五' ][ 3, '赵六' ]
}
该文章在 2024/10/19 12:27:41 编辑过
400 186 1886
