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]);
    }

输出结果：