Array的迭代器

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

for

• 動態數組：每次遍歷開始時都會從新計算一次數組的長度
• 稀疏數組：不會跳過無效數組

for-of

• 動態數組：與for同樣，會遍歷到新增長的元素
• 稀疏數組：也不會跳過無效數組
• 特色：
  一、能夠遍歷字符串
  二、能夠遍歷類數組對象：DOM；NodeList對象
  三、能夠遍歷數組中的值
  四、能夠遍歷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

• 動態數組：不會遍歷到新增長的元素
• 稀疏數組：會跳過無效數組
• 特色：
  一、for-in是爲對象的遍歷而設計的，index不是實際數字，而是鍵字符串，與Object.keys()方法相似
  二、給數組額外定義一個屬性，會遍歷到這個屬性和值
  三、遍歷順序有時也是隨機的
  四、數組原型鏈上的屬性也會被訪問到

額外定義屬性

給數組額外定義一個屬性，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<arLenght; i++){
      console.log(array[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<arr.length; i++){
     console.log(arr[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]);
    }

輸出結果：