for...in VS. for...of

Anchorer 發(fā)布于2019-08-23 12:11 / 1192人閱讀

摘要：在種和一樣都具有遍歷數組的功能，但是他們的返回結果并不相同，使用遍歷數組時，無法使用中斷循環(huán)，也無法使用中斷，當然使用也不能返回到外層函數。枚舉對象循環(huán)不支持普通對象，如果想迭代一個對象的屬性，可以使用內建的方法使用方法獲取對象的數組

先看下面這兩種寫法：
1.

tabList.forEach((tab, i) => {
    if (tab.is_main) {
        this.tabStores.push();
    }else{
        this.tabStores.push();
    }
});

tabList.map((tab, i) => {
    let ViewComponent = null;
    if (tab.is_main) {
         ViewComponent = ( ); 
    }else {
         ViewComponent = ( );
    }
    return (  {ViewComponent} );
})

剛學習的時候一直覺得map和forEach是同樣的東西，上面的兩種寫法可以隨便互換，后來有機會仔細查了一下，發(fā)現并不是這樣。
在ES5種 forEach 和 map 一樣都具有遍歷數組的功能，但是他們的返回結果并不相同，使用 forEach 遍歷數組時，無法使用break中斷循環(huán)，也無法使用 return false 中斷，當然使用 return 也不能返回到外層函數。例如：

var arr = [1, 2, 3];
arr.forEach(function (value) {
  console.log(value);
  if (value == 2) {
    return false;
  }
});
// 結果是：1, 2, 3

for in VS. for of

for...in循環(huán)出的是key，for...of循環(huán)出的是value
遍歷數組：

var arr = [2, 5, 7];
for (let temp in arr){//枚舉數組
    console.log(temp);
}
//0 1 2
for (let temp of arr){//迭代數組
    console.log(temp);
}
//2 5 7

使用for...in的時候如果想要獲取數組內的value，可以采用索引的方式，例如arr[temp];但是這個做法并不好，因為：1.temp并不是一個數字，而是一個string，會無意間增加字符串計算；2.for in 不僅可以枚舉數組自身。數組的原型對象、數組對象本身的屬性也都可以枚舉出來（可用hasOwnProperty()方法過濾非自有屬性）；3.這段代碼可能按照隨機順序遍歷數組； 4.for... in不適用于數組的遍歷，更加適用于對象。

枚舉對象：

var obj = {
    a: 1,
    b: [],
    c: fn,
};
for ( let temp in obj){
    console.log(temp);
}
// a b c
for (let temp of obj){
    console.log(temp);
}
// Uncaught TypeError: obj is not iterable

for...of循環(huán)不支持普通對象，如果想迭代一個對象的屬性，可以使用內建的Object.keys()方法；

for(let key of Object.keys(obj)){
    //使用Object.keys()方法獲取對象key的數組
    console.log(key + ":" + obj[key]);
}

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98078.html

JavaScript 的 4 種數組遍歷方法： for VS forEach() VS for/in

摘要：對于，除非使用箭頭函數，它的回調函數的將會變化。使用測試下面的代碼，結果如下打印打印要點使用的規(guī)則要求所有回調函數必須使用箭頭函數。譯者按： JS 騷操作。原文：For vs forEach() vs for/in vs for/of in JavaScript 譯者: Fundebug 本文采用意譯，版權歸原作者所有我們有多種方法來遍歷 JavaScript 的數組或者...

joyqi 2019-08-26 13:35 評論0 收藏0
Iterator 和 for..of vs for...in

摘要：迭代器遍歷器提高訪問具有遍歷借口數據的效率相當于指針默認是可遍歷借口有方法將當前指針移動到下個位置，返回一個對象數組默認有迭代器屬性可以用在數組類數組類似于數組類數組自定義遍歷器普通循環(huán)遍歷迭代器遍歷遍歷遍歷用來遍歷對象 Iterator迭代器(遍歷器) 提高訪問具有遍歷借口數據的效率相當于指針(默認是-1)；可遍歷借口有next方法(next將當前指針移動到下個位置，返回一個對...

ThreeWords 2019-08-21 16:02 評論0 收藏0
一文徹底弄懂 for forEach for-in for-of 的區(qū)別

基本語法下面列出了這幾個遍歷語法規(guī)則： for (let index = 0; index < array.length; index++) { const element = array[index] // ... } array.forEach(element => { // ... }) for (const key in array) { // ......

newsning 2019-08-23 15:32 評論0 收藏0
一些當前 Node.js 中最流行 ES6 特性的 benchmark （V8 / Chakra）

摘要：前言項目地址如果有想要增加的特性，歡迎更新，然后。環(huán)境大致結論許多情況下下的特性表現相對更好。前言項目 github 地址：https://github.com/DavidCai1993/ES6-benchmark 如果有想要增加的特性 benchmark ，歡迎更新benchmarks/ ，然后 PR 。環(huán)境 CPU: Intel Core(TM) i5-2410M 2.30...

ZHAO_ 2019-08-19 17:54 評論0 收藏0
es6--let和const

摘要：同時這個變量立即被初始化，初始值為當語句執(zhí)行到賦值語句時，這個變量改變其初始值。對一個還未初始化的變量進行操作將會引起。循環(huán)和循環(huán)使用申明變量時和循環(huán)一樣。的運行過程和三者的表現和在循環(huán)過程中相似。 let和const 標簽（空格分隔）： es6 let命令這個命令是用來申明變量的，但是和es5不同的是，用它來聲明的變量是局部變量，存在于局部作用域(blocked scope): ...

lufficc 2019-08-20 10:41 評論0 收藏0