【系统学习ES6】第二节:解构赋值
【系统学习ES6】
本专题旨在对ES6的常用技术点进行系统性梳理,帮助大家对其有更好的掌握,希望大家有所收获。
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。解构是一种打破数据结构,将其拆分为更小部分的过程。
为何使用解构
传统写法中,从数组或对象中提取特定数据赋值给变量,编写了很多结构相同,变量不同的代码,例如:
let option = {
name:'foo',
type:'string'
};
let name = option.name;
let type = option.type;
以上代码的作用是,从option对象中提取name和type两个属性,赋值给变量name和type。此时只有两个变量,想象一下,如果有更多变量,那就要依次追加多句赋值。如果其中包含嵌套结构,那就要深入读取层级,才能找到目标变量。
也许是为了解决这种困扰,所以ES6为对象和数组添加了解构功能,在合适的场景下运用,大大减少代码量,提高工作效率。
解构成功的前提,是左右两侧类型一致,即:如果是对象解构,左侧被赋值变量必须包装在{ }内,同理,数组解构,左侧必须是[ ]。
对象解构
上文强调过:对象的解构,左侧必须是{ }。只要左侧的变量在右侧对象中有,即使位置不同,也可被成功赋值,但如果变量在右侧没有与之对应的属性,则会被赋值为undefined。
let option = { name:'foo', type:'string' };
let { name, type } = option;
// let { type, name } = option; // 此句与上句效果相同
console.log(name); // 'foo'
console.log(type); // 'string' let { age } = option;
console.log(age); // undefined let { name } = option;
console.log(name); // 'foo'
注意:对象解构前,必须提供初始值(即右侧的对象)。如果右侧没有值,程序会抛异常。
let { name }; // Uncaught SyntaxError:
为非同名变量赋值
如果变量名与对象属性名不一致,可以通过解构对变量赋值么?ES6的另一个拓展语法可以帮助我们。
let option = { name:'foo', type:'string' };
let { name: attrName, type: attrType} = option;
console.log(attrName); // 'foo'
console.log(attrType); // 'string'
这实际上说明,对象的解构赋值是下面形式的简写:
let { name: attrName, type: attrType} = { name:'foo', type:'string' };
也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。
嵌套赋值
可以单层解构赋值,就支持嵌套赋值。前提是左右两边形式一致。
let option = {
name: 'foo',
type: 'string',
start: { row: 1, col: 0 }
};
let { start: { row } } = option;
console.log(row); // 1
数组解构
数组的解构与对象有一个重要的不同。对象的解构按属性名决定的,左右两侧变量位置可以不一致,但变量必须与属性同名,才能取到正确的值。
数组的元素是按顺序排列的,变量的取值由它的位置决定。只要等号两边类型相同(都是数组格式),左侧变量会按照位置关系,被赋予右侧数组的同的值。在这个过程中,右侧数组本身不会发生变化。
let [name, type] = ['foo','string'];
console.log(name); // 'foo'
console.log(type); // 'string'
嵌套赋值
let [a, [b, c] = [1, [2, 3]];
console.log(name); // 1
console.log(type); // 2
console.log(height); // 3
如果左右形式不一致,可能会直接报错:
let [a] = 1; // Uncaught TypeError: 1 is not iterable
如果右侧数组元素数量比左侧变量多,可以解构成功。属于不完全匹配。
let [a, b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
如果右侧数组元素数量比左侧变量少,这种情况属于解构失败,解构失败的变量会被赋值为undefined。
let [a, b] = [1];
console.log(a); // 1
console.log(b); // undefined let [a, b, ...c] = [1];
console.log(a); // 1
console.log(b); // undefined
console.log(b); // []
此时,b是undefined理解,那c为什么是数组?这不是解构的锅,相关知识点,后面会讨论到。
默认值设置
不管是数组还是对象,解构赋值都允许指定默认值。只有当右侧相应属性或位置的值全等(===)undefined,默认值才会生效。
数组:
let [a = 1] = []; // a=1
let [a, b = 2] = [1]; // a=1, b=2
let [a, b = 2] = [1, undefined]; // a=1, b=2
let [a, b = 2] = [1, null]; // a=1, b=null
let [a, b = 2] = [1, ""]; // a=1, b=""
对象:
let { name, type = 'string' } = { name: 'foo'};
// name:'foo' type:'string'
let { name, type = 'string' } = { name: 'foo', type: undefined};
// name:'foo' type:'string'
let { name, type = 'string' } = { name: 'foo', type: null};
// name:'foo' type:'null'
let { name, type = 'string' } = { name: 'foo', type: ''};
// name:'foo' type:''
圆括号的妙用
(1)如果要将一个已经声明的变量用于解构赋值,要注意一下写法。
let name = 'bar';
{ name } = { name: 'foo' };
console.log(name); // SyntaxError: syntax error
上面代码会报错,因为 JavaScript 引擎会将{name}理解成一个代码块,从而发生语法错误。只有不将大括号写在行首,才能解决这个问题。于是圆括号来了。数组同理。
let name = 'bar';
({ name } = { name: 'foo' });
console.log(name); // 'foo'
字符串解构
字符串也可以解构,这是因为,此时字符串被转换成了一个类似数组的对象。
const [a,b,c,d,e]="lemoncool";
console.log(a); // l
console.log(b); // e
console.log(c); // m
console.log(d); // 0
console.log(e); // n
.....
混合解构
讨论完对象和数组的解构,其实可以基于二者来创造更复杂的表达式解构。比如json中,数组和对象混杂,此时想解析到某个信息。是否可以实现呢?答案是肯定的,前提是格式要对应正确,篇幅有限,此处不再举例。
解构实用场景
解构,除了基础的变量赋值外,用途还有很多。
1、交换变量的值
let x = 1;
let y = 2;
[x, y] = [y, x];
上面代码交换变量x和y的值,这样的写法不仅简洁,而且易读,语义非常清晰。
2、返回多个值
函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
3.引入脚手架中的指定方法
脚手架不想整体引入,可以指定引入某些方法。
import { cloneDeep, random } from 'lodash';
到此,变量解构的使用方法及注意事项已梳理完毕。
下一节我们会一起讨论【拓展运算符和res运算符】,感谢大家支持,希望大家在每一节中都有所得。
公棕号【前端便利贴】记录着一个程序媛的所见所得所想,分享日常技术笔记,内容覆盖了阅读、技术和个人思考~,关注公棕号更早获取更多文章。
觉得有用的话,小手点点【推荐】再走吖~~
【系统学习ES6】第二节:解构赋值的更多相关文章
- ES6学习之变量的解构赋值
前言:什么是ES6?ECMAScript 6(简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.其中相比较于ES5新增了诸多的特性,并且ES6可转换为ES5的语法.- ...
- es6变量的解构赋值学习笔记
1. 解构赋值的规则是,只要等号右边的值不是对象,就先将其转为对象.由于undefined和null无法转为对象,所以对它们进行解构赋值,都会报错. let { prop: x } = undefin ...
- ES6 学习笔记 - 变量的解构赋值
变量的解构赋值 学习资料:ECMAScript 6 入门 数组的解构赋值 基本用法 可以从数组中提取值,按照对应位置,对变量赋值.这种写法属于"模式匹配". let [a, b, ...
- JavaScript学习笔记 -- ES6学习(三) 变量的解构赋值
1.解构赋值的定义 在ES6中,允许按照一定模式,从数组和对象中提取值(所谓解构),然后对变量进行赋值. var a = 1; var b = 2; var c = 3; //等价于 var [a, ...
- ES6 - 变量的解构赋值学习笔记
变量的解析赋值 数组的解析赋值 es6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这就称为解构. var a = 1; var b = 2; var c = 3; //在es6中允许写成 ...
- ES6学习历程(变量的解构赋值)
一.数组的解构赋值 1.举几个例子足以理解 let [a, b, c] = [1, 2, 3]; a:1; b:2; c:3; let [x, , y] = [1, 2, 3]; x:1 y ...
- ES6学习4 变量的解构赋值
变量的解构赋值 一.数组结构赋值 1.数组结构赋值 let [a, b, c] = [1, 2, 3]; ES6 可以从数组中提取值,按照对应位置,对变量赋值. 1) 本质上,这种写法属于“模式匹配 ...
- ES6 - 基础学习(3): 变量的解构赋值
解构赋值概述 1.解构赋值是对赋值运算符的扩展. 2.它是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值. 3.代码书写上显得简洁且易读,语义更加清晰明了:而且还方便获取复杂对象中的数据字 ...
- ES6里的解构赋值
我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段.在ES6中添加了可以简化这种任务的新特性:解构.解构是一种打破数据结构,将其拆分为更小部分的过程. 一.引入背景 在ES5中,开发者们为 ...
- 【JS】325- 深度理解ES6中的解构赋值
点击上方"前端自习课"关注,学习起来~ 对象和数组时 Javascript 中最常用的两种数据结构,由于 JSON 数据格式的普及,二者已经成为 Javascript 语言中特别重 ...
随机推荐
- 控制 Python 类的序列化过程
问题 有的类是不支持在多进程间传递的,如果非要这么做,可能会引发奇怪的现象.比如下面这段代码: from concurrent.futures import ProcessPoolExecutor, ...
- [BUUCTF]PWN——inndy_rop
inndy_rop 附件 步骤: 例行检查,32位,开启了nx保护 本地调试运行没看出个啥,直接上ida,一开始f5会报错, 找到报错提示的位置,点击option–>general调出如图的界面 ...
- software engineer's resume(帮助你写程序员简历)
关键词 参考 简历模板 参考 下面开始是正文(关键词原文) 介绍 本项目由海外兔 (https://osjobs.net) 维护,海外兔团队由一线互联网面试官组成,提供海内外公司一对一入职套餐以及算法 ...
- 【LeetCode】376. Wiggle Subsequence 解题报告(Python)
[LeetCode]376. Wiggle Subsequence 解题报告(Python) 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.c ...
- 【LeetCode】456. 132 Pattern 解题报告(Python)
[LeetCode]456. 132 Pattern 解题报告(Python) 标签(空格分隔): LeetCode 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fu ...
- 【LeetCode】106. Construct Binary Tree from Inorder and Postorder Traversal 解题报告
[LeetCode]106. Construct Binary Tree from Inorder and Postorder Traversal 解题报告(Python) 标签: LeetCode ...
- 【LeetCode】622. Design Circular Queue 解题报告(Python & C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 用直的代替弯的 数组循环利用 日期 题目地址:htt ...
- TKE用户故事 | 作业帮检索服务基于Fluid的计算存储分离实践
作者 吕亚霖,2019年加入作业帮,作业帮基础架构-架构研发团队负责人,在作业帮期间主导了云原生架构演进.推动实施容器化改造.服务治理.GO微服务框架.DevOps的落地实践. 张浩然,2019年加入 ...
- 第九个知识点:香农(Shannon)定义的熵和信息是什么?
第九个知识点:香农(Shannon)定义的熵和信息是什么 这是计算机理论的最后一篇.我们讨论信息理论的基础概念,什么是香农定义的熵和信息. 信息论在1948年被Claude E.Shannon建立.信 ...
- Capstone CS5268DEMOBOARD原理图|TYPEC转HDMI+VGA+PD3.0+USB3.0扩展坞方案
Capstone CS5268DEMOBOARD原理图|TYPEC转HDMI+VGA+PD3.0+USB3.0四合一设计参考 CS5268 是typec转HDMI+VGA+pd3.0+U3四合一拓展坞 ...