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

简介: 这篇文章介绍了变量的解构赋值技巧在前端开发中的常用性,包括对象解构和数组解构。文章中给出了一些代码示例,解释了可迭代对象的概念以及如何使用迭代协议来实现数组解构。此外,文章还介绍了生成器的概念并提供了代码示例。作者建议对这些概念不熟悉的读者可以查阅ES6的文档来更好地理解。

前言

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

// 对象解构
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)

工作中我们最经常用的就是类似上面的对象和数组解构,好多同学就不禁问了,这个不是很简单吗。
那好,我们再来看一个:

// 不改动下面代码,如何使等式成立
const [a, b] = {
    a: 1, b: 2 };
console.log(a, b)

你觉得这个打印出来什么呢?
vts1tni5xjfej2vwd2mkmzkqtcfo93qy.png

直接报错:{(intermediate value)(intermediate value)} is not iterable
翻译过来就是值是不可迭代的,这是为什么呢?因为右边的值是不可迭代对象

可迭代对象

什么是可迭代对象?
可迭代对象就是满足 可迭代协议 的对象。
可迭代协议 中必须有这么一个属性:Symbol.iterator,一个无参数的函数,其返回值为一个符合 可迭代协议 的对象,即迭代器

数组解构

数组可以解构,因为数组是一个可迭代对象。

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())

我们看一下打印结果:
pppnm7op5af0m5fzrcgh7g2gkoddhs4y.png

value代表的是这次迭代的值,done代表迭代是否完成。
这就是 可迭代协议 的规则。
数组解构就相当于下面这种写法:

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) -> 复制属性,跟迭代器没关系。
对象解构就相当于下面这种写法:

const obj = {
    a: 1, b: 2 };
// const { a, b } = obj;
const a = obj.a;
const b = obj.b;

问题解决

我们捋清楚问题的起因,问题就好解决了,我们只需要在对象的原型上也添加一个 Symbol.iterator 属性就可以了:

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 入门教程

相关文章
|
4月前
|
数据采集 前端开发 API
React - 实现一个基于 Antd 的数值范围组件
这篇文章介绍了如何实现一个基于Ant Design的数值范围组件,以满足数据采集流程中表单数据的录入需求。文章详细说明了组件的设计思路、代码结构、使用方式以及参数说明,并提供了效果预览和注意事项。组件支持只能输入数字,具有自定义表单控件封装的特点,同时支持所有InputNumber属性,以适应不同业务场景的需求。
118 0
React - 实现一个基于 Antd 的数值范围组件
|
4月前
|
JavaScript
如何动态执行 JS 脚本
这篇文章介绍了在业务开发中动态执行JS脚本的几种方法,包括使用eval()函数、setTimeout、动态创建script标签以及使用Function构造函数。这些方法各有特点,如eval()同步执行且作用域为当前执行作用域,动态script标签同步执行且作用域为全局作用域等,具体实现方案需根据业务场景选择。
170 0
|
4月前
|
IDE API 开发工具
让 GitHub 个人主页更专业:用 WakaTime 实现动态代码统计
这篇文章介绍了如何使用 WakaTime 为 GitHub 个人主页添加动态代码统计,展示编码活跃度,提升专业性。通过注册账号、安装 IDE 插件、配置 GitHub 仓库和使用工作流自动更新 README 文件,实现对多种编程语言的详细统计。
277 1
让 GitHub 个人主页更专业:用 WakaTime 实现动态代码统计
|
4月前
|
小程序 JavaScript API
uni-halo + 微信小程序开发实录:我的第一个作品诞生记
这篇文章介绍了使用uni-halo框架进行微信小程序开发的过程,包括选择该框架的原因、开发目标以及项目配置和部署的步骤。
180 0
uni-halo + 微信小程序开发实录:我的第一个作品诞生记
|
JavaScript 前端开发 搜索推荐
Nuxt4.0初体验:一个简约、精美、现代化的个人站点导航!
这篇文章介绍了作者使用Nuxt 4.0重构个性化站点导航网站的经历,阐述了Nuxt 4.0的新特性和优势,如更清晰的项目结构、更好的TypeScript体验、更快的CLI和开发速度等,并且分享了重构过程中的体验和项目完成效果。同时,作者还对比了Nuxt.js与Next.js两个框架的优劣,表达了自己对Nuxt.js的偏好。
323 0
Nuxt4.0初体验:一个简约、精美、现代化的个人站点导航!
|
JavaScript
Nest.js 实战 (十一):配置热重载 HMR 给服务提提速
这篇文章介绍了Nest.js服务在应用程序引导过程中,TypeScript编译对效率的影响,以及如何通过使用webpackHMR来降低应用实例化的时间。文章包含具体教程,指导读者如何在项目中安装依赖包,并在根目录下新增webpack配置文件webpack-hmr.config.js来调整HMR相关的配置。最后,文章总结了如何通过自定义webpack配置来更好地控制HMR行为。
265 0
Nest.js 实战 (十一):配置热重载 HMR 给服务提提速
|
新零售
重磅发布 | 阿里云发布《数据中台交付标准化》白皮书,促进数据中台高效高质量履约 原创 肖剑 阿里云研究院
编者按: 企业进行数字化建设是实现精细化运营和数字化创新发展的关键所在,数据中台建设是企业实现数智化转型的必经之路。在数据中台建设与交付过程中,存在专业度要求高、交付过程管控难、交付协同难等挑战,为应对这些挑战并实现数据中台交付,需要有一套数据中台交付的方法论、交付标准、交付工具和数字化交付工作台来指导、帮助企业和数据中台服务商来建设好数据中台,为企业的数字化转型提供数据咨询规划服务、数据资产建设服务和数据应用建设服务等,提升数据中台交付的效率和质量,降低规模化交付成本。
1207 0
重磅发布 | 阿里云发布《数据中台交付标准化》白皮书,促进数据中台高效高质量履约 原创 肖剑 阿里云研究院
|
数据处理 开发者 数据格式
Nest.js 实战 (四):利用 Pipe 管道实现数据验证和转换
这篇文章介绍了Nest.js框架中管道的概念和使用。管道是一种强大的功能,用于在请求数据到达控制器方法之前对其进行预处理,如转换、验证、清理等。文章详细解释了数据转换、数据验证、错误处理和一致性等管道的主要用途,并通过代码示例演示了如何使用内置管道和自定义管道。最后,文章总结了管道在提升应用健壮性和安全性方面的作用,认为合理利用管道可以加速开发周期,提高软件质量。
337 0
|
监控 安全 中间件
Next.js 实战 (十):中间件的魅力,打造更快更安全的应用
这篇文章介绍了什么是Next.js中的中间件以及其应用场景。中间件可以用于处理每个传入请求,比如实现日志记录、身份验证、重定向、CORS配置等功能。文章还提供了一个身份验证中间件的示例代码,以及如何使用限流中间件来限制同一IP地址的请求次数。中间件相当于一个构建模块,能够简化HTTP请求的预处理和后处理,提高代码的可维护性,有助于创建快速、安全和用户友好的Web体验。
262 0
Next.js 实战 (十):中间件的魅力,打造更快更安全的应用
|
12月前
Next.js 实战 (二):搭建 Layouts 基础排版布局
本文介绍了作者在Next.js v15.x版本发布后,对一个旧项目的重构过程。文章详细说明了项目开发规范配置、UI组件库选择(最终选择了Ant-Design)、以及使用Ant Design的Layout组件实现中后台布局的方法。文末展示了布局的初步效果,并提供了GitHub仓库链接供读者参考学习。
398 1
Next.js 实战 (二):搭建 Layouts 基础排版布局

热门文章

最新文章