细数数组中的那些循环

forEach

let arr = [1, 2, 3, 4, 5];
let maparr = arr.forEach((item, index) => {
    console.log(item, index);
    item = 7

})
console.log(arr);
console.log("maparr", maparr);


1 0
2 1
3 2
4 3
5 4
[ 1, 2, 3, 4, 5 ]

forEach使用频率非常高，他的第一个参数是当前值。第二个参数是索引。那么他执行后能不能改变原数组呢？通过以上输出，可以看出不能。但是

let arr = [1, 2, 3, 4, 5];
let maparr = arr.forEach((item, index, arr) => {
    console.log(item, index, arr);
    arr[index] = 7
	 return item;
})
console.log("arr", arr);
console.log("maparr", maparr);

1 0 [ 1, 2, 3, 4, 5 ]
2 1 [ 7, 2, 3, 4, 5 ]
3 2 [ 7, 7, 3, 4, 5 ]
4 3 [ 7, 7, 7, 4, 5 ]
5 4 [ 7, 7, 7, 7, 5 ]
arr [ 7, 7, 7, 7, 7 ]
maparr undefined

咱们增加第三个参数，是原数组。通过这个方法就可以改变原数组。注意他的返回值是undefined。

如果数组中的值是对象呢

let arr = [{
    name: 1
}, {
    name: 2
}, {
    name: 3
}, {
    name: 4
}, {
    name: 5
}, ]
arr.forEach(function (item, index) {
    console.log(item);
    item.name = 4
});
console.log(arr);

{ name: 1 }
{ name: 2 }
{ name: 3 }
{ name: 4 }
{ name: 5 }
[ { name: 4 }, { name: 4 }, { name: 4 }, { name: 4 }, { name: 4 } ]

可以看出原数组已经被改变了

// 必须用 try catch 整个包住forEach 才能停止
try {
    [1, 2, 3, 4, 5, 6].forEach(function (item, index) {
        console.log(item);
        if (item === 3) {
            throw new Error('阻止');
        }
    });
} catch (error) {
    console.log('error_阻止成功', error);
}

map

let arr = [1, 2, 3, 4, 5];
let maparr = arr.map((item, index, arr) => {
    console.log(item, index, arr);
    item = 7
    return item;
})
console.log("arr", arr);
console.log("maparr", maparr);

1 0 [ 1, 2, 3, 4, 5 ]
2 1 [ 1, 2, 3, 4, 5 ]
3 2 [ 1, 2, 3, 4, 5 ]
4 3 [ 1, 2, 3, 4, 5 ]
5 4 [ 1, 2, 3, 4, 5 ]
arr [ 1, 2, 3, 4, 5 ]
maparr [ 7, 7, 7, 7, 7 ]

可以看出原数组没变，但是有了返回值，这个值就是改变后的数组。

let arr = [1, 2, 3, 4, 5];
let maparr = arr.map((item, index, arr) => {
    console.log(item, index, arr);
    arr[index] = 7
    // item = 7
    return item;
})
console.log("arr", arr);
console.log("maparr", maparr);

1 0 [ 1, 2, 3, 4, 5 ]
2 1 [ 7, 2, 3, 4, 5 ]
3 2 [ 7, 7, 3, 4, 5 ]
4 3 [ 7, 7, 7, 4, 5 ]
5 4 [ 7, 7, 7, 7, 5 ]
arr [ 7, 7, 7, 7, 7 ]
maparr [ 1, 2, 3, 4, 5 ]

当用arr[index]想改变数组时，他的原数组的值被改变。返回值却成了原数组。

filter

let arr = [1, 2, 3, 4, 5];
let maparr = arr.filter((item, index, arr) => {
    console.log(item, index, arr);
    return item > 3

})
console.log("arr", arr);
console.log("maparr", maparr);

1 0 [ 1, 2, 3, 4, 5 ]
2 1 [ 1, 2, 3, 4, 5 ]
3 2 [ 1, 2, 3, 4, 5 ]
4 3 [ 1, 2, 3, 4, 5 ]
5 4 [ 1, 2, 3, 4, 5 ]
arr [ 1, 2, 3, 4, 5 ]
maparr [ 4, 5 ]

filter用于筛选，他的返回值是筛选后的数组。

find

let arr = [1, 2, 3, 4, 5];
let maparr = arr.find((item, index, arr) => {
    console.log(item, index, arr);
    // arr[index] = 7
    return item > 1

})
console.log("arr", arr);
console.log("maparr", maparr);


1 0 [ 1, 2, 3, 4, 5 ]
2 1 [ 1, 2, 3, 4, 5 ]
arr [ 1, 2, 3, 4, 5 ]
maparr 2

find用于查找，他的返回值是查找到的第一个元素，并且找到后会终止后续操作。

let arr = [1, 2, 3, 4, 5];
let maparr = arr.find((item, index, arr) => {
    console.log(item, index, arr);
    arr[index] = 7
    return item > 1

})
console.log("arr", arr);
console.log("maparr", maparr);

1 0 [ 1, 2, 3, 4, 5 ]
2 1 [ 7, 2, 3, 4, 5 ]
arr [ 7, 7, 3, 4, 5 ]
maparr 2

findIndex

let arr = [1, 2, 3, 4, 5];
let maparr = arr.find((item, index, arr) => {
    console.log(item, index, arr);
    arr[index] = 7
    return item > 1

})
console.log("arr", arr);
console.log("maparr", maparr);

1 0 [ 1, 2, 3, 4, 5 ]
2 1 [ 7, 2, 3, 4, 5 ]
arr [ 7, 7, 3, 4, 5 ]
maparr 1

findIndex也是用于查找，他的返回值是查找到的第一个元素的索引，并且找到后会终止后续操作。

总结

方法	是否能改变原数组	是否能用arr[index]改变原数组	返回值
forEach	否	是	undefined
map	否	是	循环后的数组
find	否	是	符合条件的元素
findIndex	否	是	符合条件的元素的索引
filter	否	是	符合条件的元素