• 本质区别
  • ​for​​循环和​​forEach​​的语法区别
  • ​for​​循环和​​forEach​​的性能区别

js中那么多循环,​​for​​​ ​​for...in​​​ ​​for...of​​​ ​​forEach​​​,有些循环感觉上是大同小异今天我们讨论下​​for​​​循环和​​forEach​​的差异。我们从几个维度展开讨论:

  1. ​for​​循环和​​forEach​​的本质区别。
  2. ​for​​循环和​​forEach​​的语法区别。
  3. ​for​​循环和​​forEach​​的性能区别。


本质区别

​for​​​循环是js提出时就有的循环方法。​​forEach​​​是ES5提出的,挂载在可迭代对象原型上的方法,例如​​Array​​​ ​​Set​​​ ​​Map​​​。​​forEach​​是一个迭代器,负责遍历可迭代对象。那么遍历迭代可迭代对象 分别是什么呢。

遍历 :指的对数据结构的每一个成员进行有规律的且为一次访问的行为。

迭代 :迭代是递归的一种特殊形式,是迭代器提供的一种方法,默认情况下是按照一定顺序逐个 访问数据结构成员。迭代也是一种遍历行为。

可迭代对象 :ES6中引入了 ​​iterable​​​ 类型,​​Array​​​ ​​Set​​​ ​​Map​​​ ​​String​​​ ​​arguments​​​ ​​NodeList​​​ 都属于 ​​iterable​​​,他们特点就是都拥有 ​​[Symbol.iterator]​​​ 方法,包含他的对象被认为是可迭代的 ​​iterable​​。

面试官:有了 for 循环 为什么还要 forEach ?_js

图片

在了解这些后就知道 ​​forEach​​​ 其实是一个迭代器,他与 ​​for​​​ 循环本质上的区别是 ​​forEach​​​ 是负责遍历(​​Array​​​ ​​Set​​​ ​​Map​​​)可迭代对象的,而 ​​for​​ 循环是一种循环机制,只是能通过它遍历出数组。

再来聊聊究竟什么是迭代器 ,还记得之前提到的 Generator 生成器,当它被调用时就会生成一个迭代器对象(Iterator Object),它有一个 ​​.next()​​​方法,每次调用返回一个对象​​{value:value,done:Boolean}​​​,​​value​​​返回的是 ​​yield​​​ 后的返回值,当 ​​yield​​​ 结束,​​done​​​变为 ​​true​​,通过不断调用并依次的迭代访问内部的值。

迭代器 是一种特殊对象。ES6规范中它的标志是返回对象的 ​​next()​​​ 方法,迭代行为判断在 ​​done​​ 之中。在不暴露内部表示的情况下,迭代器实现了遍历。看代码

let arr = [1, 2, 3, 4]  // 可迭代对象
let iterator = arr[Symbol.iterator]() // 调用 Symbol.iterator 后生成了迭代器对象
console.log(iterator.next()); // {value: 1, done: false} 访问迭代器对象的next方法
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: 3, done: false}
console.log(iterator.next()); // {value: 4, done: false}
console.log(iterator.next()); // {value: undefined, done: true}

我们看到了。只要是可迭代对象,调用内部的 ​​Symbol.iterator​​​ 都会提供一个迭代器,并根据迭代器返回的​​next​​​ 方法来访问内部,这也是 ​​for...of​​ 的实现原理。

let arr = [1, 2, 3, 4]
for (const item of arr) {
console.log(item); // 1 2 3 4
}

把调用 ​​next​​​ 方法返回对象的 ​​value​​​ 值并保存在 ​​item​​​ 中,直到 ​​value​​​ 为 ​​undefined​​​跳出循环,所有可迭代对象可供​​for...of​​消费。再来看看其他可迭代对象:

function num(params) {
console.log(arguments); // Arguments(6) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
let iterator = arguments[Symbol.iterator]()
console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: 3, done: false}
console.log(iterator.next()); // {value: 4, done: false}
console.log(iterator.next()); // {value: undefined, done: true}
}
num(1, 2, 3, 4)

let set = new Set('1234')
set.forEach(item => {
console.log(item); // 1 2 3 4
})
let iterator = set[Symbol.iterator]()
console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: 3, done: false}
console.log(iterator.next()); // {value: 4, done: false}
console.log(iterator.next()); // {value: undefined, done: true}

所以我们也能很直观的看到可迭代对象中的 ​​Symbol.iterator​​​ 属性被调用时都能生成迭代器,而 ​​forEach​​ 也是生成一个迭代器,在内部的回调函数中传递出每个元素的值。

(感兴趣的同学可以搜下 ​​forEach​​​ 源码, ​​Array​​​ ​​Set​​​ ​​Map​​​ 实例上都挂载着 ​​forEach​​​,但网上的答案大多数是通过 ​​length​​​ 判断长度, 利用​​for​​​循环机制实现的。但在 ​​Set​​​ ​​Map​​​ 上使用会报错,所以我认为是调用的迭代器,不断调用 ​​next​​,传参到回调函数。由于网上没查到答案也不妄下断言了,有答案的人可以评论区留言)


for循环和forEach的语法区别

了解了本质区别,在应用过程中,他们到底有什么语法区别呢?

  1. ​forEach​​ 的参数。
  2. ​forEach​​ 的中断。
  3. ​forEach​​ 删除自身元素,index不可被重置。
  4. ​for​​ 循环可以控制循环起点。
​forEach​​ 的参数

