ES实用的深度解构赋值方法

  • ES6 中允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
  • 使用解构赋值可以将复杂的代码整理的更加干净整洁。

1.解构对象

在没有使用解构之前,想要确定对象中的某些属性,那么就需要从对象中获取属性然后赋值给变量,这样会让代码显得非常冗余,如下代码所示:

let obj = {name:"张三",age:22};
let name = obj.name;
let age = obj.age;
console.log(name,age);

// 张三 22

1)基本解构格式

如果使用解构的话,只需要如下面格式所写即可,保持将变量名和对象属性名同名才可取到值。

let {name,age} = {name:"张三",age:22};
console.log(name,age);

2)变量别名

如果要解构的对象中的属性名和外部的名称重名了,将会报错,可以使用别名的方式进行解构,如下所示:

let name="王五";
let {name:newName,age} = {name:"张三",age:22};
console.log(newName,age);

3)变量默认值

如果目标对象属性中没有要解构的属性,不指定默认值,那么将会undefined,此时可以给解构变量写默认值,如下所示:

let {name,age,gender="男"} = {name:"张三",age:22};
console.log(name,age,gender);

此种为变量设置默认值的方法,常应用于函数参数中,加入调用函数时没传递参数,有可能会对函数运行造成错误,那就可以在形参位置进行对象解构,对变量指定默认值,如下代码所示:

function fn({name='李四',age=30}={}){
	console.log(name,age);
}
fn()

2.解构数组

解构数组和对象有些不同,解构对象的时候属性前后位置不影响,但是结构数组,需要按照索引顺序结构。

1)数组基础解构用法

如果在没有解构之前,需要拿到数组中的前3位字符串,那么只能按照下面这种按照索引值的方式定义变量,如下所示:

let arr = ["HTML5","JavaScript","Vue","React","NodeJS"];
let str1 = arr[0];
let str2 = arr[1];
let str3 = arr[2];
console.log(str1,str2,str3);

// HTML5 JavaScript Vue

如果使用解构赋值的话,就可以展现位如下格式:

let [str1,str2,str3] = ["HTML5","JavaScript","Vue","React","NodeJS"];
console.log(str1,str2,str3);

基于这种特性,如果一次性想要定义多个变量,就可以使用这种解构的方式定义,相当于一次性定义了三个变量并对变量进行了赋值。

2)选择解构

数组的特性是按照索引值顺序执行的,如果只要取得数组最后几位,或者第几位,需要预留出其他值的位置,如下所示:

let [ , , , value1 ,value2] = ["HTML5","JavaScript","Vue","React","NodeJS"];
console.log(value1,value2);

// React NodeJS

3)扩展运算符

在一个数组中解构,可以取得数组第一位,剩下的通过扩展运算符(展开运算符),统一放置到一个数组中,如下所示:

let [value,...other] = ["HTML5","JavaScript","Vue","React","NodeJS"];
console.log(value,other);

// HTML5 ["JavaScript","Vue","React","NodeJS"]

4)默认值

同上面对象别名方式一致。

let [v1,v2,v3="Vue"] = ["HTML5","JavaScript"];
console.log(v1,v2,v3);

// HTML5 JavaScript Vue

5)交换变量值

let name1 = "张三";
let name2 = "李四";
[name2,name1] = [name1,name2];
console.log(name1,name2);

3.解构混用

在实际开发中基本没有上面那种简单的结构,大多数都是数据结构比较复杂,用好了解构赋值才会让你的代码看起来更加整洁。
通过下面的示例演示一下混用解构的方法,以如下对象为例,想要获取代表作品works字段下面音乐作品music下的“鸡你太美”,应该如何操作:

let person = {
	name:"坤坤",
	age:25,
	like:['唱','跳','rap','篮球'],
	works:{music:['Wait Wait Wait','鸡你太美'],movies:['童话二分之一','鬼畜区常青树']},
	friend:['丞丞','大宝贝','大黑牛']
}

1)传统型

let result = person.works.music[1]
console.log(result);

// 鸡你太美

2)浅层解构

let {works} =person
console.log(works.music[1]);

3)连续解构

let {works:{music}} =person
console.log(music[1]);

4)数组与对象混用

let {works:{music:[,result]}} =person
console.log(result);

5)解构+别名

let {works:{music:[,result],movies:newMov}} =person
console.log(result,newMov);

作者:咸虾米,如果对内容有更好的建议或者优化方案,请评论留言。

你可能感兴趣的:(JavaScript,javascript)