解构赋值的本质

Q

let arr = [1, 2]
let [a, b] = arr
a   // 1
b   // 2

对于上面一段解构赋值代码，很多人会说，是把 1 赋予 a， 把 2 赋予 b 了
这么说是对的，但是不够准确

如果有一个问题，如何能让下面代码成功实现？

let obj = {a: 1, b: 2}
let [a, b] = obj

这就需要了解 解构赋值的原理

A

当我们在控制台上随意打印一个数组或对象

可以看到有一个 Symbol(Symbol.iterator)
它的值是一个 function
我们执行这个函数，看看返回值是什么

arr[Symbol.iterator]()
// 输出： Array Iterator {}

是一个数组的迭代器
这个迭代器做的事情就是，调用它的 .next() 方法，拿到每一项的值

因此：

let arr = [1, 2]
let [a, b] = arr

等同于：

let iter = arr[Symbol.iterator]();
let a = iter.next()

所以，怎样的数据可以实现解构赋值？
就是内部实现迭代器的数据类型
红宝书上写着，很多内置类型都实现了 Iterable 接口：

1. 字符串
2. 数组
3. 集合
4. 映射
5. arguments 对象
6. NodeList 等 DOM 集合类型

回到最开始提出的 question
如何能让下面代码成功实现？

let obj = {a: 1, b: 2}
let [a, b] = obj

将 obj 的迭代器重新定义，返回成数组的迭代器类型，就可以了

let obj = {
  a: 1, 
  b: 2, 
  [Symbol.iterator](){ 
    let arr = [1,2]; const iter = arr[Symbol.iterator](); return iter; 
  }
}