欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ES6语法-解构赋值

程序员文章站 2022-07-16 22:12:13
...

ES6语法 解构赋值

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

1.数组的解构赋值

// 传统的赋值
let a = 1, 
    b = 2,
    c = 3;

//  解构赋值
let [a,b,c] = [1,2,3];

这种方式叫模式匹配的解构方式,只要等号两边的模式相同,左边的变量就会被赋右边对应的值,下面是数组嵌套的解构。

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

let [,,c] = [1,2,3];
c //3  忽略前面不感兴趣的值

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

解构赋值也允许设定默认值,但是ES6 内部使用严格相等运算符(===),判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined,默认值才会生效

let [a=1,b=2,c=a] = ['one',null];
a // one
b // null
c // one

上述代码左边的变量设置了默认值,但此时的a在右边是可以取到值 ’ one’的,所以a的默认值并不生效,b在右边的值是null,在javascript中null和undefined是不严格等的,所以b设置的默认值也不生效,而c在右边对应的值没有,也就是undefined,所以此时c取到了默认值 a,也就是’one’。

当右边不是数组时,将会报错

let [a] = 1; 
let [a] = undefined; 
let [a] = 'abc'; 
let [a] = {}; 
...

2. 对象的解构赋值

与数组的赋值方式不一样,对象没有顺序之分,变量名和属性名相同时才能取到值。

let {a,b} = {b:1,a:2};
a //2
b //1

在对象赋值中,真正被赋值的是属性名后面的变量,而不是前者,如以下。

let {a:x, b:y} = {a:1,b:2};
x //1
y //2
a // error:a is not defined

对象解构也可以嵌套。

let person={
	name:{
		firstName:'xiao',
		lastName:'ming'
	},
	age:10,
	sex:'male',
	friends:{
		xiaofang:{
			age:12
		},
		xiaogang:{
			sex:'male'
		}
	}
};
let {name,friends:{xiaofang:{age}},friends:{xiaogang}} = person;
name // {firstName: "xiao", lastName: "ming"}
age // 12
xiaogang //{sex: "male"}

注意,若提前声明了变量,赋值时需要用小括号括起来,否则会报错。

let a;
{a} = {a:};  
a  // 报错

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

3. 字符串的解构赋值

字符串被看做是一个类似数组的对象进行解构,同时,这个对象有length属性,所以可以获取到此对象的length。

let [a,b,c,d] = 'word';
a // w
b // o
c // r
d // d

let {length:len} = 'word';
len // 4

4.函数参数的解构赋值

函数参数的解构赋值看起来像传入了一个数组,而在函数内部解析的时候,就把数组解析成了对应的参数。如下代码:

function add([a,b]){
	return a+b;
}
add([1,2]);  // 3

同时参数也可以设置默认值

function add({a=1,b=1}){
	return a+b;
}
add({a:2,b:3}); //5