一直以来没有整理查阅过数组的原生方法,所以对什么时候用 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