ES6入门教程之变量的解构赋值详解


Posted in Javascript onApril 13, 2019

前言

我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段。在ES6中添加了可以简化这种任务的新特性:解构。解构是一种打破数据结构,将其拆分为更小部分的过程。本文将详细介绍ES6解构赋值,下面话不多说了,来一起看看详细的介绍吧

数组的解构赋值

基本用法

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为结构。

在ES6之前想要为变量赋值,只能指定其值,如下:

let a = 1;
let b = 2

而在ES6中可以写成这样,如下:

let [a,b] = [1,2]
// a = 1, b = 2

值得注意的是,等式两边的值要对等,这样左边的变量才会被赋上右边对应的值,如果不对等左边的值将会出现undefined,如下写法:

let [foo,[[bar],baz]] = [1,[[2],3]]
foo // 1
bar // 2
baz // 3

 

注意:只有左右两边的 格式一定要对等,数量可以不对等。

let [a,b,c] = [1,2]
a = 1, b = 2, c = undefined

let [a,,c] = [1,2,3]
a = 1, c = 3

let [a, ...b] = [1,2,3]
a = 1, b = [2,3]

let [a] = []
let [b,a] = [1]
a = undefined

还有一种情况,等号左边为数组,但是等号右边为其他值,将会报错。如下:

let [a] = 1;
let [a] = false;
let [a] = NaN;
let [a] = undefined;
let [a] = null;
let [a] = {};

以上都会报错

但是如果左边为数组,右边为字符串,将会取字符串的第一个下标的值

let [a] = '121321' a = '1'
let [a] = 'adgasg' a = 'a'

对于Set结构,同样可以使用数组的解构赋值。

let [x,y,z] = new Set([1,2,3])
x = 1, y = 2, z = 3

默认值

解构赋值允许指定默认值

let [a = 3] = [] // a:3
let [a = 3,b] = [,4] // a:3 b:4
let [a = 3,b] = [5,4] // a:5 b:4

特殊

let [a = 3] = [undefined] // a:3
let [a = 3] = [null] // a:null

Tips: 在es6中使用严格相等运算符,在结构赋值中如果需要默认值生效,则应对等的值为undefined的时候才会采用默认值,否则还是使用赋值。上面中null 不严格等于undefined++

如果默认值的赋值为一个表达式,只有当等号右边的赋值没有值为undefined的时候,才会取表达式中的值,如下:

function demo(){
 console.log('demo')
}

let [a = demo()] = [] // a: demo
let [a = demo()] = [1] // a : 1

对象的解构赋值

与数组的不同点是,数组的元素必须和赋值的元素要位置一致才能正确的赋值,而对象的解构赋值则是等号两边的变量和属性同名即可取到正确的值。否则值为 undefined

let {a,b} = {a:'23',b:'3'}
let {a,b} = {b:'3',a:'23'}

// 上面两个的值 都是 a: 23 b: 3

let {a,b} = {a:'3',c:'d'}
//a: 3 b: undefined

对象的解构赋值还有将某一个现有对象的方法赋值到一个新的变量,如下:

let {sin,cos} = Math
// Math 中的sin cos 方法将赋值给变量 sin cos

let {log} = console
// log(2) === console.log(2)

如果等号左边的变量名不能和等号右边的对象的属性名一致,则必须写成如下格式:

let {a:b} = {a:'ss'} // b:ss
//a是属性名,b才是实际赋值的变量名

对象的解构赋值一样是可以嵌套解构的,如下:

第一种:

let obj = {
	p:[
		'Hello',
 {y:'world'}
	]
}

let {p:[x,{y}]} = obj 
// x: Hello, y: world

这边的p只是属性不是变量,如果p想赋值可以写成:

let {p,:[x,{y}]} = obj

第二种:
const a = {
	loc: {
		t :1,
		b :{
			c:1,
			d:2	
		}
	}
}
let {loc:{t,b:{c,d}}} = a
或者
let {loc,loc:{t,b,b:{c,d}}} = a

嵌套赋值

let o = {}, arr = []

({foo:o.prop,bar: arr[0]} = {foo:123,bar:true})
//o: 123, arr = [true]

如果解构模式 是嵌套的对象,如果子对象所在的父属性不存在,则会报错,如下:

let {foo:{bar}} = {baz:'baz'} //报错

