深入ES6数组解构

原创 已于 2022-09-13 11:07:32 修改 · 342 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
于 2022-09-09 12:21:45 首次发布
本文探讨了ES6中数组解构的原理，从一道面试题出发，解释了为何解构失败并提出了可迭代协议的概念。通过在对象原型上添加Symbol.iterator方法，使非数组对象变得可迭代，从而实现数组解构。这一过程揭示了解构赋值背后对于可迭代协议的依赖。

es6引入了数组解构，那么数组解构底层的原理是什么呢？
下面来看一道题。
一道面试题的思考：让下面代码成立

// 让下面的代码成立
var [a, b] = { a: 1, b: 2 };

直接控制台打印会报错
在这里插入图片描述
让我们从错误出发，报错信息代表右边对象是不可迭代的。
于是，想到了可迭代协议

{
	[Symbol.iterator]: function () {
		return 迭代器
	}
}

数组都会有可迭代属性，并且可以通过迭代器访问元素
在这里插入图片描述
于是乎，该题等式左边数组方式解构需要满足右边也可迭代，但不一定是数组。
于是可以在右边对象的原型上做操作

Object.prototype[Symbol.iterator] = function () {
	return Object.values(this)[Symbol.iterator]()
}

于是等式就不会报错了
在这里插入图片描述

