JavaScript 解构赋值

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46，售后保障稳定

    在本教程中，您将借助示例了解 JavaScript 解构赋值。

JavaScript 解构

    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

Jetbrains全家桶1年46，售后保障稳定

    来自 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"}

    注意：具有扩展语法的变量不能有尾随逗号，。您可以将这个rest元素（带有扩展语法的变量）作为最后一个变量。
    例如，

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 解构支持以了解更多信息。

    上一教程 ：JS Set                                          下一教程 ：JS Classes

参考文档

[1] Parewa Labs Pvt. Ltd. (2022, January 1). Getting Started With JavaScript, from Parewa Labs Pvt. Ltd: https://www.programiz.com/javascript/destructuring-assignment