前言
变量的解构赋值是前端开发中经常用到的一个技巧,比如:
代码语言:javascript复制_// 对象解构_
const obj = { a: 1, b: 2 };
const { a, b } = obj;
console.log(a, b)
数组解构
const arr = [1, 2, 3];
const [a, b] = arr;
console.log(a, b)
工作中我们最经常用的就是类似上面的对象和数组解构,好多同学就不禁问了,这个不是很简单吗。
那好,我们再来看一个:
代码语言:javascript复制_// 不改动下面代码,如何使等式成立_
const [a, b] = { a: 1, b: 2 };
console.log(a, b)
你觉得这个打印出来什么呢?
直接报错:{(intermediate value)(intermediate value)} is not iterable
翻译过来就是值是不可迭代的,这是为什么呢?因为右边的值是不可迭代对象
可迭代对象
什么是可迭代对象?
可迭代对象就是满足 可迭代协议 的对象。
可迭代协议 中必须有这么一个属性:Symbol.iterator,一个无参数的函数,其返回值为一个符合 可迭代协议 的对象,即迭代器。
数组解构
数组可以解构,因为数组是一个可迭代对象。
代码语言:javascript复制const arr = [1, 2, 3];
const iter = arr[Symbol.iterator]();
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())
我们看一下打印结果:
value
代表的是这次迭代的值,done
代表迭代是否完成。
这就是 可迭代协议 的规则。
数组解构就相当于下面这种写法:
代码语言:javascript复制const arr = [1, 2, 3];
_// const [a,b] = arr;_
const iter = arr[Symbol.iterator]();
const a = iter.next().value;
const b = iter.next().value;
console.log(a, b)
对象解构
那么问题来了,对象身上没有 Symbol.iterator,为什么还能解构?
因为对象的解构过程是这样的:创建对象 -> 枚举属性(OwnPropertyKeys) -> 复制属性
,跟迭代器没关系。
对象解构就相当于下面这种写法:
代码语言:javascript复制const obj = { a: 1, b: 2 };
_// const { a, b } = obj;_
const a = obj.a;
const b = obj.b;
问题解决
我们捋清楚问题的起因,问题就好解决了,我们只需要在对象的原型上也添加一个 Symbol.iterator 属性就可以了:
代码语言:javascript复制Object.prototype[Symbol.iterator] = function () {
return Object.values(this)[Symbol.iterator]();
}
const [a, b] = { a: 1, b: 2 };
console.log(a, b)
这样就能使等式成立,而且如果你的 ES6
功底足够的扎实,还知道什么叫 生成器Generator,那你还可以这样写:
Object.prototype[Symbol.iterator] = function* () {
yield* Object.values(this);
}
const [a, b] = { a: 1, b: 2 };
console.log(a, b)
最终效果是一样的。
如果你对这些还不是很熟悉,建议你看一下 ES6
的文档:ECMAScript 6 入门教程