【JavaScript】- map、forEach、filter之间的主要区别

 先说明,遍历的方法内部都是基本的for来遍历

1、forEach()遍历数组,没有返回值

用于调用数组的每个元素,并将元素传递给回调函数。原数组不变。数组的每个元素执行一次提供的函数。没有返回值

foreach方法主要有三个参数,分别是 数组内容、数组索引、数组本身

和基本的for循环的原理一样

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

以上代码的value,index,arr  一一对应 数组内容、数组索引、数组本身

map和filter 都是基本一样  

注意点:

 1. 如果只有一个参数,那么就是 数组内容

 2. 它的语句结构里面不支持break、continue和return语句 ,break和continue会直接报错,不会读取return语句

 3. array.length可以输出这个数组的长度

 4. 使用场景是从头到尾的遍历,如果取里面某一个则需要

5. 伪数组不能使用forEach来遍历


2、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
    })


3、filter()遍历数组,有返回值

根据 返回值 true 或者 false 来决定 循环的当前项 要不要被添加到返回的新数组里

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


使用场景:查询和删除

注意:

 1. filter()不会对空数组进行检测

 2. 不会改变原数组

 3. 返回一个新的数组

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


总结:map、forEach、filter的作用都是遍历数组,根据使用场景来选择哪个更适合,来选择对应的方法,性能最优
 

猜你喜欢

转载自blog.csdn.net/m0_55960697/article/details/123920913