forEach、map和filter

LtHm

已于 2022-10-28 13:44:14 修改

阅读量138

点赞数

分类专栏： js基础文章标签： 1024程序员节 javascript

于 2022-10-24 15:05:19 首次发布

本文链接：https://blog.csdn.net/cjn308408/article/details/127492727

版权

js基础专栏收录该内容

29 篇文章 1 订阅

订阅专栏

本文详细介绍了JavaScript中的forEach、map和filter三种数组方法的用法，强调它们的共同点与区别，包括遍历数组、参数含义及返回值特性。forEach用于遍历不做改变，map创建新数组，filter筛选元素并返回新数组。

摘要由CSDN通过智能技术生成

forEach用法

let arr= ['张三','李四','王五','老王','小明','小芳']
    arr.forEach((value, index, arr)=> {    
      console.log(value, index, arr)
    })

map用法

let arr = [10, 3, 213, 23, 4, 234, 45]
    // 将数组的每一个值*2，再生成一个新数组
    let temp = []
 
    temp = arr.map(function(value, index) {
      return value * 2            // 返回array数组每一个值乘以2，并赋给temp
    })

filter用法

let array = ['a', 'b', 'c']; 
let array = array.filter(function(ele,index,arr){
	return arr.indexOf(ele) === index        // 判断为true返回，为false则不返回
})

相同点

都是循环数组中的每一项
都支持3个参数，参数分别是item（当前每一项）、index（索引值）、arr（原数组）
只能遍历数组

不同点

forEach没有返回值，map有返回值,也就是说，forEach()会修改原来的数组。而map()方法会得到一个新的数组并返回。filter不会改变原数组，返回一个新的数组。所以一般map和filter使用的时候都是拿一个空数组来接一下。匿名函数中的this都是指向window,filter中的this指向undefined。

filter原理

回调函数的执行结果为true，就将这个值存储到filter内部创建的数组中，最终将数组返回，为false则不返回