es6-变量解构赋值

参考以下博客,建议查看原博客,它更为详细;
ES6 阮一峰

什么是解构:
ES6允许按照一定的模式,可以从数组和对象中提取值,对变量进行赋值,这被成为解构;

let [a,b,c] = [1,2,3]
 console.log([a,b,c])//[1,2,3]

如上从数组[1,2,3]提取值,按照对应的位置,对左边的三个变量进行赋值;

如果解构不成功,变量的值就为undefined;

let [a] = [];//undefined
let [x,y] = [1]//undefined

上面的解构都没有成功;右边的模式和左边没办法模式匹配;

不完全解构

let [a,b] = [,1];//b=1
let [x,y,d]= [1,[2,3],4];//x=1,y=2,d=4;

上面的右边的模式只匹配了左边的部分模式,但是也解构赋值成功;

## 对象解构 ##
对象解构与数组的区别:
对象是按照属性名来进行解构赋值,而数组则是按照次序进行解构赋值;

let {xyd:b} = {xyd:1}
console.log(b)//1

另一个例子:

let {fo:b} = {f:1}
console.log(b)//undefined

上面代码解构失败,所以b=undefined;
fo没有在等号右边找到相同的属性名fo;

对象解构赋值,赋值的是相同属性名后的变量,而不是属性名;属性名只是一个匹配模式;

let {fo:a} = {fo:1}
console.log(a)//1  
console.log(fo)//Uncaught ReferenceError: fo is not defined

上面的代码中正在的赋值的属性名后的变量,而不是属性名本身;

对象的解构指定默认值;生效条件是,对象的属性值必须严格(===)等会undefiend

let {a=1} = {}//a =1;

let {b=1} = {b:null}//b=null

上面的代码中属性b的值等于Null,所以属性b默认值不生效;

r如果要将一个已经声明的变量,进行解构赋值,必须要注意;要在大括号前,加上(),否则js解析器会把{}理解为代码块,要避免大括号在行首,这样js解析器才不会把{}理解为代码块;

let a;
({a=1} = {a:2})//a = 2

数组本身是一个特殊的对象,所以也可以用于对象解构

var a = [1,2,3]
let {0:fist,[a.length-1]:last} = [1,2,3];
fist//1
last//3

数组a的0键值为1;
a.length-1就是2;数组a的2键对应的值是3;

用途

交换变量的值

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

从函数返回多个值;

let a = () => {return [1,2,3]};
let [x,y,d] = a();
[x,y,d]//[1,2,3]

提取JSON数据;

let jsons = {
    name:'xyd',
    id:123,
    starts:'ok'
}
 let {name,id,starts} = jsons;
 console.log(name,id,starts)//xyd,123,ok
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值