JS 可迭代对象 ( 使 var [a, b] = {a: 1, b: 2} 解构赋值 )

前言

ES6中引入了迭代器与可迭代对象的概念，并且提供了对可迭代对象的相关支持，如for…of循环，Map(iterable)构造器，展开语法…等。让我们对数组外的数据集合的遍历操作也得到极大简化

可迭代对象（Iterable object）

数组是一个特殊的对象，它和普通对象的区别不仅仅在于元素的顺序访问、存储。另外一个重要的区别是：数组是可迭代的，也就是可以使用for … of语句访问（迭代）所有的元素。普通对象使用for … of语句 会报错

let arr = [1,2,3,4,5]
for(let val of arr) {
    console.log(val)  // 1 2 3 4 5
}

let obj = {
    name:'Kite',
    age:23,
}
for(let key of obj) { // obj is not iterable
    console.log(key)
}

扩展运算符

// es5 apply
function consoleLog() {
  console.log(...arguments)
}
console.log(consoleLog.apply(null, array))

// es6 扩展预算符
const array = [1, 2, 3, 4]
console.log(...array); // 1,2,3,4


const obj = {
  name: 'kite',
  age: 23,
}
console.log(...obj); // TypeError: Found non-callable @@iterator

Symbol.iterator

如果我们希望一个对象可以迭代，必须为对象添加一个名为Symbol.iterator的方法（一个专门使对象可迭代的内建Symbol）

当使用for … of循环迭代对象时，就会调用Symbol.iterator方法，这个方法必须返回一个迭代器（一个有next()方法的对象）。
得到迭代器后，for … of会不断的调用迭代器的next()方法获得下一个元素
next()方法返回的内容必须符合格式：{ done:Boolean,value:any }，当done:true时，循环结束，否则value就是下一个值。

迭代器

迭代器是借鉴C++等语言的概念，迭代器的原理就像指针一样，它指向数据集合中的某个元素，你可以获取它指向的元素，也可以移动它以获取其它元素。迭代器类似于数组中下标的拓展，各种数据结构，如链表（List）、集合（Set）、映射（Map）都有与之对应的迭代器。

JS中的迭代器是专门为了遍历这一操作设计的。每次获取到的迭代器总是初始指向第一个元素，并且迭代器只有next()一种行为，直到获取到数据集的最后一个元素。我们无法灵活移动迭代器的位置，所以，迭代器的任务，是按某种次序遍历数据集中的元素。

实现一个可迭代对象：

let obj = {
    name: 'Kite',
    age:23,
    [Symbol('id')]: 20000219
}
obj[Symbol.iterator] = function(){
    //返回一个迭代器
    return {
        index: 0,
        next: function () {
            const keys = Reflect.ownKeys(obj);
            if(this.index < keys.length - 1 ) {
                const key = keys[this.index];
                this.index++;
                return { done:false,value:obj[key] }
            } else {
                return { done:true, value: undefined }//迭代结束
            }
        }
    }
}
for(let value of obj){
    console.log(value)  // Kite 23 20000219
}
for(let key in obj){
  console.log(key)  // name age
}

var [a, b] = {a: 1, b: 2}

var [a, b] = { a: 1, b: 2}是想从对象中解构出a和b，由于ES6规定只能解构可迭代对象，此时需要将 = 右侧对象变为可迭代对象。

• 由于无法直接修改题目（直接给右侧对象加符号属性），就需要加到原型上。
• Object.values(this)拿到对象值的数组
• 将数组的迭代器返回

Object.prototype[Symbol.iterator] = function () {
	return Object.values(this)[Symbol.iterator]()
}

总结

所谓可迭代对象，就是比普通对象多了一个名为Symbol.iterator方法的普通对象，这个方法返回一个迭代器。或者，一个具备Symbol.iterator同时具备next方法的对象也是一个可迭代的对象。

​