Array的迭代器

Turbo 發(fā)布于2019-08-22 15:04 / 1058人閱讀

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

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

for

動態(tài)數(shù)組：每次遍歷開始時都會重新計算一次數(shù)組的長度

稀疏數(shù)組：不會跳過無效數(shù)組

for-of

動態(tài)數(shù)組：與for一樣，會遍歷到新增加的元素

稀疏數(shù)組：也不會跳過無效數(shù)組

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

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

測試

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

結(jié)果：

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

結(jié)果：

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

結(jié)果：

    /**遍歷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

動態(tài)數(shù)組：不會遍歷到新增加的元素

稀疏數(shù)組：會跳過無效數(shù)組

特點(diǎn)：不能用break和return來中斷循環(huán)

for-in

動態(tài)數(shù)組：不會遍歷到新增加的元素

稀疏數(shù)組：會跳過無效數(shù)組

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

額外定義屬性

給數(shù)組額外定義一個屬性，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其他三個都不會遍歷到數(shù)組額外定義的屬性
稀疏數(shù)組
for-in和forEach會跳過無效數(shù)組
測試
    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);
    })  

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

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

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

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

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