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

Imfan 发布于2019-08-26 11:51 / 2477人阅读

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

定义

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

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

云服务器 GPU云服务器 for...of 样式不一样备案姓名不一样 java不一样

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

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

js遍历之for forEach in of

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

yeyan1996 2019-08-20 17:38 评论0 收藏0
Iterator 和 for...of 循环

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

Drinkey 2019-08-23 15:13 评论0 收藏0
数组与对象、字符串遍历方法大全

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

szysky 2019-08-22 16:40 评论0 收藏0
lodash源码分析之compact中的遍历

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

dmlllll 2019-08-22 11:20 评论0 收藏0
javascript遍历方法总结

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

BothEyes1993 2019-08-23 14:25 评论0 收藏0