ES6入门——变量的解构赋值
1、数组的解构赋值
以前为变量复制,只能直接指定值。现在ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。

本质上,这种写法属于模式匹配,只要等号两边的模式相同,左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子

如果解构不成功,变量的值就等于undefined。另一种情况是不完全解构,即等号左边的模式,只匹配一部分的等号右边的数组,这种情况下,解构依然可以成功。
对于Set结构,也可以使用数组的解构赋值。

解构赋值允许指定默认值

ES6内部使用严格相等运算符“===”,判断一个位置是否有值。所以,如果一个数组成员不严格等于undefined,默认值是不会生效的。

如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候,才会求值。

2、对象的解构赋值
解构不仅可以用于数组,还可以用于对象。对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定,而对象的属性没有次序,变量必须与属性同名才能去到正确的值。

如果变量名与属性名不一致,必须写成下面这样

这实际上说明了,对象的解构赋值是上面形式的简写。也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量,真正被赋值的是后者,而不是前者。
如果解构模式是嵌套的对象,而且子对象所在的父属性不存在,那么将会报错

对象的解构赋值,可以很方便地将现有对象的方法,赋值到某个变量。

由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构。

3、字符串的解构赋值
字符串可以被转换成一个类似数组的对象。并且类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值。

4、数值和布尔值的解构赋值
解构赋值的规则是,只要等号左边的值不是对象或数组,就先将其转为对象。由于undefined和null无法转为对象,所以对它们进行解构赋值都会报错。如果等号右边是数值和布尔值,则会先转为对象。

5、函数参数的解构赋值
函数的参数也可以使用解构赋值

6、圆括号问题
解构赋值虽然看起来很方便,但是解析起来并不容易。对于编译器来说,一个式子到底是模式还是表达式,没有办法从一开始就知道,必须解析到或解析不到等号才知道。由此带来的问题是如果模式中出现圆括号怎么处理。ES6的规则是,只要有可能导致解构的歧义,就不得使用圆括号,但是这条规则实际上不那么容易辨别,处理起来相当麻烦,因此,建议只要有可能,就不要在模式中放置圆括号。
不能使用圆括号的情况:
1、变量声明语句中,不能带有圆括号;
2、函数参数也属于变量声明,不能带有圆括号;
3、赋值语句中,不能将整个模式或嵌套模式中的一层,放在圆括号之中。
可以使用圆括号的情况只有一种:赋值语句的非模式部分,可以使用圆括号。
7、解构赋值的用途
变换变量的值

从函数返回多个值,函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。

函数参数的定义,解构赋值可以方便地将一组参数与变量名对应起来。
提取JSON数据

函数参数的默认值
遍历Map结构,任何部署了Iterator接口的对象,都可以用for...of循环遍历。Map结构原生支持Iterator接口,配合变量的解构赋值,获取键名和键值就非常方便。

输入模块的指定方法,加载模块时,往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。

ES6入门——变量的解构赋值的更多相关文章
- es6之变量的解构赋值
es5中通常我们声明变量都是以下的方式: var a = 10; var b = 20; var c = 30; //或者 var a = 10,b = 20,c = 30; //或者 var arr ...
- es6分享——变量的解构赋值
变量的解构赋值:ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前的写法: var a = 1; var b = 2; es6允许的写法 ...
- ECMAScript 6入门 - 变量的解构赋值
定义 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 解构赋值不仅适用于var命令,也适用于let和const命令. 解构赋值的规则是,只要 ...
- ES6 继续 变量的解构赋值
春节放假这几天,感觉跟梦一样,瞬间就过去了.现在上班的前几天,都感觉有点不真实,不过看到口袋里的钱,就知道,是真真实实的度过了这个假期. 现在得开始重新工作了: 变量的解构赋值 ES6 允许按照一定模 ...
- ES6中变量的解构赋值
1.数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 输出: 上面代码表示,可以从数组中提取值,按照对应位置,对变 ...
- ES6 中变量的解构赋值
1. 数组的解构赋值 解构: ES6 中允许按照一定的模式从数组和对象中提取值,然后对变量进行赋值,这被称为解构(Destructuring). 1. 基本用法 本质上,这种写法属于"模式匹 ...
- es6系列-变量的解构赋值
git地址: https://github.com/rainnaZR/es6-study/tree/master/src/destructuring 变量的解构赋值 变量的解构赋值: 数组, 对象, ...
- es6入门2--对象解构赋值
解构赋值:ES6允许按照一定规则从数组或对象中提取值,并对变量进行赋值.说直白点,等号两边的结构相同,右边的值会赋给左边的变量. 一.数组的解构赋值: 1.基本用法 let [a, b, c] = [ ...
- ES6基础-变量的解构赋值
作者 | Jeskson 来源 | 达达前端小酒馆 解构赋值: 数组的解构赋值,对象的解构赋值,字符串的解构赋值,数值与布尔值的解构赋值,函数参数的解构赋值. 开发环境准备: 编辑器,VS Code, ...
随机推荐
- 洛谷 P5249 [LnOI2019]加特林轮盘赌 题解【概率期望】【DP】
很有意思的题目. 题目背景 加特林轮盘赌是一个养生游戏. 题目描述 与俄罗斯轮盘赌等手枪的赌博不同的是,加特林轮盘赌的赌具是加特林. 加特林轮盘赌的规则很简单:在加特林的部分弹夹中填充子弹.游戏的参加 ...
- V1-bug Alpha阶段测试报告
发现的Bug Bug现象 Bug原因 是否解决 访问到错误的视图 路由正则写的太过宽泛 是 主题太长时超过页面宽度,导致超过顶部的宽度 / 否 无法使用域名访问服务器 后端没有在配置文件的ALLOWE ...
- 分分钟钟学会Python - 数据类型(dict)
今日内容 字典(dict) 具体内容 1.字典含义 帮助用户去表示一个事物的信息(事物是有多个属性). 基本格式 data = {键:值,键:值,键:值,键:值,键:值,键:值,} # 练习题 use ...
- jQuery懒加载插件 – jquery.lazyload.js
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- Java生成树关系的菜单
1.菜单bean public class Menu { private String id; private String menuname; private String parentid; pr ...
- 面向对象程序设计(C++)_作业一_设计、定义并实现Complex类
源代码: 运行结果:
- 利用partial关键字声明分部类和分部方法
一.分部类 1.分部类的定义:简单的说,分部类就是把一个类拆分成多个类,每个类文件只包含其中的一部分,类.结构.接口.方法都可以拆分,在定义的时候加上partial修饰符. 注意:分部类必须属于同一命 ...
- react&webpack使用css、less && 安装原则 --- 从根本上解决问题。
在webpack-react项目中,css的使用对于不同人有不同的选择,早起是推荐在jsx文件中使用 css inline js的,但是这种方法要写很多对象来表示一个一个的标签,并且对于这些对象,我们 ...
- 深入理解子元素的width与父元素的width关系
深入理解父元素与子元素的width关系 对于这一部分内容,如果理解准确,可以更容易控制布局,节省不必要的代码,这里将简单研究. 第一部分:父子元素都是内联元素 代码演示如下: <!DOCTYPE ...
- ie8兼容总结
ie兼容总结 1.页面必须编写规范 doctype 必须申明,否则会让浏览器出现怪异模式呈现,我记得一次是页面没有写doctype,样式的继承也会有问题,明明body里面写了字体样式12px,页面ta ...