JS中各种遍历方法总结

JS遍历方法

1.for循环

for(let i = 0; i < 5; i++) {
	// do something
}

2.forEach

遍历数组的每一个元素，没有返回值

let arr = [1,2,3,4,5];
arr.forEach((item, index) => {
    // do something
})
// item：当前元素，index：当前元素的索引值

3.for of

es6中的方法，不会遍历数组的私有属性，不能遍历对象，可以遍历字符串，数组，有返回值

let arr = [1,2,3,4,5];
for(let item of arr) {
    console.log(item);
    // 输出：1,2,3,4,5
    // item是值
}

4.for in

数组的私有属性也会遍历，所以一般用来遍历对象

let arr = [1,2,3,4,5];
for(let index in arr) {
    console.log(index);
    // 输出：0,1,2,3,4
    // 这里的index是键名 
}

5.map

有返回值，不会改变原数组，返回一个经过回调函数操作的新数组。

let arr = [1,2,3,4,5];
let result = arr.map(function(item, index) {
    return item*2;
})
console.log(result);
// 输出[ 2, 4, 6, 8, 10 ]
// item：当前元素  index：当前元素的索引值

6.filter 过滤器

不影响原数组，返回一个新数组，回调函数若返回true，filter就把这一项添加到新数组中

let arr = [1,2,3,4,5];
let result = arr.filter(function(item, index) {
    return item>2;
});
console.log(result);
// 输出[ 3, 4, 5 ]
// item：当前元素  index：当前元素的索引值

7.some和every

some是对数组的每一项运行给定函数，如果该函数对任一项返回true,则返回true. 找到则不会继续向下迭代
every是对数组的每一项运行给定函数，如果该函数对每一项返回true,则返回true.一旦有一个返回false则不会向下迭代

let arr = [1,2,3,4,5];
let res = arr.some(function(item, index) {
    return item>2;
})
console.log(res);
// true
// item：当前元素  index：当前元素的索引值

let arr = [1,2,3,4,5];
let res = arr.every(function(item, index) {
    return item>2;
})
console.log(res);
// false
// item：当前元素  index：当前元素的索引值

8.find和findIndex

find返回符合条件的第一个元素，否则返回undefined

let arr = [1,2,3,4,5];
let res = arr.find(function(item, index) {
    return item>2;
})
console.log(res);
// 3
// item：当前元素  index：当前元素的索引值

findIndex返回符合条件的第一个元素的索引值，否则返回-1

let arr = [1,2,3,4,5];
let res = arr.findIndex(function(item, index) {
    return item>2;
})
console.log(res);
// 2
// item：当前元素  index：当前元素的索引值

9.reduce

reduce()方法接收一个函数作为累加器，数组中的每一个值（从左到右）开始缩减，最终计算为一个值。
语法：

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
参数描述
function(total,currentValue, index,arr) 必需。用于执行每个数组元素的函数。
函数参数:
total 必需。初始值, 或者计算结束后的返回值。
currentValue 必需。当前元素
currentIndex 可选。当前元素的索引
arr 可选。当前元素所属的数组对象。
initialValue 可选。传递给函数的初始值

let arr = [1,2,3,4,5];
let res = arr.reduce(function(total, currentValue) {
    return total + currentValue;
})
console.log(res);
// 15

10.reduceRight

reduceRight()方法的功能和reduce()功能是一样的，不同的是reduceRight()从数组的末尾向前将数组中的数组项做累加。

reduce与reduceRight也可以使用第二个参数设一个初始值，第二个参数设为5，此时第一个调用时的total变成了5

let arr = [1,2,3,4,5];
let res = arr.reduce(function(total, currentValue) {
    return total + currentValue;
}, 5)
console.log(res);
// 20

11.keys，values，entries

ES6 提供三个新的方法 —— entries()，keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象，可以用for…of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历

let arr = [1,2,3,4,5];
for (let index of arr.keys()) {
    console.log(index);
}
// 0 1 2 3 4

let arr = [1,2,3,4,5];
for (let index of arr.values()) {
    console.log(index);
}
// 1 2 3 4 5

let arr = [1,2,3,4,5];
for (let [index,item] of arr.entries()) {
    console.log(index, item);
}
// 0 1
// 1 2
// 2 3
// 3 4
// 4 5