数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法。
基本语法:
-
赋值运算符 = 左侧的 [] 用于批量声明变量,右侧数组的单元值将被赋值给左侧的变量
-
变量的顺序对应数组单元值的位置依次进行赋值操作
// const arr = [100, 60, 80]
// 数组解构 赋值
// // const [max, min, avg] = arr
const [max, min, avg] = [100, 60, 80]
// // const max = arr[0]
// // const min = arr[1]
// // const avg = arr[2]
console.log(max) // 100
console.log(avg) // 80
典型应用交互2个变量
let a = 1
let b = 2;
[b, a] = [a, b]
console.log(a, b)
js前面必须加;的情况
- 立即执行函数
(function t(){})();
(function t(){})()
- 数组解构
let a = 0
let b = 1;
[b, a] = [a, b]
变量多 单元值少的情况
变量的数量大于单元值数量时,多余的变量将被赋值为 undefined
const [a, b, c, d] = [1, 2, 3]
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3
console.log(d) // undefined
变量少 单元值多的情况
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] 真数组
防止有undefined传递单元值的情况,可以设置默认值:
允许初始化变量的默认值,且只有单元值为 undefined 时默认值才会生效
const [a = 0, b = 0] = [1, 2]
// const [a = 0, b = 0] = []
console.log(a) // 1
console.log(b) // 2
按需导入,忽略某些返回值:
const [a, b, , d] = [1, 2, 3, 4]
console.log(a) // 1
console.log(b) // 2
console.log(d) // 4
支持多维数组的结构:
// const arr = [1, 2, [3, 4]]
// console.log(arr[0]) // 1
// console.log(arr[1]) // 2
// console.log(arr[2]) // [3,4]
// console.log(arr[2][0]) // 3
// 多维数组解构
// const arr = [1, 2, [3, 4]]
// const [a, b, c] = [1, 2, [3, 4]]
// console.log(a) // 1
// console.log(b) // 2
// console.log(c) // [3,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