使用ES6在JavaScript中解构对象和数组

使用 ES6 / ES2015，您现在可以更轻松地从数组和对象中提取数据，减少语法混乱。 通过以下代码段示例了解它是如何完成的：

数组解构

自动创建值与数组中的项目相对应的变量：

const names = ['Bob', 'Fred', 'Benedict'];

const [cat, dog, alligator] = names;

console.log(cat); // Bob
console.log(dog); // Fred
console.log(alligator); // Benedict

您还可以通过使用逗号来跳过项目，而变量名称没有任何名称：

const names = ['Bob', 'Fred', 'Benedict'];

const [cat, , alligator] = names;

console.log(cat); // Bob
console.log(alligator); // Benedict

您可以解构数组的一部分，然后将其余部分放入一个新数组中：

const names = ['Bob', 'Fred', 'Benedict'];

const [cat, ...rest] = names;

console.log(cat); // Bob
console.log(rest); // ["Fred", "Benedict"]

对象解构

对象解构有点不同，因为键不一定按特定顺序排列，因此新变量需要具有与对象键匹配的名称：

const names = {cat: 'Bob', dog: 'Fred', alligator: 'Benedict'};

const {cat, dog, alligator} = names;

console.log(cat); // Bob
console.log(dog); // Fred
console.log(alligator); // Benedict

但是，有一种方法可以匹配名称，以下是如何为变量赋予新名称：

const names = {cat: 'Bob', dog: 'Fred', alligator: 'Benedict'};

const {cat: newCat, dog: newDog, alligator: newAlligator} = names;

console.log(newCat); // Bob
console.log(newDog); // Fred
console.log(newAlligator); // Benedict