解构赋值
解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。
首先,让我们从解构对象开始。
解构对象
要将对象某个属性值取出来赋值给一个变量,我们通常如下操作:
var person = {
name: "张三",
gender: "男"
}
var name = person.name;
var gender = person.gender;
console.log(name);//张三
console.log(gender);//男
在ES6中我们可以操作如下:
const person = {
name: "张三",
gender: "男"
}
const { name, gender } = person;
console.log(name);//张三
console.log(gender);//男
由于我们的const
变量person
具有与我们需要获取的属性相同的名称,因此我们不再需要指定person.first
和person.last
即可取出其中的数据。
即是嵌套的数据(例如从API可以得到的数据),也是如此。请看如下示例:
const person = {
name: "张三",
gender: "男",
hobbys:{
sports:"打球、看书、玩游戏"
}
}
const { sports } = person.hobbys;
细心的朋友可能要问:“解构是不是变量名必须与属性名一致吗?”。很显然,我们可以使用另外的变量名。请看如下代码:
const {sports:sps}=person.hobbys;
// 它将查找属性person.hobbys.sports并将变量命名为sps
console.log(sps); // 打球、看书、玩游戏
console.log(sports); //Uncaught ReferenceError: sports is not defined
我们使用语法const { sports:sps }
来获取对象person.hobbys的sports属性,并赋值给变量sps
。这就是为什么我们在输出sports
时候出现变量(sports)未定义的错误。
我们同样也可以像下面的代码一样传入默认值:
const { sports:sps = "无"} = person.hobbys;
// 我们使用sps作为变量名,并赋予了默认值"无"
解构数组
我们在解构数组
时需要注意的第一个区别是,我们将使用[]
而不是{}
。
const person = ["张三","男",25];
const [name,gender,age] = person;
当我们变量的数量小于数组中元素的个数会怎么样呢?
const person = ["张三","男",25];
// 我们仅需要姓名、性别
const [name,gender] = person;
console.log(name,surname);
// 张三 男
假设我们要获取所有其他剩余值。我们可以使用** 剩余参数(ret parameter)语法**:
const person = ["张三","男",25,"北京大学","计算机系"];
// 我们使用 rest operator 获取剩余的值
const [name,gender,...others] = person ;
//张三 男
console.log(name,gender);
// 数组 [ 25,"北京大学","计算机系" ]
console.log(others);
在上面的示例中,前两个值分别被赋值给name
和gender
,剩余的元素(这就是我们为什么称之为rest parameter)被赋值给others
。
...
是剩余参数(ret parameter)语法,后续章节我们将介绍这个。
使用解构赋值交换变量值
解构赋值(destructuring)使得交换变量的值非常容易
,请看以下示例:
let hungry = true;
let full = false;
//在我们吃过饭后,就不会在感到饥饿。让我们交换他们的值。
[hungry, full] = [full, hungry];
console.log(hungry,full);
// false true
是不是很方面,很简洁。