es6中数组的解构_ES6中的数组解构简介

es6中数组的解构

by Kevwe Ochuko

通过Kevwe Ochuko

Destructuring in JavaScript is a simplified method of extracting multiple properties from an array by taking the structure and deconstructing it down into its own constituent parts through assignments by using a syntax that looks similar to array literals.

在JavaScript 解构是通过使用一种语法，看起来类似于数组文本以结构和解构它分解成其自身的组成部分通过分配提取的阵列多个属性的简化方法。

It creates a pattern that describes the kind of value you are expecting and makes the assignment. Array destructuring uses position.

它创建一个描述您期望的值类型的模式并进行分配。 数组解构使用位置。

See the below code snippet.

请参见以下代码段。

var [first, second, third] = ["Laide", "Gabriel", "Jets"];

The Syntax with Destructuring.

解构语法。

var first = "laide",    second = "Gabriel",    third = "Jets";

The Syntax Without Destructuring.

不分解的语法。

You cannot use Numbers for destructuring. Numbers will throw an error because numbers cannot be variable names.

您不能使用数字进行销毁。 数字将引发错误，因为数字不能为变量名。

var [1, 2, 3] = ["Laide", "Ola", "Jets"];

This syntax throws an error.

此语法引发错误。

Destructuring has made extracting data from an array very simple and readable. Imagine trying to extract data from a nested array with 5 or 6 levels. That would be very tedious. You use an array literal on the left-hand side of the assignment.

解构使得从数组中提取数据非常简单且易读。 想象一下，尝试从具有5或6个级别的嵌套数组中提取数据。 那将是非常乏味的。 您可以在分配的左侧使用数组文字。

var thing = ["Table", "Chair", "Fan"];var [a, b, c] = thing;

It takes each variable on the array literal on the left-hand side and maps it to the same element at the same index in the array.

它采用左侧数组文字上的每个变量，并将其映射到数组中相同索引处的相同元素。

console.log(a); // Output: Tableconsole.log(b); //Output: Chairconsole.log(c); //Output: Fan

Declaration and assignment can be done separately in destructuring.

声明和分配可以在销毁中分别完成。

var first, second;[first, second] = ["Male", "Female"];

If the number of variables passed to the destructuring array literals are more than the elements in the array, then the variables which aren’t mapped to any element in the array return undefined.

如果传递给解构数组字面量的变量数量大于数组中的元素，则未映射到数组中任何元素的变量将返回 undefined 。

var things = ["Table", "Chair", "Fan", "Rug"];var [a, b, c, d, e] = things;console.log(c); //Output: Fanconsole.log(d); //Output: Rugconsole.log(e); //Output: undefined

If the number of variables passed to the destructuring array literals are lesser than the elements in the array, the elements without variables to be mapped to are just left. There are no errors whatsoever.

如果传递给解构数组字面量的变量数量少于数组中的元素，则不包含要映射到的变量的元素将被保留。 没有任何错误。

var things = ["Table", "Chair", "Fan", "Rug"];var [a, b, c] = things;console.log(c); // Output: Fan

解构返回的数组 (Destructuring Returned Arrays)

Destructuring makes working with a function that returns an array as a value more precise. It works for all iterables.

解构使使用返回数组作为值的函数更加精确。 它适用于所有可迭代对象。

function runners(){    return ["Sandra", "Ola", "Chi"];}

var [a, b, c] = runners();console.log(a); //Output: Sandraconsole.log(b); //Output: Olaconsole.log(c); //Output: Chi

默认值 (Default Value)

Destructuring allows a default value to be assigned to a variable if no value or undefined is passed. It is like providing a fallback when nothing is found.

如果没有值或undefined则解构允许将默认值分配给变量 通过了。 就像什么都没有发现时提供一个备用。

var a, b;[a = 40, b = 4] = [];console.log(a); //Output: 40console.log(b); //Output: 4

[a = 40, b = 4] = [1, 23];console.log(a); //Output: 1console.log(b); //Output: 23

Default values can also refer to other variables including the one in the same array literal.

默认值还可以引用其他变量，包括同一数组文字中的变量。

var [first = "Cotlin", second = first] = [];console.log(first); //Output: Cotlinconsole.log(second); //Output: Cotlin

var [first = "Cotlin", second = first] = ["Koku"];console.log(first); //Output: Kokuconsole.log(second); //Output: Koku

var [first = "Cotlin", second = first] = ["Koku", "Lydia"];console.log(first); //Output: Kokuconsole.log(second); //Output: Lydia

