es6 迭代器iterator

迭代

for…in… VS for…of…

我们一般理解的就是
for...in...用来循环遍历数组或对象的属性key
for...of...用来循环了遍历数组或对象的属性值
看例子:

var eles = document.querySelectorAll('*')
console.log(eles)

在这里插入图片描述
我们分别使用这两个迭代对象来遍历一遍
在这里插入图片描述
在这里插入图片描述

问题

是不是总是这样呢?我们新建一个对象再来试一下

var obj = {
  left: 100,
  right: 200
}
console.log(obj)

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
当我们使用for...of...循环这个对象时,报错了,说obj不可迭代

可迭代

对比上述两个案例的对象,当对象有可迭代属性时候,才能对其进行迭代,也就是才可以执行for...of...这类方法,这个迭代方法就是
在这里插入图片描述
这个迭代属性是用Symbol定义的,不可被外部访问

作用

具备iterator接口的数据结构都可以进行

  • 解构赋值
  • 扩展运算符(...运算符)
let str = 'hello'
let arrStr = [...str]
console.log(arrStr) // ['h', 'e', 'l', 'l', 'o'] 字符串有iterator接口的数据结构

自定义迭代器

那我们可以将上述的非迭代对象obj自己手动给写成迭代对象么?
其实就是给它定义一个Symbol(Symbol.iterator)方法,使其变成可迭代对象
我们先来一个初步的

var obj = {
  left: 100,
  right: 200
}
obj[Symbol.iterator] = function() {
  let a = 0
  return {
    next: function() {
      a++
      if(a < 3) {
        return {
          value: a,
          done: false
        }
      } else {
        return {
          value: '',
          done: true
        }
      }
    }
  }
}
for(let attr of obj) {
  console.log(attr) // 1 2
}

下面我们迭代对象的属性

var obj = {
  left: 100,
  right: 200
}
obj[Symbol.iterator] = function() {
  let keys = Object.keys(obj)
  let len = keys.length
  let n = 0
  return {
    next: function() {
      if(n < len) {
        return {
          value: keys[n++], // obj[keys[n++]]迭代出属性的值 100 200
          done: false
        }
      } else {
        return {
          done: true
        }
      }
    }
  }
}
for(let attr of obj) {
  console.log(attr) // left right
}

由此可见:迭代器可以让我们自己定义就是为了方便我们可以根据不同的业务定义我们自己的迭代器方法。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值