map() 和 forEach() 的区别

一直以来没有整理查阅过数组的原生方法,所以对什么时候用 map, 什么时候用 forEach 并不是很明确,完全看心情。
只是知道 map有返回值而 forEach 没有需要自己操作,所以今天准备好好梳理一下记录下来。

两个操作都有相同的部分

  • 都只能遍历数组
  • 都可以循环遍历数组中的每一项
  • 第一个参数都是 callback 函数,且该函数接收三个参数item, index, array
  • 都有可选的第二个参数 thisArg 可改变 callbackthis 的值(这个可以忽略基本用不到)

不同的是:

  • map 有返回值,而 forEach 没有
  • map 的运行速度更快
  • map 可以被链式调用( forEach 因为没有返回值不能被链式调用)

所以哪个更好?

如果你想改变数组并且返回一个新数组时候推荐使用 .map(),不光是因为它会返回一个新数组和速度快,而且可以被链式调用继续操作返回的数组。

如果只是单纯想操作数据但是不想返回一个数组时,使用 .forEach() 就可以省略多余的步骤。

拓展

  • 如果已访问的元素在迭代时被删除了( 例如使用 .shift() 操作了原数组 ),之后的元素将被跳过
var words = ["one", "two", "three", "four"];
words.forEach(function(word) {
  console.log(word);
  if (word === "two") {
    words.shift();
  }
});
// => one
// => two
// => four  // 这里的 three 被跳过了
  • 为什么都说 mapforEach 不会改变原数组?
    因为不管是 map 还是 forEach,当中的 item 都是拷贝的对象,你去直接修改他不会影响原数组,但是你去修改其内部的属性,就会影响。
    类似于深浅拷贝的问题,所以说不能修改原数组也不是绝对的,看你怎么修改操作数据的。

最近真的时间很紧张,都没有空闲的时间好好的去整理,
等有时间了准备梳理一下被 VueJS 改写的 7 个数组原生方法:push, pop, shift, unshift, splice, sort, reverse

参考