忽略一些价值 (Ignoring Some Values)

Destructuring lets you map a variable to the elements you are interested in. You can ignore or skip the other elements in the array by using trailing commas.

通过解构，您可以将变量映射到您感兴趣的元素。您可以使用尾部逗号忽略或跳过数组中的其他元素。

var a, b;[a, , b] = ["Lordy", "Crown", "Roses"];

console.log(a); //Output: Lordyconsole.log(b); //Output: Roses

剩余参数和传播语法 (The Rest Parameter And Spread Syntax)

The new (…) operator that was added in ES6 can be used in destructuring. If the (…) operator appear on the left-hand side in destructuring then it is a REST PARAMETER. A Rest parameter is used to map all the remaining elements in the array that have not been mapped to the rest variable itself. It is like gathering what is left behind. The Rest variable must always be the last otherwise a SyntaxError is thrown.

ES6中添加的新(...) 运算符可用于解构。 如果(...)运算符出现在解构的左侧，则它是REST PARAMETER 。 Rest参数用于将数组中尚未映射的所有其余元素映射到rest变量本身。 这就像收集剩下的东西。 Rest变量必须始终为最后一个，否则将引发SyntaxError 。

var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];var [first, , third, ...others] = planets;

console.log(first); //Output: Mercuryconsole.log(third); //Output: Venusconsole.log(others); //Output: ["Mars", "Pluto", "Saturn"]

If the (…) operator appears on the right-hand in destructuring then it is a SPREAD SYNTAX. It takes all the other elements in the array which have no variable mapped to them and then maps it to the rest variable.

如果(...)运算符出现在解构的右侧，则为SPREAD SYNTAX 。 它 接受数组中没有变量映射的所有其他元素，然后将其映射到其余变量。

var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];

var [first, second, ...rest] = ["Mercury", "Earth", ...planets, "Saturn"];

console.log(first); //Output: Mercuryconsole.log(second); //Output: Earthconsole.log(rest); //Output: ["Venus", "Mars", "Pluto", "Saturn"]

When you can have more variables on the left-hand side, it maps the single elements in the array equally to the variables.

当左侧可以有更多变量时，它将数组中的单个元素均等地映射到变量。

var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];

var [first, second, ...rest] = ["Mercury", ...planets];

console.log(first); //Output: Mercuryconsole.log(second); //Output: Mercuryconsole.log(rest); //Output: ["Earth", "Venus", "Mars", "Pluto", "Saturn"]

var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];

var [first, second, third, fourth ...rest] = ["Mercury", "Earth", ...planets];

console.log(first); //Output: Mercuryconsole.log(second); //Output: Earthconsole.log(third); //Output: Mercuryconsole.log(fourth); //Output: Earthconsole.log(rest); //Output: ["Venus", "Mars", "Pluto", "Saturn"]

交换或交换变量 (Interchanging Or Swapping Variables)

One destructuring expression can be used in swapping the values of two variables.

一个解构表达式可用于交换两个变量的值。

var a, b;[a, b] = ["Male", "Female"];[a, b] = [b, a];

console.log(a); //Output: Femaleconsole.log(b); //Output: Male

嵌套数组解构 (Nested Array Destructuring)

You can also do nested destructuring with arrays. The corresponding item must be an array in order to use a nested destructuring array literal to assign items in it to local variables.

您还可以使用数组进行嵌套解构。 相应的项目必须是一个数组，以便使用嵌套的解构数组文字将其中的项目分配给局部变量。

var numbers = [8, [1, 2, 3], 10, 12];var  [a, [d, e, f]] = numbers;

console.log(a); // Output: 8console.log(d); // Output: 1console.log(e); // Output: 2

多阵列解构 (Multiple Array Destructuring)

You can destructure an array more than once in the same code snippet.

您可以在同一代码段中多次破坏数组的结构。

var places = ["first", "second", "third", "fourth"];var [a, b, , d] = [f, ...rest] = places;

console.log(a); //Output: firstconsole.log(d); //Output: fourthconsole.log(f); //Output: firstconsole.log(rest); //Output: ["second", "third", "fourth"]

结论 (Conclusion)

You can copy and paste the code on Babel’s website to see what the code would look like if destructuring did not exist. You would have written more lines of code, but destructuring simplifies it all.

您可以将代码复制并粘贴到Babel的网站上，以查看如果不存在解构的代码的外观。 您可能已经编写了更多的代码行，但是解构简化了这一切。

翻译自: https://www.freecodecamp.org/news/array-destructuring-in-es6-30e398f21d10/

es6中数组的解构