JavaScript的解构赋值

---

解构赋值

目标：知道解构的语法及分类，使用解构简洁语法快速为变量赋值。

数组解构

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法。

基本语法

1. 赋值运算符 = 左侧的 [] 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量。
2. 变量的顺序对应数组单元值的位置依次进行赋值操作。

const arr = [1,2,3];
// 批量声明变量a、b、c，同时将数组的单元值依次赋值给它们
const [a,b,c] = arr
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

典型应用——交互两个变量

let a = 1
let b = 3; // 必须加分号
[a,b] = [b,a]
console.log(a) // 3
console.log(b) // 1

变量多，单元值少

const [a, b] = [1]
console.log(a) // 1
console.log(b) // undefined

可以通过给定默认值解决。

const [a = 0, b = 0] = [1]
console.log(a) // 1
console.log(b) // 0

变量少，单元值多

const [a,b] = [1,2,3]
console.log(a) // 1
console.log(b) // 2

可以使用剩余参数解决。

const [a,b,...c] = [1,2,3,4]
console.log(a) // 1
console.log(b) // 2
console.log(c) // [3,4]

按需导入赋值

const [a,b,,d] = [1,2,3,4]
console.log(a) // 1
console.log(b) // 2
console.log(d) // 4

多维数组解构

const [a,b,[c,d]] = [1,2,[3,4]]
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3
console.log(d) // 4

拓展——必须加分号的情况

1. 立即执行函数：(function fn() {})();
2. 使用数组的时候：;[a,b] = [b,a]

对象解构

对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法

基本语法

1. 赋值运算符 = 左侧的 {} 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量
2. 对象属性的值将被赋值给与属性名相同的变量
3. 注意解构的变量名不要和外面的变量名冲突否则报错
4. 对象中找不到与变量名一致的属性时变量值为 undefined

let obj = {uname: 'lily',age: 18};
{uname, age} = obj // 相当于{uname, age} = {uname: 'lily',age: 18}
console.log(uname) // 'lily'
console.log(age) // 18

变量改名：

let obj = {uname: 'lily',age: 18};
{uname: username, age: userage} = obj // 相当于{uname, age} = {uname: 'lily',age: 18}
console.log(username) // 'lily'
console.log(userage) // 18

数组对象解构：

let obj = [
    {
        uname: 'lily',
        age: 18
    }
]
let [{uname, age}] = obj
console.log(uname) // 'lily'
console.log(age) // 18

多级对象解构：

let obj = {
    name: 'lily',
    family:{
        mother: 'Anny',
        faher: 'Tom'
    },
    age: 18
}
let {name, family:{mother, father}} = obj
console.log(name) // 'lily'
console.log(mother) // 'Anny'
console.log(father) // 'Tom'