JavaScript竟然有13种数组遍历方法，你都了解吗？

整理一下常用的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 倍。

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]);

参数

• accumulator：是上一个函数调用的结果，第一次等于 initial（如果提供了 initial 的话）。

• item：当前的数组元素

• index：当前索引

• arr：数组本身

• 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, '赵六' ]
}