JavaScript——解构赋值

解构赋值

1. 数组解构

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

基本语法：

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

const arr = [100, 60, 80]
// 数组解构赋值
const [max, min, avg] = arr
console.log(max)  // 100
console.log(avg)  // 80 

数组结构赋值的作用是什么？

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

2. 数组解构赋值的细节

数组解构赋值的其他情况

• 1. 变量多 单元值少

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

• 2.变量少 单元值多

const [a, b, c] = ['小米', '苹果', '华为', '格力']
console.log(a)  // 小米
console.log(b)  // 苹果
console.log(c)  // 华为

• 3.剩余参数解决变量少 单元值多的问题

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

• 4.使用默认参数 防止undefined传递

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

• 5.按需导入，忽略某些值

const [a, , c, d] = ['小米', '苹果', '华为', '格力']
console.log(a)   // 小米
console.log(c)   // 华为
console.log(d)   // 格力

• 6.支持多维数组结构

const [a, b] = ['苹果', ['小米', '华为']]
console.log(a)  // 苹果
console.log(b)  // ['小米', '华为']

const [a, [b, c]] = ['苹果', ['小米', '华为']]
console.log(a)  // 苹果
console.log(b)  // 小米
console.log(c)  // 华为

3. 对象解构

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

基本语法：

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

// 对象解构的语法
// 注意解构时变量名必须与对象内的属性名一致
const { uname, age } = { uname: 'wjr', age: 18 }
// 等价于 const uname = obj.uname
console.log(uname);  // wjr
console.log(age);  // 18

当外面的变量名与结构的变量名冲突时，使用以下方法重新改名

const uname = 'wjc'
const { uname: userName, age } = { uname: 'wjr', age: 18 }
console.log(userName);  // wjr
console.log(age);  // 18

4. 数组对象解构

const pig = [{uname: '佩奇', age: 6}]
const [{uname, age}] = pig
console.log(uname)  // 佩奇
console.log(age)  // 6

5. 多级对象解构

const pig = {
    uname: '佩奇',
    family: {
        mother: '猪爸爸',
        father: '猪妈妈'
    }
}
const {name, family: {mother, father}} = pig
console.log(name)  // 佩奇
console.log(mother)  // 猪爸爸
console.log(father)  // 猪妈妈