Array的迭代器

Turbo 發布于2019-08-22 15:04 / 1060人閱讀

摘要：如上圖所示，本文主要闡述了的四種迭代器，，和的功能和區別動態數組每次遍歷開始時都會重新計算一次數組的長度稀疏數組不會跳過無效數組動態數組與一樣，會遍歷到新增加的元素稀疏數組也不會跳過無效數組特點可以遍歷字符串可以遍歷類數組對象對象可

如上圖所示，本文主要闡述了Array的四種迭代器 for，for-of，for-in 和 for-each的功能和區別

for

動態數組：每次遍歷開始時都會重新計算一次數組的長度

稀疏數組：不會跳過無效數組

for-of

動態數組：與for一樣，會遍歷到新增加的元素

稀疏數組：也不會跳過無效數組

特點：
1、可以遍歷字符串
2、可以遍歷類數組對象：DOM；NodeList對象
3、可以遍歷數組中的值
4、可以遍歷set，map對象

注釋：
set
定義：用來不重復的存儲任何數據類型的對象，不管是基本的數據類型還是對象
使用 new Set（array）
map：
定義：用來存儲鍵值對象的數據
使用： new Map（[iterable]）參數是一個數組或者是由鍵值對組成的可遍歷對象

測試

    /**可以遍歷字符串 */
    const strTarget = "hello";
    for(item of strTarget){
        console.log(item);
    }

結果：

 /**遍歷DOM元素*/
    const pdom = document.getElementsByTagName("p");
    for( item of pdom){
        console.log(item);
    }

結果：

    /**遍歷數組中的值 */
    const arr = ["liumin","qijun","fengjian","lala"];
    for(item of arr){
       console.log(item); 
    }

結果：

    /**遍歷set和map中的值 */
    const setObj = new Set([1,2,2,3,5,6]);
    for(value of setObj){
        console.log(value);
    }

    const mapObj = new Map([["a",1],["b",2]]);
    for([key, value] of mapObj){
        console.log(`${key}----${value}`);
    }

遍歷set的輸出值：

遍歷map的輸出值：

forEach

動態數組：不會遍歷到新增加的元素

稀疏數組：會跳過無效數組

特點：不能用break和return來中斷循環

for-in

動態數組：不會遍歷到新增加的元素

稀疏數組：會跳過無效數組

特點：
1、for-in是為對象的遍歷而設計的，index不是實際數字，而是鍵字符串，與Object.keys()方法類似
2、給數組額外定義一個屬性，會遍歷到這個屬性和值
3、遍歷順序有時也是隨機的
4、數組原型鏈上的屬性也會被訪問到

額外定義屬性

給數組額外定義一個屬性，for-in會遍歷到這個屬性值，forEach，for-of，for都不會遍歷到這個屬性值

