一、ES5中数组遍历方式
let arr = [1, 2, 3, 2, 4]
1、for循环
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}
// 1 2 3 2 4
2、forEach()：没有返回值，调用数组的每个元素，并将元素传递给回调函数。
// 参数：item(必需)->当前元素
// index(可选)->当前元素的索引值
// array(可选)->当前元素所属的数组对象
arr.forEach(function (item, index, array) {
console.log(item, index)
})
// 1 0
// 2 1
// 3 2
// 2 3
// 4 4
注意：
forEach 的代码块中不能使用 break、continue，它会抛出异常。
3、map()：返回新的数组，按照原始数组元素顺序依次处理元素。
let res = arr.map(function (item, index, array) {
return item + 1
})
console.log(arr, res)
// [1, 2, 3, 2, 4]
// [2, 3, 4, 3, 5]
4、filter()：返回符合条件所有元素的数组
let res = arr.filter(function (item, index, array) {
return item == 2
})
console.log(arr, res)
// [1, 2, 3, 2, 4]
// [2, 2]
5、some()：返回Boolean，检测数组中的元素是否满足指定条件
let res = arr.some(function (item, index, array) {
return item == 4
})
console.log(arr, res)
// [1, 2, 3, 2, 4] true
6、every()：返回Boolean，判断每个元素是否符合function条件
let res = arr.every(function (item, index, array) {
return item == 2
})
console.log(arr, res)
// [1, 2, 3, 2, 4] false
7、reduce()：接收一个函数作为累加器
- 累加
// prev(必需)->初始值, 或者计算结束后的返回值。
// cur(必需)->当前元素
let sum = arr.reduce(function (prev, cur, index, array) {
return prev + cur
}, 0) // 0 可选-传递给函数的初始值
console.log(arr, sum)
// [1, 2, 3, 2, 4] 12
- 取最大
let max = arr.reduce(function (prev, cur, index, array) {
return Math.max(prev, cur)
})
console.log(arr, max)
// [1, 2, 3, 2, 4] 4
- 去重
let res = arr.reduce(function (prev, cur, index, array) {
prev.indexOf(cur) == -1 && prev.push(cur)
return prev
}, [])
console.log(arr, res)
// [1, 2, 3, 2, 4]
// [1, 2, 3, 4]
8、for in
for (let index in arr) {
console.log(arr[index]);
}
// 1 2 3 2 4
注意：
```js // 如果在Array上添加原型方法，for...in也会将其输出
Array.prototype.foo = function () { console.log('foo'); }
for (let index in arr) { console.log(arr[index]); }
// 1 2 3 2 4 / ƒ () { console.log('foo'); } / ```
for...in代码块中不能有 return，不然会抛出异常。
二、ES6中数组遍历方式
1、for..of
for (let val of [1, 2, 3]) {
console.log(val);
}
// 1,2,3
乍一看觉得它并没有什么强大之处。这里就强调下for...of的来历和作用。
for (variable of iterable) {
}
of后面是iterable既不是for循环规定的array，也不是for...in规定的object，而是iterable。
如果查查 iterable 的含义就很直观的感受到 for...of 遍历的是一切可遍历的元素（数组、对象、集合）等。
for (let item of arr) {
console.log(item);
}
// 1 2 3 2 4
for (let item of arr.values()) {
console.log(item)
}
// 1 2 3 2 4
for (let item of arr.keys()) {
console.log(item)
}
// 0 1 2 3 4
for (let [index, item] of arr.entries()) {
console.log(index, item)
}
// 0 1
// 1 2
// 2 3
// 3 2
// 4 4
TIP
for...of是支持 break、continue、return的，所以在功能上非常贴近原生的 for。
2、Array.from()
Array.from() 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。
console.log(Array.from('foo'));
// ["f", "o", "o"]
console.log(Array.from([1, 2, 3], x => x + x));
// Array [2, 4, 6]
语法：Array.from(arrayLike[, mapFn[, thisArg]])
| 参数 | 含义 | 必/可选 | | :-------: | :--------------------------------------------------: | :-----: | | arrayLike | 想要转换成数组的伪数组对象或可迭代对象 | 必 | | mapFn | 如果指定了该参数，新数组中的每个元素会执行该回调函数 | 可 | | thisArg | 可选参数，执行回调函数 mapFn 时 this 对象 | 可 |
将伪数组转换成真正的数组
let arrayLike = {
0: '张三',
1: '30',
2: '男',
3: ['李四','王五','二麻子'],
'length': 4
}
let res = Array.from(arrayLike)
console.log(res)
// ["张三", "30", "男",['李四','王五','二麻子']
具备 map 的功能
let res = Array.from(arr, item => item + 1)
console.log(res)
// [2, 3, 4, 3, 5]
3、Array.of()
Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。
Array.of(7); // [7] // 创建一个具有单个元素 7 的数组
Array.of(1, 2, 3); // [1, 2, 3]
Array(7); // [ , , , , , , ] // 创建一个长度为7的空数组
Array(1, 2, 3); // [1, 2, 3]
4、Array.prototype.find()
find()方法返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined。
let array = [1, 5, 12, 100, 8];
let found = array.find(function(item) {
return item > 10;
});
console.log(found);
// 12
5、Array.prototype.findIndex()
findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
其实这个和 find() 是成对的，不同的是它返回的是索引而不是值。
let array = [1, 5, 12, 100, 8];
let found = array.findIndex(function(item) {
return item > 10;
});
console.log(found);
// 2