JavaScript 解构赋值

JavaScript Destructuring

ES6中引入的解构赋值可以轻松地将数组值和对象属性赋给不同的变量。例如，

ES6之前

// assigning object attributes to variables
const person = {
    name: 'Sara',
    age: 25,
    gender: 'female'    
}

let name = person.name;
let age = person.age;
let gender = person.gender;

console.log(name); // Sara
console.log(age); // 25
console.log(gender); // female

ES6之后

// assigning object attributes to variables
const person = {
    name: 'Sara',
    age: 25,
    gender: 'female'    
}

// destructuring assignment
let { name, age, gender } = person;

console.log(name); // Sara
console.log(age); // 25
console.log(gender); // female

注意：在对象解构中，顺序无关紧要。

例如，您可以将上述程序写成

let { age, gender, name } = person;
console.log(name); // Sara

例如，

let {name1, age, gender} = person;
console.log(name1); // undefined

如果您想为对象键赋不同的变量名，可以使用

const person = {
    name: 'Sara',
    age: 25,
    gender: 'female'    
}

// destructuring assignment
// using different variable names
let { name: name1, age: age1, gender:gender1 } = person;

console.log(name1); // Sara
console.log(age1); // 25
console.log(gender1); // female

数组解构

您也可以用类似的方式进行数组解构。例如，

const arrValue = ['one', 'two', 'three'];

// destructuring assignment in arrays
const [x, y, z] = arrValue;

console.log(x); // one
console.log(y); // two
console.log(z); // three

分配默认值

您可以在使用解构时为变量分配默认值。例如，

let arrValue = [10];

// assigning default value 5 and 7
let [x = 5,  y = 7] = arrValue;

console.log(x); // 10
console.log(y); // 7

在上面的程序中，arrValue只有一个元素。因此，

• x变量将是10
• y变量取默认值7

在对象解构中，您可以以类似的方式传递默认值。例如，

const person = {
    name: 'Jack',
}

// assign default value 26 to age if undefined
const { name, age = 26} = person;

console.log(name); // Jack
console.log(age); // 26

交换变量

在此示例中，使用解构赋值语法交换了两个变量。

// program to swap variables

let x = 4;
let y = 7;

// swapping variables
[x, y] = [y, x];

console.log(x); // 7
console.log(y); // 4

跳过项

您可以跳过数组中不需要的项，而无需将它们赋给局部变量。例如，

const arrValue = ['one', 'two', 'three'];

// destructuring assignment in arrays
const [x, , z] = arrValue;

console.log(x); // one
console.log(z); // three

在上面的程序中，通过使用逗号分隔符,省略了第二个元素。

将剩余元素赋给单个变量

您可以使用扩展语法...将数组的剩余元素赋给一个变量。例如，

const arrValue = ['one', 'two', 'three', 'four'];

// destructuring assignment in arrays
// assigning remaining elements to y
const [x, ...y] = arrValue;

console.log(x); // one
console.log(y); // ["two", "three", "four"]

在这里，one被赋给x变量。数组的其余元素被赋给y变量。

您还可以将对象中剩余的属性赋给一个变量。例如，

const person = {
    name: 'Sara',
    age: 25,
    gender: 'female'    
}

// destructuring assignment
// assigning remaining properties to rest
let { name, ...rest } = person;

console.log(name); // Sara
console.log(rest); // {age: 25, gender: "female"}

注意：带有扩展语法的变量不能有尾随逗号,。您应该将此剩余元素（带扩展语法的变量）作为最后一个变量。

例如，

const arrValue = ['one', 'two', 'three', 'four'];

// throws an error
const [ ...x, y] = arrValue;

console.log(x); // eror

嵌套解构赋值

您可以对数组元素执行嵌套解构。例如，

// nested array elements
const arrValue = ['one', ['two', 'three']];

// nested destructuring assignment in arrays
const [x, [y, z]] = arrValue;

console.log(x); // one
console.log(y); // two
console.log(z); // three

在这里，变量y和z被赋给了嵌套元素two和three。

为了执行嵌套解构赋值，您必须将变量放在数组结构中（通过将其包含在[]内）。

您也可以对对象属性执行嵌套解构。例如，

const person = {
    name: 'Jack',
    age: 26,
    hobbies: {
        read: true,
        playGame: true
    }
}
// nested destructuring 
const {name, hobbies: {read, playGame}} = person;

console.log(name); // Jack
console.log(read); // true
console.log(playGame); // true

为了执行对象的嵌套解构赋值，您必须将变量放在对象结构中（通过将其包含在{}内）。

注意：解构赋值功能是在ES6中引入的。某些浏览器可能不支持解构赋值。请访问Javascript Destructuring支持了解更多信息。