JavaScript 中的解构是指将数组的值或对象的属性复制到变量中。解构并不意味着销毁。 事实并非如此，因为您可以从中复制数组或对象的值，而源未被修改。这是 ECMAScript 2015/16 中引入的 JavaScript 表达式。在本文中，您将学习如何解构数组、属性中的值，以及解构的其他用途。

数组中的基本解构

解构使得访问数组的值变得更容易。例如，如果你想在不解构的情况下访问数组中的值，

const array = ["deer","greet","heyy"];const arr = array[0];const arr1 = array[1];console.log(arr);                //deerconsole.log(arr1);              //greet

在此示例中，您通过使用它们的索引来读取值。 但是随着解构，这就是它的样子。

const array = ["deer","greet","heyy"];const [arr,arr1,arr2] = array;console.log(arr);                  //deerconsole.log(arr1);               //greet

因此，您可以同时将数组变量的值分配给新变量。

交换值

在数组中，您可以通过交换位置来交换变量中的值。 通常，您需要第三个变量来实现这一点。

这是一个例子：

let arr = "deer";let arr1 = "greet";console.log(arr);                //deerconsole.log(arr1);             //greetlet newArr = arr1;         //将值“greet”分配给新变量“newArr”console.log(newArr);          //greetarr1 = arr;           //将值“deer”赋值给变量“arr1”arr = newArr;        //将值“greet”分配给变量“arr”console.log(arr1);           //deerconsole.log(arr);            //greet

但是通过解构，你可以在没有第三个变量的情况下做到这一点。

const array = ["deer","greet","heyy"];let [arr,arr1,arr2] = array;console.log(arr);                //deerconsole.log(arr1);             //greet[arr,arr1] = [arr1,arr];        //使用解构来交换值console.log(arr);               //greetconsole.log(arr1);             //deer 

跳过值

您还可以在为变量赋值时跳过值。 您可以通过向要将值解构到的数组添加一个额外的逗号来做到这一点。 逗号表示值的索引。

在此示例中，赋值开头的逗号表示数组的第一个值。

const array = ["deer","greet","heyy"];const [,arr1,arr2] = array;             //跳过第一个值并仅使用第二个和第三个console.log(arr1);              //greetconsole.log(arr2);              //heyy

数组解构适用于所有可迭代值。 您可以对任何可迭代值进行数组解构。 此类可迭代对象的示例有字符串、集合等。

例如，对字符串使用数组解构，

const [a,b] = "abc";console.log(a);         //aconsole.log(b);        //b

在集合（set）上使用数组解构的示例，

const array = ["deer","greet","heyy"];const exampleSet = new Set(array);const [arr,arr1,arr2] = exampleSet;console.log(arr);         //deerconsole.log(arr1);        //greetconsole.log(arr2);        //heyyy

数组解构仅适用于可迭代值。 不可迭代的值会产生错误。 不可迭代的例子是 null 和 undefined。

此外，如果您正在解构的数组为空，javascript 将返回 undefined。

例如，

const [arr,arr1] = [];console.log(arr);          //undefinedconsole.log(arr1);         //undefined

这是另一种情况：

const array = [];const [arr,arr1] = array;console.log(arr);          //undefinedconsole.log(arr1);         //undefined

编写代码时，有时您可能不确定要分配的值。 如果该值未定义，您将需要一个默认值。 解构使您可以更轻松地为数组分配默认值。

看这个例子：

const array = ["deer","greet","heyy"];const [arr,arr1,arr2,arr3] = array;console.log(arr);              //wordconsole.log(arr1);            //fangconsole.log(arr2);           //greyconsole.log(arr3);           //undefined

为 arr3 分配一个默认值

const array = ["deer","greet","heyy"];//为 arr3 分配一个默认值const [arr,arr1,arr2,arr3="mirrors"] = array;console.log(arr3);          //mirrors

这样，您可以在解构时为变量分配默认值。

使用其余语法

Javascript 中的解构也使用 rest 语法。 它被称为“rest”语法，因为它涵盖了数组中的其余项目。 语法是 ... 然后是创建的数组的名称。 出现在三个点之后的名称“rest”是可选的。 您可以在三个点之后使用另一个名称。

语法：

(...rest)

使用 rest 语法时，请始终确保它排在其他项之后，否则会报错。

下面是数组中 rest 的示例：

使用前面的示例，

const array = ["deer","greet","heyy"];const [arr, …newArr] = array;console.log(arr);               //deerconsole.log(newArr);          //[ greet, heyy]

如您所见，newArr 数组是从旧数组创建的。

对象解构

通过对象解构，您可以从对象中检索属性值。 在为变量赋值时，对象采用与数组不同的语法。

在不解构的情况下分配值将是：

const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999};            //访问对象属性const words = obj.word;              const boolean = obj.bool;                     console.log(words)             //dataTypesconsole.log(boolean)          //true

这就是如何使用解构为对象赋值。

const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999};            //example of the object//To access the object propertyconst { word, bool } = obj;                   console.log(word)       //dataTypesconsole.log(bool)      //true 

这使得值分配更容易。

注意: 对象中的顺序无关紧要，您应该使用相同的名称。

这将导致以下错误：

const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999};const { words, boolean } = obj;console.log(words)           console.log(boolean)       //ReferenceError: obj is not defined

这是因为 JavaScript 不会将words和boolean变量存储为对象的引用，因此会出现错误。

但是，您可以在解构时为值分配不同的名称。

为对象属性分配不同的名称

您可以为对象属性分配不同的名称以访问它们。

const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999};const { word: words, bool: boolean } = obj;console.log(words)               //dataTypesconsole.log(boolean)           //true

在数组上使用对象解构

在将对象解构应用于数组时，您可以将数组的索引用作“属性”。

const {0:arr, 1:arr1, 2:arr2} = ["deer","greet","heyy"];console.log(arr);          //deerconsole.log(arr2);         //heyy

变量的初始声明

在对象中，您可以先声明一个变量，然后再为其赋值。

let word;const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999 };({ word } = obj);console.log(word);   //dataTypes    

注意：在赋值过程中，使用括号，否则 JavaScript 会将其视为块函数并返回语法错误。

在对象中使用rest语法

您可以在对象中使用rest语法。 与数组一样，rest 语法位于末尾并覆盖对象中的其余属性。

这是一个例子：

const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999};            //访问对象属性const { word: words, ...others } = obj;                   console.log(words);              //dataTypesconsole.log(others);            //{ num:0001, bool:true, bigInt:2.99999999 } 

注意:

与数组一样，javascript 在设置为解构空对象时会返回 undefined。 当值为未定义和 null 时，对象解构将返回类型错误。

对象中的默认值

在对象中，您可以在解构时为变量分配默认值。 如果某个属性不在对象中，您可以创建一个变量并为其分配一个默认值。

例如，

const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999, };            //example of the object//To access the object propertyconst { word, bool, num, str="street" } = obj;                   console.log(word);             //dataTypesconsole.log(str);              //street

在这个例子中，默认值 street 在解构时被分配给 str 变量。

概括

这总结了 JavaScript 中解构的主要特性。 我希望你能从中学到一些东西。 如果您喜欢这篇文章，可以与朋友分享或发表评论。 谢谢阅读。