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

前言

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

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

你觉得这个打印出来什么呢?
在这里插入图片描述

直接报错:{(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())

我们看一下打印结果:
在这里插入图片描述

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/656532.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Python安全攻防】【网络安全】一、常见被动信息搜集手段

一、IP查询 原理:通过目标URL查询目标的IP地址。 所需库:socket Python代码示例: import socketip socket.gethostbyname(www.163.com) print(ip)上述代码中,使用gethostbyname函数。该函数位于Python内置的socket库中&#xf…

②单细胞学习-组间及样本细胞比例分析

目录 数据读入 每个样本各细胞比例 两个组间细胞比例 亚组间细胞比例差异分析(循环) 单个细胞类型亚新间比例差异 ①单细胞学习-数据读取、降维和分群-CSDN博客 比较各个样本间的各类细胞比例或者亚组之间的细胞比例差异 ①数据读入 #各样本细胞…

ubuntu-24.04系统静态Mac和IP配置

操作系统版本(桌面版):ubuntu-24.04-desktop-amd64.iso 原因说明:因网络的IP地址和Mac是预分配的,所以ubuntu系统需要修改网卡的mac地址和IP才能访问,网络查了半天资料都没成功,后再界面提示&a…

vue2 案例入门

vue2 案例入门 1 vue环境2 案例2.1 1.v-text v-html2.2 v-bind2.3 v-model2.4 v-on2.5 v-for2.6 v-if和v-show2.7 v-else和v-else-if2.8 计算属性和侦听器2.9 过滤器2.10 组件化2.11 生命周期2.12 使用vue脚手架2.13 引入ElementUI2.13.1 npm方式安装2.13.2 main.js导入element…

BIGO前端CICD平台

本文首发于:https://github.com/bigo-frontend/blog/ 欢迎关注、转载。 我是谁 BIGO前端CICD平台,是一个服务于前端团队的全研发周期管理平台,已经是我们团队日常都要使用的工具了。 该平台实现了一键创建项目、发布编排、新建迭代、checkl…

互联网应用主流框架整合之数据库事务管理

在互联网系统中同时运行着成千上百个线程是十分常见的事情,尤其当一个热门出现时,用户几乎同时打开手机、电脑、平板灯设备进行访问,这样就会导致数据库处在一个多事务访问的环境中,从而引发数据丢失或者数据不一致的现象&#xf…

Java GC问题排查的一些个人总结和问题复盘

个人博客 Java GC问题排查的一些个人总结和问题复盘 | iwts’s blog 是否存在GC问题判断指标 有的比较明显,比如发布上线后内存直接就起飞了,这种也是比较好排查的,也是最多的。如果单纯从优化角度,看当前应用是否需要优化&…

Mowgli用于配对多组学整合

对同一组细胞的多个分子层进行分析逐渐流行。越来越需要能够联合分析这些数据的多视图学习方法。Mowgli是一种支持配对多组学数据的整合方法。值得注意的是,Mowgli将非负矩阵分解和最优传输相结合,同时提高了非负矩阵分解的聚类性能和可解释性。作者将Mo…

解锁数据的力量:Navicat 17 新特性和亮点

解锁数据的力量:Navicat 17 新特性和亮点 大家好,我是猫头虎。今天我要为大家介绍 Navicat 17 的新特性和亮点。Navicat 是一款专业的数据库管理工具,支持多种数据库类型,包括 MySQL、Oracle、SQL Server、PostgreSQL、MariaDB、…

5月28号总结

刷题记录 1.A. Phone Desktop 输入: 11 1 1 7 2 12 4 0 3 1 0 8 1 0 0 2 0 15 0 8 2 0 9 输出: 1 1 2 2 1 1 0 1 1 2 5 题意:题目给我们1x1和2x2的图标个数,让我们求最少需要多少个5x3的屏幕。 思路:当只看2x2的图…

新建一个esri_sde_gists的服务

需求 新建一个esri_sde_gists的服务 步骤: 需要拷贝ora11gexe目标为新的目录,例如ora11gexe_gists 运行drivers找到etc下面的services文件,添加端口5152: 检查sde的library并创建: CREATE or REPLACE LIBRARY ST_S…

elastich运维

Elastichsearch是一种高度可扩展的开源全文搜索和分析引擎,可以用来实现快速、高效的数据检索。 集群规划与部署:首先需要根据业务需求规划Elastichsearch集群的节点数量和角色(如主节点、副本节点、协调节点等)。在部署时&#x…

@EnableConfigurationProperties源码解析

前言 EnableConfigurationProperties注解的使用,请移步相关博文:EnableConfigurationProperties注解使用 前置知识 Import注解作用简述 注入的类一般继承 ImportSelector 或者 ImportBeanDefinitionRegistrar 接口 继承ImportSelector接口&#xff…

AIGC 人工智能全能实操课:用AI工作,提升效率,帮你赚钱(33节课)

课程目录 2-AIGC介绍先导1.mp4 3-第一节-chatGPT介绍与原理1.mp4 4-第二节-CHATGPT提示词的三个原则_1.mp4 5-第三节-chatgpt提示词的7个步骤1.mp4 6-第四节-chatgpt提示词的4个技巧1.mp4 7-第五节-chatgpt制作分镜案例分享1.mp4 8-第六节-chatgpt提示词生成工具1.mp4 …

最短路Dijkstra求最短路(讲解 + 模板 + 例题)

Dijkstra算法 Dijkstra是基于贪心思想的单源最短路算法; 变量定义 : const int N 510; const int INF 1e9 10 ; struct edge{int v , w ; // 表示出边和边权 }; vector<edge> e[N] ; int d[N] ; // dis[u]存u到源点s的最短距离 int vis[N] ;// vis[u]标记u是否…

K8s集群调度续章

目录 一、污点&#xff08;Taint&#xff09; 1、污点&#xff08;Taint&#xff09; 2、污点组成格式 3、当前taint effect支持如下三个选项&#xff1a; 4、查看node节点上的污点 5、设置污点 6、清除污点 7、示例一 查看pod状态&#xff0c;模拟驱逐node02上的pod …

选择快充时代下的理想充电器与电压诱骗芯片PW6606

随着科技的不断进步&#xff0c;我们的电子设备对于充电速度和效率的要求越来越高。在快充技术迅猛发展的今天&#xff0c;了解不同类型的充电器及其对应的快充协议&#xff0c;以及如何选择适合的电压诱骗芯片&#xff0c;对于提升充电体验和保障设备安全显得尤为重要。 一、快…

「代码厨房大揭秘:Python性能优化的烹饪秘籍!」

哈喽&#xff0c;我是阿佑&#xff0c;上篇咱们讲了 Socket 编程 —— 探索Python Socket编程&#xff0c;赋予你的网络应用隐形斗篷般的超能力&#xff01;从基础到实战&#xff0c;构建安全的聊天室和HTTP服务器&#xff0c;成为网络世界的守护者。加入我们&#xff0c;一起揭…

什么情况下JVM内存中的一个对象会被垃圾回收?

什么情况下JVM内存中的一个对象会被垃圾回收? 1、什么时候会触发垃圾回收?2、被哪些变量引用的对象是不能回收的?3、Java中对象不同的引用类型4、finalize()方法的作用1、什么时候会触发垃圾回收? 平时我们系统运行创建的对象都是优先分配在新生代里的,如图: 然后如果…

【JVM底层原理,JVM架构详解】

1. JVM简介 1.1 什么是JVM? JVM是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现的。 主流虚拟机: 虚拟机名称介绍HotSpotOracle/Sun JDK和OpenJDK都使用HotSPo…