ES6 Symbol.iterator迭代器

定义:Symbol.iterator 为每一个对象定义了默认的迭代器。该迭代器可以被 for…of 循环使用。

描述
当需要对一个对象进行迭代时(比如开始用于一个for…of循环中),它的@@iterator方法都会在不传参情况下被调用,返回的迭代器用于获取要迭代的值。
一些内置类型拥有默认的迭代器行为,其他类型(如 Object)则没有。下表中的内置类型拥有默认的@@iterator方法:

  1. Array.prototype[@@iterator]()
  2. TypedArray.prototype[@@iterator]()
  3. String.prototype[@@iterator]()
  4. Map.prototype[@@iterator]()
  5. Set.prototype[@@iterator]()

示例
我们可以像下面这样创建自定义的迭代器:

var myIterable = {}
myIterable[Symbol.iterator] = function* () {
    yield 1;
    yield 2;
    yield 3;
};
console.log([...myIterable]); // [1, 2, 3]

不符合标准的迭代器:
如果一个迭代器 @@iterator 没有返回一个迭代器对象,那么它就是一个不符合标准的迭代器,这样的迭代器将会在运行期抛出异常,甚至非常诡异的 Bug。

var nonWellFormedIterable = {}
nonWellFormedIterable[Symbol.iterator] = () => 1
[...nonWellFormedIterable] // TypeError: [] is not a function

一些内置类型拥有默认的迭代器行为:

{
  //ES6 Symbol.iterator迭代器
  //数组身上天生具备Symbol.iterator
  let arr = ['hello','world'];
  let map = arr[Symbol.iterator]();
  console.log(map.next()); //{value: "hello", done: false}
  console.log(map.next()); //{value: "world", done: false}
  console.log(map.next()); //{value: undefined, done: true} 
  //done为true时表示当前没有更多可返回数据
}

上面的代码中,变量arr是一个数组,原生就具有遍历器接口,部署在arr的Symbol.iterator属性上面,就得到遍历器对象。
对于原生部署Iterator接口的数据结构,不用自己写遍历器生成函数,for…of循环会自动遍历他们,除此之外,其他数据结构(主要是对象)的Iterator接口,都需要自己在Symbol.iterator属性上面部署,这样才会被for…of循环遍历。

一个数据结构只要部署了Symbol.iterator属性就能使用 for…of遍历 与 …运算符操作:
一个对象如果要具备可被for…of循环调用的 Iterator 接口,就必须在Symbol.iterator的属性上部署遍历器生成方法
下面是不正确的用法

//Object身上没有Symbol.iterator,当直接使用时会报错
{
  let obj = {
    a:1,
    b:2,
    c:3
  }
  
  console.log([...obj]); // error obj is not iterable
  for(let key of obj) {
     console.log(key); //error obj is not iterable
   }
}

对象(Object)之所以没有默认部署Iterator接口,是因为对象的哪个属性先遍历,哪个属性后遍历是不确定的,需要开发者自己手动指定。本质上,遍历器是一种线性处理,对于任何飞非线性结构的数据结构,部署遍历器接口,就等于部署一种线性转换。不过,严格地说,对象部署遍历器接口并不是很必要的,因为这是对象实际上被当做Map数据结构使用,ES5没有Map结构,而ES6原生提供了。
下面是另一个为对象添加 Iterator 接口的例子:

//在Object上自定义Symbol.iterator接口部署
{
  let obj = {
    start:[1,3,2],
    end:[7,9,8],
    //声明格式
    [Symbol.iterator](){
      let self = this;
      let index = 0;
      let arr = self.start.concat(self.end);//数组拼接
      let len = arr.length;
      //必须返回一个next对象包含value和done
      return {
        next(){
          if(index < len) {
            return {
              value:arr[index++],
              done:false
            }
          }else {
            return {
              value:arr[index++],
              done:true
            }
          }
        }
      }
    }
  }

  for(let key of obj) {
    console.log(key); 
  }
  //打印结果 1,3,2,7,9,8
}

一些内置类型拥有默认的迭代器行为,调用 Iterator 接口的例子

//数组拥有默认的迭代器行为
//for of背后应用的正是iterator接口
{
  let arr = ['hello','world'];
  for(let value of arr){
    console.log('value',value); //value hello , value world
  }
}
//字符串拥有默认的迭代器行为
{
  let str = 'abc';
  for(let a of str){
    console.log(a); //a b c
  }
}

总结

  1. 当对一个对象进行迭代时,他的默认迭代器会自动调用,一些内置类型拥有默认的迭代器行为,除了Objet没有,需要开发者手动部署Symbol.iterator属性;
  2. 一个数据结构主要本身拥有默认的迭代器行为或者部署了Symbol.iterator属性,就可以使用for…of遍历和…(扩展运算符)操作;
  3. 自定义创建的迭代器返回的一定需要是一个迭代器对象。

参考链接:
阮一峰老师的ES6入门:Iterator 和 for…of 循环
Symbol.iterator - JavaScript | MDN

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Symbol(Symbol.iterator)是一个内置的Symbol符号,它被用于定义一个对象的默认迭代器迭代器是一种用于遍历数据结构的机制,它提供了一种统一的方式来访问和处理序列中的元素。使用Symbol(Symbol.iterator)可以创建一个迭代器对象,该对象可以被用于在循环中遍历可迭代的对象,比如数组和字符串。通过在对象上定义Symbol(Symbol.iterator)属性并返回一个实现了next()方法迭代器对象,我们可以使用for...of循环来遍历该对象的元素。例如: ``` const myArray = [1, 2, 3]; const iterator = myArray(); for (const element of iterator) { console.log(element); } // 输出: // 1 // 2 // 3 ``` 上述代码中,我们通过访问数组的Symbol(Symbol.iterator)属性来获取一个迭代器对象,并将其存储在变量iterator中。然后,我们使用for...of循环来遍历该迭代器对象,从而遍历数组中的元素并输出它们。这个内置的Symbol符号Symbol(Symbol.iterator)使得我们可以很方便地使用for...of循环来遍历各种可迭代的对象。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Symbol.Iterator简单理解](https://blog.csdn.net/m0_46525076/article/details/118632890)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatgptT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [详解ES6 Symbol 的用途](https://download.csdn.net/download/weixin_38677234/14815893)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatgptT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值