我們不一樣：for...of與for...in

Imfan 發布于2019-08-26 11:51 / 2452人閱讀

摘要：定義兩者都是遍歷的方法，最先能想到的區別是，前者是遍歷鍵名，后者是遍歷鍵值。一種數據結構只要部署了接口，就稱之為可遍歷的。中提供了一些具備原生接口的數據結構包括函數的對象對象。

定義

兩者都是遍歷的方法，最先能想到的區別是，前者是遍歷鍵名，后者是遍歷鍵值。
看一下兩者的定義：

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不一樣

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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