Skip to content

在JavaScript中如何使用解构赋值语法?

解构赋值语法是在JavaScript ES6中首次引入的,它允许将数组和对象中的值解构到不同的变量中。虽然一开始可能看起来有些吓人,但实际上很容易学习和使用。让我们将其分解为更容易理解的情况。

数组解构赋值

解构一个数组非常简单。你只需要为序列中的每个值声明一个变量。你可以定义比数组中的索引少的变量(即,如果你只想解构前几个值),跳过一些索引,甚至使用剩余模式将任何剩余的值解构到一个新数组中。

const nums = [ 3, 6, 9, 12, 15 ];
const [
  k,              // k = 3
  l,              // l = 6
  ,               // 跳过一个值(9)
  ...n            // n = [12, 15]
] = nums;

对象解构赋值

对象解构赋值与数组解构赋值非常相似,主要区别在于你可以通过名称引用对象中的每个键,创建一个同名的变量。此外,你还可以将一个键解构到一个新的变量名中,只解构你需要的键,并使用剩余模式将剩余的键解构到一个新对象中。

const obj = { a: 1, b: 2, c: 3, d: 4 };
const {
  a,              // a = 1
  c: d,           // d = 3
  ...rest         // rest = { b: 2, d: 4 }
} = obj;

嵌套解构赋值

嵌套的对象和数组可以按照相同的规则解构。不同之处在于你可以直接将嵌套的键或值解构到变量中,而无需将父对象存储在一个变量中。

const nested = { a: { b: 1, c: 2 }, d: [1, 2]};
const {
  a: {
    b: f,         // f = 1
    ...g          // g = { c: 2 }
  },
  ...h            // h = { d: [1, 2]}
} = nested;

高级解构

由于数组的行为与对象类似,可以使用解构赋值语法通过在对象解构赋值中使用索引作为键来从数组中获取特定的值。此外,使用这种方法,还可以获取数组的其他属性(例如其length)。最后,还可以在解构赋值中为变量定义默认值,以防解构的值为undefined

const arr = [ 5, 'b', 4, 'd', 'e', 'f', 2 ];
const {
  6: x,           // x = 2
  0: y,           // y = 5
  2: z,           // z = 4
  length: count,  // count = 7
  name = 'array', // name = 'array'(在arr中不存在)
  ...restData     // restData = { '1': 'b', '3': 'd', '4': 'e', '5': 'f' }
} = arr;