一直以来没有整理查阅过数组的原生方法,所以对什么时候用 map
, 什么时候用 forEach
并不是很明确,完全看心情。
只是知道 map
有返回值而 forEach
没有需要自己操作,所以今天准备好好梳理一下记录下来。
两个操作都有相同的部分
- 都只能遍历数组
- 都可以循环遍历数组中的每一项
- 第一个参数都是
callback
函数,且该函数接收三个参数(item
,index
,array
) - 都有可选的第二个参数
thisArg
可改变callback
中this
的值(这个可以忽略基本用不到)
不同的是:
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 被跳过了
- 为什么都说
map
和forEach
不会改变原数组?
因为不管是map
还是forEach
,当中的item
都是拷贝的对象,你去直接修改他不会影响原数组,但是你去修改其内部的属性,就会影响。
类似于深浅拷贝的问题,所以说不能修改原数组也不是绝对的,看你怎么修改操作数据的。
最近真的时间很紧张,都没有空闲的时间好好的去整理,
等有时间了准备梳理一下被 VueJS
改写的 7 个数组原生方法:push
, pop
, shift
, unshift
, splice
, sort
, reverse