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

前言

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

// 对象解构
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 入门教程

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

轻松拿捏C语言——自定义类型之【结构体】

🥰欢迎关注 轻松拿捏C语言系列,来和 小哇 一起进步!✊ 🎉创作不易,请多多支持🎉 🌈感谢大家的阅读、点赞、收藏和关注💕 🌹如有问题,欢迎指正 1. 结构体类型的…

echarts-象形柱图

象形柱图 一般的柱图都是纯色柱图,使用象形柱图可以给柱图定义自己的样式。 样式的调节与柱图一样,核心在于symbol调节柱图的组成。 let options {tooltip: {},xAxis: {type: "category",data: ["d1", "d2", "d3&qu…

具有固定宽度的盒子:\makebox, \parbox

makebox \makebox 是 LaTeX 中的一个命令&#xff0c;用于创建一个具有固定宽度的盒子&#xff0c;并在该盒子内放置内容。这个命令可以用于控制文本或对象的位置和对齐。 语法如下&#xff1a; \makebox[<width>][<alignment>]{<content>}其中&#xff1…

存储+调优:存储-memcached

存储调优&#xff1a;存储-memcached 什么是memcached? 高性能的分布式内存缓存服务器。通过缓存数据库的查询结果&#xff0c;减少数据库访问次数&#xff0c;以提高动态Web应用的速度、提高可扩展性。 在memcached中存什么&#xff1f; 尽快被保存 访问频率高 1.数据保…

unity回到低版本报错解决

用高版本2022打开过后的再回到2020就报了一个错。 报错如下&#xff1a; Library\PackageCache\com.unity.ai.navigation1.1.5\Runtime\NavMeshSurface.cs 看了一下是Library&#xff0c;然后我删除了整个Library文件夹&#xff0c;重启启动生成Library&#xff0c;然后还是…

IT人的拖延——渴望成功与害怕成功的矛盾

很多人都以为&#xff0c;害怕失败是拖延的主要诱因&#xff0c;但其实“害怕成功”也是拖延的主要诱因之一。要说这个原因&#xff0c;我们不得不提起Bible中的一个人“约拿”&#xff0c;让我们先来看看他的故事带给我们什么启示。 约拿情结简介 约拿是Bible中的一名先知&a…

二十九、openlayers官网示例DeclutterGroup解析——避免矢量图层的文字重叠

官网demo地址&#xff1a; Declutter Group 这篇说的是如何设置矢量图层上多数据点文字不重叠。 主要是属性declutter &#xff0c;用于处理矢量图层上重叠的标注和符号&#xff0c;为true时启用去重叠功能。所有矢量特征的标注和符号都会被处理以避免重叠。false则与之相反。…

es安装错误Exception in thread “main“ java.nio.file.NoSuchFileException解决方案

docker 启动es出现一下错误的解决方案 Exception in thread “main” java.nio.file.NoSuchFileException: /usr/share/elasticsearch/config/jvm.options Exception in thread "main" java.nio.file.NoSuchFileException: /usr/share/elasticsearch/config/jvm.op…

香橙派OrangePi AIpro,助力国产AIoT迈向新的台阶!

前言&#xff1a;很高兴受邀CSDN与OrangePi官方组织的测评活动&#xff0c;本次测评是一块基于AI边缘计算的香橙派开发板OrangePi AIpro。这是 香橙派 联合 华为昇腾 合作精心打造的新一代边缘AI计算产品&#xff0c;于2023年12月初发布&#xff0c;提供 8/20TOPS澎湃算力[1]&a…

Java | Leetcode Java题解之第102题二叉树的层序遍历

题目&#xff1a; 题解&#xff1a; class Solution {public List<List<Integer>> levelOrder(TreeNode root) {Queue<TreeNode> queue new LinkedList<>();List<List<Integer>> res new ArrayList<>();if (root ! null) queue.a…

Git和plink

安装git的话首先进入到git官网进行下载Git - Downloading Package (git-scm.com) &#xff0c;点击便会自动进行下载。 安装plink时也是根据自己电脑的版本号选择进行安装&#xff0c;我的是windows的64位&#xff0c;由此选择以上版本进行安装&#xff0c;这一个下载完成之后不…

python lxml安装失败怎么解决

通过pip install lxml 安装lxml多次失败&#xff0c;失败原因总结如下&#xff1a; 1、pip版本未更新 解决方法&#xff1a;通过pip安装时&#xff0c;需保证pip的版本没有问题。 更新方法&#xff1a;在系统框输入&#xff1a;python -m pip install --upgrade pip 2、下载…

好消息!DolphinScheduler官网集成LLM模型问答AI kapa.ai

不少小伙伴可能发现了&#xff0c;Apache DolphinScheduler官网最近默默上线了kapa.ai作为LLM的问答AI。 集成kapa.ai之后&#xff0c;社区用户可以点击Apache DolphinScheduler官网首页右下角的「Ask AI」模块&#xff0c;在接下来弹出的问答框输入自己的问题&#xff0c;即可…

python uiautomator2 常用操作

uiautomator2 安装 python uiautomator2 安装及使用-CSDN博客 一&#xff0c; 通过包名可以打开app d.app_start(com.gacne.www) 打开app运行后执行代码&#xff0c;查看app具体信息获取包名 d.info二&#xff0c;执行等待点击 # 160秒内等待xpath定位的出现执行点击 d.xpat…

mysql中单表查询的成本

大家好。我们知道MySQL在执行一个查询时&#xff0c;经常会有多个执行方案&#xff0c;然后从中选取成本最低或者说代价最低的方案去真正的执行查询。今天我们来聊一聊单表查询的成本。 那么到底什么是成本呢&#xff1f;这里我们说的成本或者代价是由两方面组成的&#xff1a…

【踩坑】编译opencv将python (for build) python2.7改为python3

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你&#xff0c;欢迎[点赞、收藏、关注]哦~ 出现问题 默认是2.7 解决方案 cmake时候添加&#xff1a; -D PYTHON_DEFAULT_EXECUTABLE$(which python3)

02 Prometheus入门安装教程

02 Prometheus入门安装教程 大家好&#xff0c;我是秋意零。今天分享一篇入门级Prometheus安装教程。 环境准备 三台Linux虚拟机&#xff08;一台也可以&#xff09; 准备Prometheus、相关组件安装包 Prometheus官网下载安装包比较慢&#xff0c;如果没有魔法。可关注公众号…

【UnityUI程序框架】The PureMVC Framework核心你会用吗

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…

Python | Leetcode Python题解之第105题从前序与中序遍历序列构造二叉树

题目&#xff1a; 题解&#xff1a; class Solution:def buildTree(self, preorder: List[int], inorder: List[int]) -> TreeNode:if not preorder:return Noneroot TreeNode(preorder[0])stack [root]inorderIndex 0for i in range(1, len(preorder)):preorderVal pr…

计算机毕业设计python+spark天气预测 天气可视化 天气大数据 空气质量检测 空气质量分析 气象大数据 气象分析 大数据毕业设计 大数据毕设

摘 要 近些年大数据人工智能等技术发展迅速&#xff0c;我国工业正努力从“制造”迈向“智造”实现新跨越。神经网络(NeuronNetwork)是一种计算模型&#xff0c;通过大量数据的学习&#xff0c;来发现数据之间的模式和规律&#xff0c;模仿人脑神经元的工作方式。随着算力的提…