无涯教程-ES6 - 解构赋值 ES6 中引入的解构分配可以轻松地将数组值和对象属性分配给不同的变量。例如， ES6之前

ES6 中引入的解构分配可以轻松地将数组值和对象属性分配给不同的变量。例如， ES6之前的版本:

// 将对象属性分配给变量
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);//femaleconsole.log(name);//Sara
console.log(age);//25
console.log(gender);//female

从ES6:

// 将对象属性分配给变量
const person = {
    name: Sara,
    age: 25,
    gender: female    
}


// 解构赋值
let { name, age, gender } = person;




console.log(name);//Sara
console.log(age);//25
console.log(gender);//femaleconsole.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    
}


// 解构赋值
// 使用不同的变量名
let { name: name1, age: age1, gender:gender1 } = person;




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

数组解构

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

const arrValue = [one, two, three];


// 数组中的解构赋值
const [x, y, z] = arrValue;




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

分配默认值

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

let arrValue = [10];


// 分配默认值 5 和 7
let [x = 5,  y = 7] = arrValue;




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

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

x 变量将为 10
y 变量采用默认值 7

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

const person = {
    name: Jack,
}


// 如果未定义，则将默认值 26 分配给age年龄
const { name, age = 26} = person;




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

交换变量

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

// 交换变量的程序


let x = 4;
let y = 7;




// 交换变量
[x, y] = [y, x];




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

跳过元素

您可以跳过数组中不需要的项目，而无需将其分配给局部变量。例如，

const arrValue = [one, two, three];


// 数组中的解构赋值
const [x, , z] = arrValue;




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

在上述程序中，使用逗号分隔符，省略了第二个元素。

分配单个变量

您可以使用Spread语法将数组的其余元素分配给变量 .... 例如，

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


//数组中的解构赋值
//将剩余元素分配给 y
const [x, ...y] = arrValue;




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

在此，将一个分配给 x 变量。并将其余的数组元素分配给 y 变量。

您还可以将其余的对象属性分配给单个变量。例如，

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


//解构赋值
// 将剩余属性分配给 rest
let { name, ...rest } = person;




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

注意:具有Spread语法的变量不能带有逗号 . 。您应该使用此rest元素作为最后一个变量。

例如，

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


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




console.log(x);//erorconsole.log(x);//eror

嵌套解构分配

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

// 嵌套数组元素
const arrValue = [one, [two, three]];


// 数组中的嵌套解构赋值
const [x, [y, z]] = arrValue;




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

在这里，变量 y 和 z 被分配了嵌套元素 two 和 3 。

为了执行嵌套的解构分配，您必须将变量包含在数组结构中(通过包含在 [] 内部)。

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

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);//trueconsole.log(name);//Jack
console.log(read);//true
console.log(playGame);//true

为了执行对象的嵌套解构分配，您必须将变量包含在对象结构中(通过包含在 {} 内部)。

注意: ES6 中引入了销毁分配函数。某些浏览器可能不支持使用解构分配。访问Javascript Destructuring支持以了解更多信息。

无涯教程-ES6 - 解构赋值