JavaScript ES6中的解构赋值

前端 · 2020-08-18 ·

ES6 中允许从数组中提取值,按照对应位置,对变量赋值。对象也可以实现解构。

1. 数组解构

// 数组解构
/* 
数组解构允许我们按照一一对应的关系从数组提取值,
然后将值赋值给变量
*/
let [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

// 如果解构不成功,变量的值为 undefined
let [foo] = [];
console.log(foo); // undefined
let [x, y] = [1];
console.log(x); // 1
console.log(y); // undefined

2. 对象解构

// 对象解构:允许我们使用变量的名字匹配对象的属性
/* 
对象解构允许我们按照一一对应的关系从对象提取值,
然后将值赋值给变量,对象解构实际是属性匹配,
变量的名字匹配对象的属性的名字,如果匹配成功,就像对象的值赋值给变量。
*/
let person = {
    name: "mla",
    age: 5
};
let {
    name,
    age
} = person;
let {
    name: myName,
    age: myAge,
    sex: mySex
} = person; // myName、myAge 属性别名, 这里的name是属性匹配,myName 是真正的变量
console.log(name); //mla
console.log(age); //5
console.log(myName); //mla
console.log(myAge); //5
console.log(mySex); //undefined
%