对象解构与迭代器的猫腻?

2024-05-28 17:50:47 浏览数 (1)

前言

变量的解构赋值是前端开发中经常用到的一个技巧,比如:

代码语言: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,那你还可以这样写:

代码语言:javascript复制
Object.prototype[Symbol.iterator] = function* () {

 yield* Object.values(this);

}

const [a, b] = { a: 1, b: 2 };

console.log(a, b)

最终效果是一样的。

如果你对这些还不是很熟悉,建议你看一下 ES6 的文档:ECMAScript 6 入门教程

0 人点赞