JavaScript解构赋值是ES6新增的一种赋值方法,为我们提供了很多方便,但是用法比较多,本文就来梳理一下。总体来说,主要就两种地方使用解构赋值,一种是数组的解构赋值,另一种是对象的解构赋值。以这两个为基础就可以得到比较复杂的解构赋值,本质上就是这些结构的嵌套。
先来看数组的解构赋值:
const arr = ["little", "moon", 1, 2, 3];
const [first, second, ...rest] = arr;
console.log(first, second); // little moon
console.log(rest); //[1, 2, 3]
first、second和rest只是变量名,…rest叫做剩余表达式,将所有剩余下来的放到rest里。数组的解构按顺序将数组赋值给解构表达式左边的变量,左边的变量如果少于数组元素,不会报错,而是有几个赋值几个,比如下面的写法依然可以获取数组前两个元素的值:
const arr = ["little", "moon", 1, 2, 3];
const [first, second] = arr;
如果想忽略某个(些)元素也可以,使用一个占位符,或者直接省略占位符也可以:
const arr = ["little", "moon", 1, 2, 3];
// 忽略不感兴趣的元素
const [, _, one, two, three] = arr;
console.log(one, two, three);
可以利用解构赋值简洁地实现变量交换:
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log("a:" + a + ", b:" + b); // a:2, b:1
下面来看对象的解构,最基础的用法是使用和属性相同的名字,就可以解构到属性值,如下所示:
// 解构对象
const person = {
name: "xiaoyuhang",
age: 22,
address: {
home: "nanjing",
work: "shanghai",
school: {
middleschool: "sy",
highschool: "wg",
graduateschool: "sh"
}
}
}
const {name, age} = person; // 获取到xiaoyuhang 和 22两个属性值
对于这种相对来说层次较多的对象,可以解构到我们想要的层次,下面的例子中,只获取highschool这个属性:
// 可以只解构我们想要的部分,解构到想要的层次
const { address: { school: { highschool } } } = person;
有时候觉得对象属性的命名不太直观,可以在获取的同时为它重命名,使用name: alias这种方式即可,如下所示,将highschool重命名为high_school_address:
const { address: { school: { highschool: school} } } = person;
有些时候,我们用于获取的属性名不是硬编码到程序中的,而是通过字符串计算得到,这时候就要使用[property]方法来计算属性名,看下面的例子就明白了:
// 计算属性名
const obj1 = { zz: "2020", yy: "2021" }
const z = "zz";
const { [z]: year } = obj1;
console.log(z); // zz
console.log(year); // 2020
此外,通过提供有效的代替名,也可以计算出属性:
const { "yy": nextyear } = obj1;
// const { "yyy": nextyear } = obj1; // 这就不行了 必须要和属性同名的字符串
使用解构,可以方便的在循环中进行赋值:
// 解构 + 迭代
var people = [
{
name: 'Mike Smith',
family: {
mother: 'Jane Smith',
father: 'Harry Smith',
sister: 'Samantha Smith'
},
age: 35
},
{
name: 'Tom Jones',
family: {
mother: 'Norah Jones',
father: 'Richard Jones',
brother: 'Howard Jones'
},
age: 25
}
];
for (var { name: n, family: { father: f } } of people) {
console.log('Name: ' + n + ', Father: ' + f);
}
// Name: Mike Smith, Father: Harry Smith
// Name: Tom Jones, Father: Richard Jones
解构对象,会依次查看原型链上的所有属性,直到找到为止或最终查找失败:
// 解构对象会访问原型链
function Person() {
this.name = "yhx";
this.age = 18;
}
Person.prototype.foo = "bar";
const ps1 = new Person();
const { name, age, foo } = ps1;
console.log(name, age, foo);
ps1对象的原型是Person,我们在Person的prototype属性上添加了一个foo属性,然后解构ps1对象时,对于foo,会沿着原型链查找到foo。