15-可迭代协议&for-of

可迭代协议 与 for of 循环

可迭代协议

概念回顾

• 迭代器(iterator): 一个具体next方法的对象,next方法返回下一个数据并且能指示是否迭代
• 迭代器创建函数(iterator creator): 一个返回迭代器的函数

可迭代协议

ES6规定, 如果一个对象具有知名符号Symbol.iterator,并且属性值是一个迭代器创建函数,则该对象是可迭代的(iterable)

• 瞎写一个可迭代对象

let obj = {
    [Symbol.iterator]() {
        return {
            next() {
                return {
                    value: 1,
                    done: false
                }
            }
        } 
    }
}

const arr = [1, 2, 3, 4];
const iterator = arr[Symbol.iterator]();
let result = iterator.next();
while(!result.done) {
  const item = result.value;// 取出数值
  console.log(item);
  // 下一次迭代
  result = iterator.next();
}

怎么知道一个对象是否是可迭代的? 如何遍历一个可迭代对象？ [for-of]

for-of 循环

for-of 循环用于遍历可迭代对象,格式如下

for(let item in iterable) {
  // iterable 可迭代对象
  // item: 每次迭代得到的数据
}

• 给对象加迭代属性

const obj = {
  a: 1,
  b: 2,
  [Symbol.iterator]() {
    const keys = Object.keys(this);
    let i = 0;
    return {
      next: () => {
        let propName = keys[i];
        let propvalue = this[propName];
        const result = {
          value: { propName, propvalue} ,
          done: i >= keys.length
        }
        i++;
        return result
      }
    }
  }
}

for(let item of obj) {
  console.log(item);
}

关于扩展运算符与迭代对象

展开运算符可以作用于可迭代对象,这样,就可以轻松的将可迭代对象转换为数组

const obj = {
  a: 1,
  b: 2,
  [Symbol.iterator]() {
    const keys = Object.keys(this);
    let i = 0;
    return {
      next: () => {
        let propName = keys[i];
        let propvalue = this[propName];
        const result = {
          value: { propName, propvalue} ,
          done: i >= keys.length
        }
        i++;
        return result
      }
    }
  }
}

const arr = [...obj];
console.log(arr);