Array的迭代器

Turbo 发布于2019-08-22 15:04 / 1037人阅读

摘要：如上图所示，本文主要阐述了的四种迭代器，，和的功能和区别动态数组每次遍历开始时都会重新计算一次数组的长度稀疏数组不会跳过无效数组动态数组与一样，会遍历到新增加的元素稀疏数组也不会跳过无效数组特点可以遍历字符串可以遍历类数组对象对象可

如上图所示，本文主要阐述了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云服务器 -迭代器迭代器数组迭代器迭代器对象

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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