默认值

let {x = 3} = {}
// x: 3

let {x,y = 5} = {x : 1}
// x: 1, y: 5

let {x: y = 5} = {}
// y = 5

let {x: y = 5} = {x : 4}
// y = 4

let {x: y = 'hhhh'} = {}
//y = 'hhhh'

Tips:以上左边 x为属性名,y为变量


let {x = 5} = {x: undefined}
// x: 5

let {x = 4} = {x: null}
// x: null

同数组一样遵循 严格等于 
只有右边为undefined的时候默认值才会生效

注意点:

1)不能将已声明的变量用于解构赋值,因为已经是一个代码块。

字符串的解构赋值

如果赋值的对象是数组,字符串将被分割为数组的格式,一一对应赋值

let [a,b] = 'ha'
// a = h , b = a

同时可以获得字符串的长度:

let {length:len} = '12121'
// len = 5

数值和布尔值的解构赋值

如果等号右边是数字或者布尔值 则转换成对象或者说,除了是数组和对象,其他值都将转换成对象,null 和 undefined 除外。如下:

let {t:s} = 123
let {t: s} = true

函数参数的解构赋值

function add([x,y]){
 return x+y
}
add([3,5]) // 8

[[3,5],[6,7]].map(([a,b]) => a + b)
//8 , 13

function m({x=3, y=4} = {}){
 return [x,y]
}
m({x:33,y:8})  // [33,8]
m({x:32})   // [32,4]
m({})    // [3,4]
m()    // [3,4]

function m({x,y} = {x=0,y=0}){
 return [x,y]
}
m({x:33,y:8})  // [33,8]
// 代替右边的 x:0, y:0 所以是传值 33 8

m({x:32})   // [32,undefined]
//因为传值替代右边的赋值,但是只有x没有y
//所以y是取 左边y的默认值,因为你没有赋值 为undefined

m({})    // [undefined,undefined] 
// 取左边x,y的默认值,因为没有赋值 为undefined

m()    // [0,0]
// 没有传值,使用本身的赋值 都是0

其他

不能使用圆括号的情况

  • 变量声明语句
  • 函数参数
  • 赋值语句的模式

可以使用圆括号的情况

  • 赋值语句的非模式部分,可以使用圆括号

解构赋值的用途

  • 交换变量的值
  • 从函数返回多个值
  • 函数参数的定义
  • 提取JOSN数据
  • 函数参数的默认值
  • 遍历Map结构
  • 输入模块的指定方法

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
用JQuery 实现的自定义对话框
Mar 24 Javascript
Javascript下判断是否为闰年的Datetime包
Oct 26 Javascript
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
js判断客户端是iOS还是Android等移动终端的方法
Dec 11 Javascript
javascript图片预加载实例分析
Jul 16 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
修改js confirm alert 提示框文字的简单实例
Jun 10 Javascript
jQuery Ajax File Upload实例源码
Dec 12 Javascript
用Node提供静态文件服务的方法
Jul 06 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 Javascript
vue实现购物车的监听
Apr 20 Javascript
微信小程序template模版的使用方法
Apr 13 #Javascript
vue基于viewer实现的图片查看器功能
Apr 12 #Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 #Javascript
详解js创建对象的几种方法及继承
Apr 12 #Javascript
详解JQuery基础动画操作
Apr 12 #jQuery
React中阻止事件冒泡的问题详析
Apr 12 #Javascript
TypeScript中的方法重载详解
Apr 12 #Javascript
You might like
PHP与javascript实现变量交互的示例代码
2013/07/23 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
php使用curl获取https请求的方法
2015/02/11 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
2014/12/08 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
2020/07/24 Javascript
打开电脑上的QQ的python代码
2013/02/10 Python
浅谈Python中函数的参数传递
2016/06/21 Python
Python3读取Excel数据存入MySQL的方法
2018/05/04 Python
python使用numpy读取、保存txt数据的实例
2018/10/14 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
用canvas显示验证码的实现
2020/04/10 HTML / CSS
RealTek面试题
2016/06/28 面试题
毕业自我鉴定
2013/11/05 职场文书
村委会贫困证明范本
2014/09/17 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
2015年小学数学教研组工作总结
2015/05/21 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书
2019公司借款合同范本2篇!
2019/07/24 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书