【javascript】for...in、for...of、forEach等的区别

前端之家收集整理的这篇文章主要介绍了【javascript】for...in、for...of、forEach等的区别前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

forEach

以数组为例,JavaScript提供多种遍历语法。最原始的写法就是for循环。

这种写法比较麻烦,因此数组提供内置的forEach方法

这种写法的问题在于,无法中途跳出forEach循环,break命令或return命令都不能奏效。

for...in

for...in循环可以遍历数组的键名。

for...in循环有几个缺点

  1. 数组的键名是数字,但是for...in循环是以字符串作为键名“0”、“1”、“2”等等。
  2. for...in循环不仅遍历数字键名,还会遍历手动添加的其他键,甚至包括原型链上的键。
  3. 某些情况下,for...in循环会以任意顺序遍历键名。总之,for...in循环主要是为遍历对象而设计的,不适用于遍历数组。

for...of

for...of内部实现原理

内部实现原理是 iterator 接口

在ES6中,数组内置了iterator接口,但是普通的对象不是。也就是说,for...of无法直接用于普通对象的遍历。
其实for...of语句本质上是调用了iterator接口。所以对于任意的数据结构而言,只要部署了interator接口,就可以使用for...of创建迭代器,然后通过迭代器遍历其中的值。

给普通对象部署iterator接口

Object.defineProperty(myObject,Symbol.iterator,{
enumerable: false,writable: false,configurable: true,value: function () {
var o = this;
var idx = 0;
var ks = Object.keys(o);
return {
next: function () {
return {
value: o[ks[idx++]],done: (idx > ks.length)
}
}
}
}
});

for(let v of myObject) {
console.log(v);
}
// 输出
// 2
// 3

Interator接口本质上是一个生成迭代器的函数,执行它,就可以生成一个迭代器,不断执行迭代器的next方法,就可以遍历该数据结构。

for...of优点

  1. 有着同for...in一样的简洁语法,但是没有for...in那些缺点。
  2. 不同于forEach方法,它可以与break、continue和return配合使用。
  3. 提供了遍历所有数据结构的统一操作接口。

区别

for...of不同于for和for...in的地方还有一处:for...of直接遍历的是数组的值,而非数组的下标,而for和for...in仅仅是遍历数组的下标(当然你可以通过下标进一步获取值。遍历下标还是遍历值,仅仅在于语言层面的区别才有意义)。所以ES6的for...of可以说是实现了直接遍历数组的值的命令语句。

猜你在找的JavaScript相关文章