我们真正了解 ​​forEach​​ 的完整传参内容吗?它大概是这样:

arr.forEach((self,index,arr) =>{},this)

self: 数组当前遍历的元素,默认从左往右依次获取数组元素。

index: 数组当前元素的索引,第一个元素索引为0,依次类推。

arr: 当前遍历的数组。

this: 回调函数中this指向。

let arr = [1, 2, 3, 4];
let person = {
name: ' AAA'
};
arr.forEach(function (self, index, arr) {
console.log(`当前元素为${self}索引为${index},属于数组${arr}`);
console.log(this.name+='BBB');
}, person)

我们可以利用 ​​arr​​ 实现数组去重:

let arr1 = [1, 2, 1, 3, 1];
let arr2 = [];
arr1.forEach(function (self, index, arr) {
arr.indexOf(self) === index ? arr2.push(self) : null;
});
console.log(arr2); // [1,2,3]

面试官:有了 for 循环 为什么还要 forEach ?_java_02

图片

​forEach​​ 的中断

在js中有​​break​​​ ​​return​​​ ​​continue​​​ 对函数进行中断或跳出循环的操作,我们在 ​​for​​​循环中会用到一些中断行为,对于优化数组遍历查找是很好的,但由于​​forEach​​属于迭代器,只能按序依次遍历完成,所以不支持上述的中断行为。

let arr = [1, 2, 3, 4],
i = 0,
length = arr.length;
for (; i < length; i++) {
console.log(arr[i]); //1,2
if (arr[i] === 2) {
break;
};
};

arr.forEach((self,index) => {
console.log(self);
if (self === 2) {
break; //报错
};
});

arr.forEach((self,index) => {
console.log(self);
if (self === 2) {
continue; //报错
};
});

如果我一定要在 ​​forEach​​​ 中跳出循环呢?其实是有办法的,借助​​try/catch​​:

try {
var arr = [1, 2, 3, 4];
arr.forEach(function (item, index) {
//跳出条件
if (item === 3) {
throw new Error("LoopTerminates");
}
//do something
console.log(item);
});
} catch (e) {
if (e.message !== "LoopTerminates") throw e;
};

若遇到 ​​return​​ 并不会报错,但是不会生效

let arr = [1, 2, 3, 4];
function find(array, num) {
array.forEach((self, index) => {
if (self === num) {
return index;
};
});};
let index = find(arr, 2);// undefined
​forEach​​ 删除自身元素,index不可被重置

在 ​​forEach​​​ 中我们无法控制 ​​index​​​ 的值,它只会无脑的自增直至大于数组的 ​​length​​​ 跳出循环。所以也无法删除自身进行​​index​​重置,先看一个简单例子:

let arr = [1,2,3,4]
arr.forEach((item, index) => {
console.log(item); // 1 2 3 4
index++;
});

​index​​​不会随着函数体内部对它的增减而发生变化。在实际开发中,遍历数组同时删除某项的操作十分常见,在使用​​forEach​​删除时要注意。

​for​​ 循环可以控制循环起点

如上文提到的 ​​forEach​​​ 的循环起点只能为0不能进行人为干预,而​​for​​循环不同:

let arr = [1, 2, 3, 4],
i = 1,
length = arr.length;

for (; i < length; i++) {
console.log(arr[i]) // 2 3 4
};

那之前的数组遍历并删除滋生的操作就可以写成

let arr = [1, 2, 1],
i = 0,
length = arr.length;

for (; i < length; i++) {
// 删除数组中所有的1
if (arr[i] === 1) {
arr.splice(i, 1);
//重置i,否则i会跳一位
i--;
};
};
console.log(arr); // [2]
//等价于
var arr1 = arr.filter(index => index !== 1);
console.log(arr1) // [2]


for循环和forEach的性能区别

在性能对比方面我们加入一个 ​​map​​​ 迭代器,它与 ​​filter​​​ 一样都是生成新数组。我们对比 ​​for​​​ ​​forEach​​​ ​​map​​ 的性能在浏览器环境中都是什么样的:

性能比较 :for > forEach > map 在chrome 62 和 Node.js v9.1.0环境下:​​for​​​ 循环比 ​​forEach​​​ 快1倍,​​forEach​​​ 比 ​​map​​ 快20%左右。

原因分析​for​​​:for循环没有额外的函数调用栈和上下文,所以它的实现最为简单。​​forEach​​​:对于forEach来说,它的函数签名中包含了参数和上下文,所以性能会低于 ​​for​​​ 循环。​​map​​​:​​map​​​ 最慢的原因是因为 ​​map​​ 会返回一个新的数组,数组的创建和赋值会导致分配内存空间,因此会带来较大的性能开销。

如果将​​map​​​嵌套在一个循环中,便会带来更多不必要的内存消耗。当大家使用迭代器遍历一个数组时,如果不需要返回一个新数组却使用 ​​map​​​ 是违背设计初衷的。在我前端合作开发时见过很多人只是为了遍历数组而用 ​​map​​ 的:

let data = [];
let data2 = [1,2,3];
data2.map(item=>data.push(item));

写在最后:这是面试遇到的一个问题,当时只知道语法区别。并没有从可迭代对象迭代器生成器性能方面 ,多角度进一步区分两者的异同,也希望能把一个简单的问题从多角度展开细讲,让大家正在搞懂搞透彻。

有道无术,术可成;有术无道,止于术

欢迎大家关注Java之道公众号

面试官:有了 for 循环 为什么还要 forEach ?_js_03