数组解构

91 阅读2分钟

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

基本语法:

  1. 赋值运算符 = 左侧的 [] 用于批量声明变量,右侧数组的单元值将被赋值给左侧的变量

  2. 变量的顺序对应数组单元值的位置依次进行赋值操作

// 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

image.png

典型应用交互2个变量

let a = 1
let b = 2;
[b, a] = [a, b]
console.log(a, b)

js前面必须加;的情况

  1. 立即执行函数
(function t(){})();
(function t(){})()
  1. 数组解构
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