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 | 否 | 是 | 符合条件的元素 |