ECMAScript 6 语法学习——解构赋值

概述

在JavaScript中，我们经常需要在对象或数组中提取特定的数据赋值给变量，这个过程重复且繁琐。

代码示例如下

// 真实应用场景中，book对象通常是从服务器端得到的数据
let book = {
    title : "ECMAScript 6",
    isbn : "123456789",
    price : 37,
    category : {
        id : 1,
        name : "Web前端"
    }
}
// 提取对象中的数据赋值给变量
let title = book.title
let isbn = book.isbn
let price = book.price
let category = book.category.name

// 提取数组中的数据赋值给变量
let arr = [1, 2, 3]
let a = arr[0], b = arr[1], c = arr[2]

而在ECMAScript 6中，为对象和数组提供了解构功能，可以按照一定的模式从对象和数组中提取值，对变量进行赋值操作。

对象解构

对象解构的语法形式是在一个赋值操作符的左边放置一个对象字面量。

代码示例如下

let book = {
    title : "ECMAScript 6",
    isbn : "123456789",
    price : 37
}
let {title, isbn, price} = book
console.log(title)
console.log(isbn)
console.log(price)

如果使用var、let或const解构声明变量，则必须提供初始化操作

错误示范

// 以下代码均会导致程序抛出语法错误
var {title, isbn, price}
let {title, isbn, price}
const {title, isbn, price}

如果变量已经进行声明，使用解构语法给变量赋值时，需要用圆括号包裹整个解构赋值语句

代码示例如下

let book = {
    title : "ECMAScript 6",
    isbn : "123456789",
    price : 37
}

let title, isbn, price
// 语法错误
{title, isbn, price} = book
// 正确写法
({title, isbn, price} = book)

JavaScript引擎将一对开放的花括号视为一个代码块，而语法规定，代码块语句不允许出现在赋值语句的左侧，添加圆括号后可以将块语句转化为一个表达式，从而实现整个解构赋值的过程。
因为整个解构赋值表达式的值与表达式右侧（即“=”右侧）的值相等，所以可以实现一些有趣的操作。

给变量赋值的同时向函数传参

let book = {
    title : "ECMAScript 6",
    isbn : "123456789",
    price : 37
}
let title, isbn

function outputBookInfo(book) {
    console.log(book)
}
// 给title、isbn变量赋值后，解构表达式的值是“=”右侧的值
// 因此向outputBookInfo()函数传递的参数是book对象
outputBookInfo({title, isbn} = book)
console.log(title)
console.log(isbn)

使用解构表达式是，如果指定的局部变量名称在对象中不存在，那么这个局部变量会被赋值为undefined，因此，可以考虑为该变量定义一个默认值

let book = {
    title : "ECMAScript 6",
    isbn : "123456789",
    price : 37
}

let {title, isbn, salesVolume = 0} = book
console.log(title)
console.log(isbn)
console.log(salesVolume)

当book对象中没有salesVolume属性，或者该属性为undefined时，将使用预设的默认值

如果希望在使用解构赋值时，使用与对象属性名不同的局部变量名字，那么可以采用“属性名：局部变量名”的语法形式

let book = {
    title : "ECMAScript 6",
    isbn : "123456789",
    price : 37
}

let {title : bookTitle, isbn : bookIsbn} = book
console.log(bookTitle)
console.log(bookIsbn)

在JavaScript中，对象经常会有嵌套，而对于嵌套的对象将采用如下的方式进行解构赋值

let book = {
    title : "ECMAScript 6",
    isbn : "123456789",
    price : 37
    category : {
        id : 1,
        name : "Web前端"
    }
}

// 局部变量名为name
let {title, isbn, category : {name : category}} = book
console.log(title)
console.log(isbn)
console.log(category)

展开运算符与对象解构结合使用

let person = {
    name : 'John',
    age : 18
}
let {...newObject} = person
let {anotherObject} = person
let {name, age, gender} = {...person, gender : '男'}
// {name : 'John', age : 18}
console.log(newObject)
// undefined
console.log(anotherObject)
// John
console.log(name)
// 男
console.log(gender)

注意：newObject正确提取了对象属性，而anotherObject提取的是person对象中的anotherObject属性，但是person对象没有anotherObject属性，因此结果为undefined

数组解构

与对象解构的语法不同，数组解构使用方括号。此外，由于数据结构本质上的不同，数组解构没有对象属性名的问题，因此语法上更为简单。

代码示例如下

let arr = [1, 2, 3]
let [a, b, c] = arr
console.log(a)
console.log(b)
console.log(c)

在数组解构语法中，变量值是根据数组中元素的顺序进行选取的。如果要获取指定位置的数组元素值，可以只为该位置的元素提供变量名。

代码示例如下

let arr = [1, 2, 3]
let [ , , c] = arr
console.log(c)

变量c前面的都好是前方元素的占位符，无论数组中的元素有多少个，都可以通过这种方式来提取想要的元素

与对象解构不同，如果为已经声明过的变量进行数组解构赋值，不需要使用圆括号包裹解构赋值语句

let arr = [1, 2, 3]
let a, b, c
[a, b, c] = arr

在数组解构赋值表达式中为数组中的任意位置添加默认值，当指定位置的元素不存在或其值为undefined时使用默认值

let arr = [1, 2, 3]
let [a, b, c, d = 0] = arr
console.log(d)

嵌套数组解构与嵌套对象解构的语法类似，在原有的数组解构模式中插入另一个数组解构模式，即可将解构过程深入下一个层级。

代码示例如下

let categories = ["C/C++", ["Vue", "React"], "Java"]
let [language1, [ , language2]] = categories
console.log(language1)
console.log(language2)

变量language2两侧的方括号表示该变量的值应该到下一个层级的数组中去查找

展开运算符与数组解构结合使用

let arr = [1, 2, 3]
// 将arr数组的剩余元素赋值给others变量
let [a, ...others] = arr
// 数组赋值的另一种实现方式
let [...newArr] = arr
// 输出1
console.log(a)
// 输出[2, 3]
console.log(others)
// 输出2
console.log(others[0])
// 输出[1, 2, 3]
console.log(newArr)