成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Anchorer / 1212人閱讀

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

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

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

2.

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

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

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

for in VS. for of

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

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

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

枚舉對象：

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)不支持普通對象，如果想迭代一個(gè)對象的屬性，可以使用內(nèi)建的Object.keys()方法；

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98078.html

相關(guān)文章

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

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

    joyqi 評論0 收藏0

  • Iterator 和 for..of vs for...in

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

    ThreeWords 評論0 收藏0

  • 一文徹底弄懂 for forEach for-in for-of 的區(qū)別

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

    newsning 評論0 收藏0

  • 一些當(dāng)前 Node.js 中最流行 ES6 特性的 benchmark （V8 / Chakra）

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

    ZHAO_ 評論0 收藏0

  • es6--let和const

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

    lufficc 評論0 收藏0

發(fā)表評論

0條評論

Anchorer

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<