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

}, arr2)

console.log(arr1)

// (3) [7, 8, 9]

// (3) [7, 8, 9]

// (3) [7, 8, 9]

// (3) [2, 4, 6]

arr1 从 [1, 2, 3] 变成了 [2, 4, 6]

函数内部 this 值是 arr2

---

map

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

map() 方法创建一个数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果

语法：

let new_array = arr.map(function(v, i, arr) {

// Return element for new_array

}[, thisArg])

返回值：

一个新数组，每个元素都是回调函数的结果

map 使用说明

1、map 不修改调用它的原数组本身（当然可以在 callback 执行时改变原数组）。

2、如果 thisArg 参数有值，则每次 callback 函数被调用的时候，this 都会指向 thisArg 参数上的这个对象。如果省略了 thisArg 参数,或者赋值为 null 或 undefined，则 this 指向全局对象 。

最后

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

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

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

[外链图片转存中…(img-OyQ2xOdY-1715464005855)]

[外链图片转存中…(img-ziRKzKAP-1715464005855)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

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