【系统学习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 语言中特别重 ...
随机推荐
- [BUUCTF]PWN——pwnable_orw
pwnable_orw 附件 步骤: 例行检查,32位程序,开启了canary 本地运行一下程序,看看大概的情况,提示我们输入shellcode 32位ida载入,检索字符串,没看见什么可以直接利用的 ...
- springboot学习(一)
最近想学习springboot所以在网上找了很多文章参考怎么构建springboot项目以及集成mybatis 集成mybatis的部分参考了这两篇文章 https://blog.csdn.net/t ...
- Blazor Webassembly多标签页实现非iframe的实现
前面用iframe实现了多标签页,这次是不用iframe实现的多标签页.参考了一下Ant Design Blazor. 基本功能已经都实现了不论是标签滚动.激活.左移.右移.关闭其他,还是在内容页跳转 ...
- LuoguP3880 [JLOI2008]提示问题 题解
Content 由于题目要求是在太过复杂,请见原题面查看. Solution 这题明显是一个大模拟,那么废话少说,我们开始吧. 首先就是要找到所有的字母,比如说样例,其中底下加了^ 号的就是所有字母的 ...
- 查看服务backlog大小 Send-Q
ss -ntl 如下图 LISTEN 状态: Recv-Q 表示的当前等待服务端调用 accept 完成三次握手的 listen backlog 数值,也就是说,当客户端通过 con ...
- SpringBoot项目使用Nacos作为配置中心
前置条件:jdk.SpringBoot项目.Nacos.Linux服务器(可无) 具体版本:jdk11.SpringBoot 2.3.5.RELEASE.Nacos 2.0.3.Centos 6 目标 ...
- 【LeetCode】242. Valid Anagram 解题报告(Java & Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 字典统计词频 排序 日期 [LeetCode] 题目地址:ht ...
- 【LeetCode】567. Permutation in String 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址:https://leetcode.com/problems/permutati ...
- 【LeetCode】89. Gray Code 解题报告(Python & C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...
- A. Points on Line
A. Points on Line time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...