js中的各种遍历方式

es5中的循环

for循环(可用 break; continue;)

forEach (不可用 break; continue; 可用return;)

let arr = [1, 2, 3]
arr.forEach((v) => {
    if (v == 2) {
        return; //相当于 for中的continue;
    }
    console.log('v', v)
})

map (返回一个新的数组 不会改变旧的数组;)

let arr = [1, 2, 3]
let result = arr.map(function(value) {
    value += 1;
    return value
})
console.log(result, arr); // [2, 3, 4]   [1, 2, 3]

filter (返回过滤符合条件的元素 不会改变旧的数组)

let arr = [1, 2, 3]
let result = arr.filter(function(value) {
    return value == 2;
})
console.log(result, arr);

some(返回布尔值 判断是否有符合条件的)

let arr = [1, 2, 3]
let result = arr.some(function(value) {
    return value == 2
})
console.log(result, arr); // true  [1, 2, 3]

every(返回布尔值 判断是否都符合条件的)

let result = arr.every(function(value) {
    return value == 2
})
console.log(result, arr);  false [1, 2, 3]

reduce (实现去重、求最值、求和)

let arr = [1, 2, 3]
let result = arr.reduce(function(prev, cur) {
    return Math.max(prev, cur) //求最大值

}, 0)
console.log(result); //3

let arr = [1, 2, 3]

let result = arr.reduce(function(prev, cur) {
        return prev + cur; // 求和
}, 0)
console.log(result); //6

arr = [1, 2, 3, 2, 4, 3]
let result = arr.reduce(function(prev, cur) {
    prev.indexOf(cur) == -1 && prev.push(cur); //去重
    return prev; 
}, [])
console.log(result); // [1, 2, 3, 4]

for in(可用来遍历对象 遍历时会把原型链上新增的属性也遍历出来 不会遍历原生原型链上的属性)

Array.prototype.foo = function() {
    console.log('foo')
}
for (key in arr) {
    console.log('key', key);
    console.log('item', arr[key]);
}

es6中的循环

find (返回第一个找到的元素)

let arr = [1, 2, 3]
let res = arr.find(function(value) {
    return value == 2
})
console.log(res, arr); // 2 (3) [1, 2, 3]

for of

let arr = [1, 2, 3]
for (const item of arr) {
    console.log(item)  //1 2 3
}

let arr = [1, 2, 3]
for (const item of arr.values()) {
    console.log(item) //1 2 3
}

let arr = [1, 2, 3]
for (const item of arr.keys()) {
    console.log(item) //0 1 2
}

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