by Joanna Gaudyn

乔安娜·高登(Joanna Gaudyn)

Destructuring was a new addition to ES6. It took inspiration from languages like Python and allows you to extract data from arrays and objects into distinct variables. It might sound like something you’ve done in the earlier versions of JavaScript already, right? Have a look at two examples.

销毁是ES6的新增功能。 它从Python之类的语言中汲取了灵感，并允许您从数组和对象中提取数据到不同的变量中。 听起来您已经在早期版本JavaScript中完成过操作，对吧？ 看两个例子。

The first one extracts data from an object:

第一个从对象中提取数据：

const meal = {  name: 'pizza',  type: 'marinara',  price: 6.25};

const name = meal.name;const type = meal.type;const price = meal.price;

console.log(name, type, price);

Prints:

印刷品：

pizza marinara 6.25

比萨比萨饼6.25

And the second one from an array:

第二个来自数组：

const iceCreamFlavors = ['hazelnut', 'pistachio', 'tiramisu'];const flavor1 = iceCreamFlavors[0];const flavor2 = iceCreamFlavors[1];const flavor3 = iceCreamFlavors[2];console.log(flavor1, flavor2, flavor3);

Prints:

印刷品：

hazelnut pistachio tiramisu

榛子开心果提拉米苏

The thing is, though, that neither of these examples actually uses destructuring.

事实是，这些示例均未真正使用解构。

什么是解构？ (What is destructuring?)

Destructuring lets you specify the elements you want to extract from an array or object on the left side of an assignment. This means much less code and exactly the same result as above, without losing readability. Even if it sounds odd at first.

通过解构，您可以指定要从分配左侧的数组或对象中提取的元素。 这意味着更少的代码和与上面完全相同的结果，而不会丢失可读性。 即使一开始听起来很奇怪。

Let’s redo our examples.

让我们重做我们的示例。

销毁对象 (Destructuring objects)

Here’s how we destructure values from an object:

这是我们如何从对象中解构值的方法：

const meal = {  name: 'pizza',  type: 'marinara',  price: 6.25};

const {name, type, price} = meal;

console.log(name, type, price);

Prints:

印刷品：

pizza marinara 6.25

比萨比萨饼6.25

The curly braces { } stand for the object which is being destructured and name, type, and price represent the variables to which you want to assign the values. We can skip the property from where to extract the values, as long as the names of our variables correspond with the names of the object’s properties.

大括号{ }代表正在被分解的对象， name ， type和price表示要为其分配值的变量。 只要变量的名称与对象的属性的名称相对应，就可以跳过从中提取值的属性。

Another great feature of object destructuring is that you can choose which values you want to save in variables:

对象解构的另一个重要功能是，您可以选择要保存在变量中的值：

const {type} = meal; will only select the type property from the meal object.

const {type} = meal; 只会从meal对象中选择type属性。

解构数组 (Destructuring arrays)

Here’s how our original example would be handled:

这是我们原始示例的处理方式：

const iceCreamFlavors = ['hazelnut', 'pistachio', 'tiramisu'];

const [flavor1, flavor2, flavor3] = iceCreamFlavors;

console.log(flavor1, flavor2, flavor3);

Prints:

印刷品：

hazelnut pistachio tiramisu

榛子开心果提拉米苏

The brackets [ ] stand for the array which is being destructured and flavor1, flavor2 and flavor3 represent the variables to which you want to assign the values. Using destructuring we can skip the indexes at which the values live in our array. Convenient, isn’t it?

方括号[ ]表示要进行解构的数组， flavor1 ， flavor2和flavor3表示要为其分配值的变量。 使用解构，我们可以跳过值存在于数组中的索引。 方便，不是吗？

Similarly as with an object, you can skip some values when destructuring an array:

与对象类似，在分解数组时可以跳过一些值：

const [flavor1, , flavor3] = iceCreamFlavors; will simply ignore flavor2.

const [flavor1, , flavor3] = iceCreamFlavors; 只会忽略flavor2 。

Long live laziness as a potent motivator for the invention of new shortcuts!

懒惰万岁是发明新捷径的有力动力！

Did you like this article? Maybe you’ll find these interesting too:

你喜欢这篇文章吗？ 也许您也会发现这些有趣的东西：

What does yoga have to do with programming?You might be surprised.medium.freecodecamp.orgSpread operator and rest parameter in JavaScript (ES6)Both the spread operator and the rest parameter are written as three consecutive dots (…). Do they have anything else…medium.comAn overview of JavaScript iteratorsThe difference between for, for…in and for…of loopsmedium.freecodecamp.org

瑜伽与编程有什么关系？ 您可能会感到惊讶。 medium.freecodecamp.org JavaScript(ES6)中 的扩展运算符和rest参数扩展运算符和rest参数都被写为三个连续的点(…)。 它们还有其他内容吗…… medium.com JavaScript迭代器概述 for，for…in和for…of循环之间的区别medium.freecodecamp.org

翻译自: https://www.freecodecamp.org/news/destructuring-in-javascript-es6-ee963292623a/