JavaScript 中 forEach、map、filter 终极篇

1、forEach 和 map 能实现的功能相似

2、forEach 、 map、filter 都能实现对原数组的修改

3、forEach 没有返回值，map 有返回值，filter 有返回值

---

文章目录

• 没有时间？直接看重点！

• forEach

• • • forEach 使用说明

• forEach 要点

• map

• • • map 使用说明

• map 要点

• map 使用技巧案例

• filter

• • • filter 使用说明

• filter 示例

forEach

=====================================================================

forEach() 方法对数组的每个元素执行一次提供的函数。

语法：

array.forEach(callback(currentVal, index, array) {

// do something

}, thisArg)

forEach 使用说明

1、forEach 方法按升序为数组中含有效值的每一项执行一次 callback 函数，那些已删除（使用 delete 方法等情况）或者未初始化的项将被跳过（但不包括那些值为 undefined 的项）（例如在稀疏数组上）。

2、如果给 forEach 传递了 thisArg 参数，当调用时，它将被传给 callback 函数，作为它的 this 值。否则，将会传入 window 作为它的 this 值。callback 函数最终可观察到 this 值，这取决于 函数观察到 this 的常用规则。

关于 JavaScript 中的 this，我觉得太重要了，需要仔细研读

3、forEach 遍历的范围在第一次调用 callback 前就会确定。调用 forEach 后添加到数组中的项不会被 callback 访问到。如果已经存在的值被改变，则传递给 callback 的值是 forEach 遍历到他们那一刻的值。已删除的项不会被遍历到。如果已访问的元素在迭代时被删除了(例如使用 shift()) ，之后的元素将被跳过。

4、forEach() 为每个数组元素执行 callback 函数；不像 map() 或者 reduce() ，它总是返回 undefined 值，并且不可链式调用。典型用例是在一个链的最后执行副作用。

forEach 要点

1、没有返回值

var arr1 = [1, 2, 3, 4, 5]

var solt = arr1.forEach((v,i,t) => {

console.log(v)

})

console.log(solt) // undefined

2、不能中止或跳出 forEach 循环

var arr1 = [1, 2, 3, 4, 5]

// 使用break会报错

arr1.forEach((v,i,arr) => {

console.log(v)

if(v === 3) {

breck

}

})

// return false 也无效

arr1.forEach((v,i,arr) => {

console.log(v)

if(v === 3) {

console.log(‘-----’)

return false

}

})

// 1

// 2

// 3

// -----

// 4

// 5

3、使用箭头函数，thisArg 参数会被忽略

var arr1 = [1, 2, 3]

var arr2 = [7, 8, 9]

arr1.forEach((v, i, arr) => {

console.log(this)

})

// window

// window

// window

arr1.forEach((v, i, arr) => {

console.log(this)

}, arr2)

// window

// window

// window

4、forEach()不会在迭代之前创建数组的副本

如果数组在迭代时被修改了，则其他元素会被跳过

var words = [“one”, “two”, “three”, “four”];

words.forEach(function(word) {

console.log(word);

if (word === “two”) {

words.shift();

}

});

// one

// two

// four

当到达包含值 "two" 的项时，整个数组的第一个项被移除了，这导致所有剩下的项上移一个位置。因为元素 "four" 现在在数组更前的位置，"three" 会被跳过。 forEach() 不会在迭代之前创建数组的副本。

5、对原数组进行修改

var arr1 = [1, 2, 3]

var arr2 = [7, 8, 9]

arr1.forEach(function(v, i, arr) {

console.log(this)

arr[i] = v * 2

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

存中…(img-Lxz9ELIX-1710599250122)]

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】