标签
#es6 #前端 #ecmascript
Avalonia 项目结构说明
bjxingch的博客
09-30 1247
Avalonia UI
双内核架构 Xenomai 4 安装教程
^_^
12-14 4394
双内核 Xenomai 4 安装指南
ES6中的扩展运算符
JINGinC的博客
10-28 3622
ES6的扩展运算符，它的语法很简单，使用三个点号表示“...”。可以将一个数组转为用逗号分隔的参数序列。 它将可迭代对象展开到其单独的元素中，所谓的可迭代对象就是任何能用for of 循环进行遍历的对象，例如：数组、字符串、Map、Set、DOM节点等。 目录 基础语法 该运算符主要用于函数调用 扩展运算符后面还可以放置表达式 一、替代数组的 apply 方法 使用 Math.max() 函数来获取最大值的用法是： 使用...
机床上位机实战：CNC设备数据采集+工艺参数存储全流程（附C#代码+SQL设计）
最新发布
这里只有干货：从 Modbus 通信到 MES 对接，从 YOLO 训练到工控机部署，带你搞定工业软件开发全流程。
11-30 740
如果能正常输出转速和状态，说明通信通了——这步是基础，没通的话别往下走，先查CNC的IP对不对、Modbus功能有没有开、地址是不是错了（我当初卡了2小时，发现是Fanuc的Modbus从站地址设成了2，不是默认1）。这篇文章就把整个开发过程拆透：从CNC通信协议选型，到数据采集代码落地，再到工艺参数的数据库设计，连中间踩过的“Fanuc系统寄存器地址对应错”“断连后数据补传”这些坑都给大家说清楚，新手跟着做也能跑通。工艺参数要跟“工单”和“设备”绑定，不然查的时候不知道是哪个工单、哪台设备的参数。
map的时间复杂度_JavaScript ES6—Map的妙用
weixin_29374181的博客
01-30 5287
多重嵌套 for 循环太丑，运行效率又低，有没有什么办法可以降低它的嵌套层数？游戏内怎么简洁优雅的获取我想要的数据，又有良好的智能提示效果？有没有通用的提高运行效率的方案？没错，ES6 的 Map 就是为你定制的。先看一个简单的例子，数组去重：let myArray = [1, 2, 3, 4, 5, 2, 1];function getArray(array) {let newArra...
es6中数组的解构_ES6中的数组解构简介
cumi6497的博客
07-31 3557
es6中数组的解构by Kevwe Ochuko 通过Kevwe Ochuko Destructuring in JavaScript is a simplified method of extracting multiple properties from an array by taking the structure and deconstructing it down into its ...
ES6 解构数组
qq_34579060的博客
06-21 1741
// 在设计Javascript时,很明显遗漏了数组复制功能。而在ES5中，开发者使用concat()来克隆数组 var colors = ["red", "blue", "pink"]; var cloneColors = colors.concat(); console.log(cloneColors); // ["red", "blue",...
es6-对象解构、数组解构、参数解构
weixin_45048106的博客
01-31 988
什么是解构 使用ES6的一种语法规则，将一个对象或数组的某个属性提取到某个变量中 对象的解构 数组的解构
ES6之数组解构
m0_37607945的博客
11-04 561
对象和数组字面量是JavaScript中两种最常用的数据结构，由于JSON数据格式的普及，二者已经成为语言中最重要的一部分。在代码中，我们经常定义很多对象和数组，然后从去提取相关的信息片段，ES6为简化这种任务引入了新特性：解构
ES6对象数组的解构
吃瓜群众的博客
04-11 1364
es6对象与数组的解耦及常用属性 //对象解构 let myinfo = {name: 'zxj', age: 12, child: {firstChild: '小明'}}; let {name, age, child: {firstChild: xiaoming} = myinfo; // 数组解构 let arr...
ES6——对象解构和数组解构
此去经年的博客
07-10 379
为何使用解构功能 在ES5及早期版本中，开发者们为了从对象和数组中获取特定数据并赋值给变量，编写了许多看起来同质化的代码，如下： let options = { repeat:true, save:false};//从对象中取数据let repeat = options.repeat, save = options.save; 这段代码从options对象中...
ES6 嵌套数组进行解构
梓鸿
04-09 954
ES6 嵌套数组进行解构 let [foo, [[bar], baz]] = [1, [[2], 3]]; foo // 1 bar // 2 baz // 3 let [ , , third] = ["foo", "bar", "baz"]; third // "baz" let [x, , y] = [1, 2, 3];...
ES6中数组的解构语法
L_jin_c的博客
08-31 1067
一、数组完全解构 let arr = [10, 20, 30]; // 一次性获取数组的元素--完全解构比较方便 let [a, b, c] = arr; console.log(a, b, c); //10 20 30 二、数组部分解构 以下代码使用英文的逗号’,'其实只是一个占位的作用，这里只会解构数组的第三个位置的数据出来。 let arr = [10, 20, 30]; // 如果想要获取数组中的某个元素，直接通过数组下标获取 // console.log(arr[2]); /
ES6 对象解构 数组解构 参数解构
function_zzc的博客
03-17 603
对象的解构 什么是解构 使用ES6的一种语法规则，将一个对象或数组的某个属性提取到某个变量中 解构不会对被解构的目标造成任何影响 const user = { name: 'abc', age: '14', sex: '男', address: { province: '河北', city: '沧州' } } //当我们需要调用其中的属性的时候 let ...
ES6 数组的解构赋值
cake_eat的博客
10-04 1015
数组的解构赋值 基本用法 ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。 以前，为变量赋值，只能直接指定值。 var a = 1; var b = 2; var c = 3; ES6允许写成下面这样。 var [a, b, c] = [1, 2, 3]; 上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。 本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。 let
ES6-数组解构
weixin_45868552的博客
12-29 1131
一、基本用法 1、完全匹配，完全解构 let [a,b,c] = [1,2,3]; //a = 1; b = 2; c= 3 let [a,[b,c],d] = [1,[2,3],4]; //a=1; b=2; c=3; d=4 let [head,...tail] = [1,2,3,4,5]; //head = 1; tail = [2,3,4,5]; let [a,,c] = [1,2,3]; //a=1;c=3; let [a,b,...z] = [1]; //a=1; //b = undef
ES6中数组 对象 的解构赋值
killbee365的博客
04-16 860
ES6中数组 对象 的解构赋值 一、对象的结构 举个例子： ``` var obj = { name: 'hanhan', age: 38, sex: '中性', info: { height: '170', weight: 130, ...
ES6:数组解构
weixin_43856797的博客
01-14 560
当获取数组元素时，会通过索引获取： const users = ['Tom', 'Jarry', 'Mario']; const user1 = users[0]; //Tom const user2 = users[1]; //Jarry const user3 = users[2]; //Mario es6中通过数组解构可以这么改写： const users = ['Tom', 'Jarr...
《深入理解ES6》——对象解构和数组解构
杜小白的博客
10-06 9848
为何使用解构功能     在ES5及早期版本中，开发者们为了从对象和数组中获取特定数据并赋值给变量，编写了许多看起来同质化的代码，如下： let options = { repeat:true, save:false }; //从对象中取数据 let repeat = options.repeat, save = options.save;    这段代码从opti...
ES6 几种常用解构 对象解构、数组解构、嵌套对象解构
peter的博客
07-08 1779
1.对象解构 let node = { name: '小红', age: 18 } let {name,age} = node; console.log(name); //小红 console.log(age); //18 2.数组解构 let colors = ['red','blue','green'] let [item,value] = colors; console.log(item); //red console.log(value); //blue 3.
ES6数组 解构
weixin_46083556的博客
06-28 223
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构 变量赋值 let a = 1; let b = 1; let c = 1; = let [a,b,c] = [1,1,1] //es6
es6-对象和数组解构
Spearmint_的博客
10-08 860
我们经常需要在对象和数组内提取相关的数据，往往我们需要遍历才能完成。而在es6添加了简化这种任务的新特性：解构。解构是一种打破数据解构，将其拆分成更小部分的过程。 对象解构 基本用法: let node = { type: 'Identifier', name: 'foo' }; let { type, name } = node; console.log(type, name...
使用matlab语言对信号进行频谱分析识别多种乐器（内含素材）
通过fft快速傅里叶变换时域变换到频域，然后通过对频域特征进行分析，确定乐器。这是我大二时候的课程项目
ISO9001：2015质量管理体系要求.pdf
ISO9001：2015质量管理体系要求.pdf
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值