測試

  const anotherArr = ["huang", "lala", "baba"];
  const array = ["iumin", "huahua", "jianjian"];
  array.another = anotherArr;

  console.log("----for-in----");
  for(let index in array){
      console.log(`${index}---${array[index]}`);
  }

  console.log("----for-of---");
  for(let value of array){
      console.log(value);
  }

  console.log("----forEach----");
  array.forEach((value) => {
    console.log(value);
  })

  console.log("----for-----");
  const arLenght = array.length;
  for(let i=0 ; i

由圖可以看出除了for-in其他三個都不會遍歷到數組額外定義的屬性
稀疏數組
for-in和forEach會跳過無效數組
測試
    const arr = [];
    arr[0] = 0;
    arr[100] = 100;
    arr[1000] = 1000;
 
    for(info in arr){
        console.log("arr["+info+"] = "+arr[info]);
    }
    
    arr.forEach((value) => {
        console.log(value);
    })  

由結果可以看出，for-in 和 foreach 只能輸出賦過值的元素，沒有賦過值的元素將不會輸出來
for 和 for-of是不會跳過無效數組的
    const arr = [];
    arr[0] = 0;
    arr[100] = 100;
    arr[1000] = 1000;
 
 for(let info of arr){
    console.log(info);
 }
 
 for(let i=0; i
這兩個的輸出結果是一樣的：

可以看出把沒有賦值的元素也輸出出來了
動態數組
for-of 和 for 可以遍歷到新增加的元素
測試（以for-of為例）：
    const arr = ["liumin","huahua","jianjian"];

    for(item of arr){
        if(item === "jianjian"){
            arr.push("hello");
        }     
        console.log(item);
    }
輸出結果：

for的輸出結果與上述一致
for-in 和 forEach 不可以遍歷到新增加的元素
測試（以 for-in為例）：
    const arr = ["liumin","huahua","jianjian"];

    for(item in arr){
        if(item === 2){
            arr.push("hello");
        }     
        console.log(arr[item]);
    }
輸出結果：

云服務器 GPU云服務器 -迭代器迭代器數組迭代器迭代器對象

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

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

ES6-迭代器（iterator）和生成器（generator）- 可迭代對象

摘要：什么是可迭代對象可迭代對象具有屬性是一個方法的返回值是一個迭代器結合以上第二點和第三點，可以得出就是一個生成器所以我們可以給出一個可迭代對象的明確定義就是一個具有屬性，且其為一個生成器的對象，就是可迭代對象。 1: 什么是可迭代對象？ 1: 可迭代對象具有Symbol.iterator屬性 2: Symbol.iterator是一個方法 3: Symbol.iterator的返回值是一...

xiao7cn 2019-08-26 18:36 評論0 收藏0
ES6 迭代器簡介

摘要：簡單介紹下規范里面迭代器相關的概念。接口指定迭代器對象必須實現一個方法，如下示例偽代碼。方法是否接受參數，在規范中并不嚴格限定，取決于實現當前這個迭代器的對象。表示迭代終結，后續再調用當前迭代器的方法，返回的對象一律為。簡單介紹下 ES6 規范里面迭代器（Iterator）相關的概念。最近為啥會看到迭代器，是因為看了 fetch 相關的 Headers 接口，為了實現下 Header...

mingde 2019-08-20 16:42 評論0 收藏0
PHP標準庫SPL學習之數據結構、常用迭代器、基礎接口

摘要：將數組或者集合中的全部或者一部數據取出來，用迭代器比較方便迭代器能陸續遍歷幾個迭代器按順序迭代訪問幾個不同的迭代器。一、SPL簡介 ?????什么是SPL PHP的標準庫SPL：Standard PHP Library ?????SPL: 用于解決常見普遍問題的一組接口與類的集合 ?????Common Problem：數學建模/數據結構解決數據怎么存儲的問題元素遍歷 ...

2i18ns 2019-06-28 18:46 評論0 收藏0
從forEach到迭代器

摘要：本文從使用對數組進行遍歷開始說起，粗略對比使用進行遍歷的差異，并由此引入中可迭代對象迭代器的概念，并對其進行粗略介紹。說到這里，就繼續說一下迭代器關閉的情況了。確實，符合可迭代協議和迭代器協議的。本文從使用 forEach 對數組進行遍歷開始說起，粗略對比使用 forEach , for...in , for...of 進行遍歷的差異，并由此引入 ES6 中可迭代對象/迭代器的概...

rockswang 2019-08-23 12:36 評論0 收藏0
從迭代器模式到迭代協議

摘要：迭代器模式迭代器模式是指提供一種方法順序訪問一個聚合對象中的各個元素，而不需要暴露該對象的內部表示。可迭代協議和迭代器協議。生成器函數是可以作為迭代器工廠的函數，當它被執行時會返回一個新的對象，該對象符合可迭代協議和迭代器協議。迭代器模式迭代器模式是指提供一種方法順序訪問一個聚合對象中的各個元素，而不需要暴露該對象的內部表示。迭代器分為內部迭代器和外部迭代器。內部迭代器只需一次初...

doodlewind 2019-08-23 16:10 評論0 收藏0
ES6迭代器的簡單指南和示例

摘要：我們將從概念上理解迭代器是什么，以及在何處使用它們和示例。同時返回一個名為迭代器的對象，這個迭代器將擁有一個名為的方法，該方法將返回一個具有鍵值為和的對象。下圖可以幫助建立可迭代對象迭代器和之間的關系，這種關系稱為迭代協議。 showImg(https://segmentfault.com/img/bVbkk18?w=1000&h=562); 我們將在本文中分析迭代器。迭代器是在Jav...

Betta 2019-08-23 13:48 評論0 收藏0