资讯专栏INFORMATION COLUMN

我们不一样:for...of与for...in

Imfan / 2266人阅读

摘要:定义两者都是遍历的方法,最先能想到的区别是,前者是遍历键名,后者是遍历键值。一种数据结构只要部署了接口,就称之为可遍历的。中提供了一些具备原生接口的数据结构包括函数的对象对象。

定义

两者都是遍历的方法,最先能想到的区别是,前者是遍历键名,后者是遍历键值。
看一下两者的定义:

for...in 遍历当前对象的所有可枚举属性(包括自有属性,从原型继承的属性),遍历顺序是无序的

for...of 遍历当前可遍历(iterable)数据结构拥有的可迭代元素(iterator),是有序的,是ES6提供的新方法

那么iterator是什么呢

遍历器 iterator

iterator是一种接口,为不同的数据结构提供统一的访问机制。
iterator主要供for...of消费。
一种数据结构只要部署了iterator接口,就称之为可遍历的。
ES6中提供了一些具备原生iterator接口的数据结构(包括Array、Map、Set、String、TypedArray、函数的arguments对象、NodeList对象。不包括Object),部署在数据结构的Symbol.iterator属性中。
所以也可以说,一种数据结构只要有Symbol.iterator属性,就称之为可遍历的。

var myIterable = {};
myIterable[Symbol.iterator] = function* () {
    yield 1;
    yield 2;
    yield 3;
};

for (let value of myIterable) { 
    console.log(value); 
}
// 1
// 2
// 3
for...of使用示例
// 遍历数组
let iterable = [10, 20, 30];
for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31

// 遍历字符串
let iterable = "boo";

for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"

// 遍历Map
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let entry of iterable) {
  console.log(entry);
}
// ["a", 1]
// ["b", 2]
// ["c", 3]
for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

// 遍历arguments
(function() {
  for (let argument of arguments) {
    console.log(argument);
  }
})(1, 2, 3);
// 1
// 2
// 3

如果用中断for...of,可以使用break、continue、throw或return

function* foo(){ 
  yield 1; 
  yield 2; 
  yield 3; 
}; 

for (let o of foo()) { 
  console.log(o); 
  break; // 终止iterator,跳出循环
}
for...in使用示例
// 从原型继承的属性
Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};
// 自定义属性
let iterable = [3, 5, 7];
iterable.foo = "hello"; 

for (let i in iterable) {
  console.log(i); // 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // 0, 1, 2, "foo"
  }
}

for (let i of iterable) {
  console.log(i); // 3, 5, 7
}
参考

ECMAScript 6 入门 - Iterator 和 for...of 循环
developer.mozilla.org - Difference between for...of and for...in

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/107696.html

相关文章

  • js遍历之for forEach in of

    摘要:语法参数当前遍历项。遍历的范围在第一次调用前就会确定。已删除的项不会被遍历到。的是由提出的,目的是作为遍历所有数据结构的统一方法。不仅可以遍历数组,还可以遍历结构,某些类似数组的对象如对象对象,对象,以及字符串。 即使是最简单的循环,其中也深藏学问 ECMAScript5(es5)有三种for循环 简单for for in forEach ECMAScript6(es6)新增 fo...

    yeyan1996 评论0 收藏0
  • Iterator 和 for...of 循环

    摘要:和循环遍历器意义为四种数据集合,提供统一的接口机制来处理所有不同的数据结构。调用函数返回一个遍历器对象,代表函数的内部指针。以后,每次调用遍历器对象的方法,就会返回一个有着和两个属性的对象。 Iterator 和 for...of 循环 Iterator(遍历器)意义 为Array、Object、Map、Set四种数据集合,提供统一的接口机制来处理所有不同的数据结构 。 任何数据结构,...

    Drinkey 评论0 收藏0
  • 数组对象、字符串遍历方法大全

    摘要:本文主要收集各种遍历方法,主要针对数组,也会有关于对象字符串的,看完它,你会对遍历有一个新的认识。方法是标准引入的。 当我们需要遍历一个数组时,第一个想到的就是for,然后用length去判断条件,之后++,但着似乎有些过于老套了。本文主要收集各种遍历方法,主要针对数组,也会有关于对象、字符串的,看完它,你会对遍历有一个新的认识。 showImg(https://segmentfaul...

    szysky 评论0 收藏0
  • lodash源码分析之compact中的遍历

    摘要:到这里,源码分析完了。但是,有两个致命的特性的遍历不能保证顺序会遍历所有可枚举属性,包括继承的属性。的遍历顺序依赖于执行环境,不同执行环境的实现方式可能会不一样。 小时候,乡愁是一枚小小的邮票, 我在这头, 母亲在那头。 长大后,乡愁是一张窄窄的船票, 我在这头, 新娘在那头。 后来啊, 乡愁是一方矮矮的坟墓, 我在外头, 母亲在里头。 而现在, 乡愁是一湾浅浅的海峡, 我在这头, 大...

    dmlllll 评论0 收藏0
  • javascript遍历方法总结

    摘要:总之,是用来循环带有字符串的对象的方法。循环里引入了一种新的循环方法,它就是循环,它既比传统的循环简洁,同时弥补了和循环的短板。 forEach 循环 JavaScript诞生已经有20多年了,我们一直使用的用来循环一个数组的方法是这样的: for (var index = 0; index < myArray.length; index++) { console.log(myAr...

    BothEyes1993 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<