在Javascript中怎么解构数组和对象

2024-10-26 技术教程

这篇文章主要介绍了在Javascript中怎么解构数组和对象，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

定义

对于解构赋值，没有比 MDN 更简洁的定义：

解构赋值语法是一个 JavaScript 表达式，可以将数组中的值或对象中的属性解包为不同的变量。

数组解构

我们使用方括号：[]来解构数组。

让我们看看我们可以使用解构赋值的不同场景，考虑一个包含三个元素的数组，现在你想分别用数组中的值创建三个不同的变量。旧方法是使用索引为每个新变量分配数组中的值。

constarr=[1,2,3];consta=arr[0];//a=1constb=arr[1];//b=2constc=arr[2];//c=3

但是，使用解构赋值可以大大减少执行相同任务的工作量。

constarr=[1,2,3];const[a,b,c]=arr;//a=1,b=2,c=3

注意：原始阵列不受影响，保持原样。只有赋值操作从左到右进行。

如果我们只需要数组中的两个元素，我们可以对两个变量使用相同的语法。数组中超过两个元素的剩余值将被丢弃。

我们也可以根据需要使用数组中该元素的空格跳过中间元素。请参阅示例以更好地理解：

constarr=[1,2,3,4];//a=1,b=2const[a,b]=arr;//x=2,y=4const[,x,,y]=arr;使用解构交换值

传统上，我们可以使用临时变量显式交换值，然后在三个变量之间赋值和重新赋值，但现在我们可以使用解构直接赋值，示例如下：

leta=10,b=20;//Oldwaylettemp=a;a=b;b=temp;//a=20,b=10//Usingdestructuring[a,b]=[b,a];//a=20,b=10从函数调用中接收多个值

让我们考虑一个具有很少属性的对象 restaurant：

constrestaurant={name:'La\'PinozPizza',location:'Ghaziabad',categories:['Italian','Vegetarian','Non-Vegetarian','Organic'],starterMenu:['GarlicBread','Fries','Pastries'],mainMenu:['Pizza','Pasta','Risotto'],order:function(starterIndex,mainIndex){return[this.starterMenu[starterIndex],this.mainMenu[mainIndex]];}}

restaurant对象的 order 属性是一个函数，它接受两个参数并返回一个包含两个值的数组。我们可以在这里使用解构，将 Array 的元素直接赋值给变量。

const[starter,mainCourse]=restaurant.order(2,1);console.log(starter,mainCourse);//output:PastriesPasta嵌套解构

顾名思义，非常简单，在数组中解构数组。考虑一个带有嵌套数组的数组：[1, 2, [3, 4]]。当我们用这个数组分配 a,b,c 的值时，每个人都会得到分配的单个元素，即 a = 1, b = 2, c = [3,4]。如果我们想从数组 c 中分离出值，那么我们可以使用类似的解构语法并实现它。

constnested=[1,2,[3,4]];const[a,b,c]=nested;//a=1,b=2,c=[3,4]const[x,,[y,z]]=nested;//x=1,y=3,z=4默认值

如果我们不知道传入数组中包含的数据，那么分配给变量的默认值是undefined。让我们看一个例子并理解：

constunknownArray=[1,5,9];const[a,b,c,d]=unknownArray;console.log(a,b,c,d);//Output:159undefined对象解构

我们使用花括号：{}来解构对象。我们必须提供与对象中的属性名称完全匹配的变量名称。（尽管我们还将看到一种如何使用不同变量名称的方法）。

让我们考虑与上面类似的restaurant对象，还有更多的属性：

constrestaurant={nameOfRestaurant:'La\'PinozPizza',location:'Ghaziabad',categories:['Italian','Vegetarian','Non-Vegetarian','Organic'],starterMenu:['GarlicBread','Fries','Pastries'],mainMenu:['Pizza','Pasta','Risotto'],order:function(starterIndex,mainIndex){return[this.starterMenu[starterIndex],this.mainMenu[mainIndex]];},openingHours:{thu:{open:11,close:22},fri:{open:10,close:23},sat:{open:11,close:23}}}

我们可以使用其属性名称来解构restaurant对象，现在这里属性的顺序无关紧要，因为只要属性名称匹配就可以访问它。

const{nameOfRestaurant,openingHours,mainMenu}=restaurant;console.log('Name:',nameOfRestaurant);console.log('OpeningHours:',openingHours);console.log('MainMenu:',mainMenu);//Output://Name:La'PinozPizza//OpeningHours:{//thu:{open:11,close:22},//fri:{open:10,close:23},//sat:{open:11,close:23}//}//MainMenu:['Pizza','Pasta','Risotto']使用不同的变量名

即使我们想更改与属性名称不同的变量名称，我们仍然需要提前知道属性名称。所以查找传入的对象总是一个好习惯。好的，所以我们可以使用冒号(:) 为属性名称指定别名。

const{nameOfRestaurant:name,openingHours:timing,mainMenu:menu}=restaurant;console.log('Name:',name);console.log('OpeningHours:',timing);console.log('MainMenu:',menu);//Wegettheoutputsimilartotheaboveoutput.设置默认值

我们总是可以在解构对象时为变量分配一个默认值。如果值存在于对象中，则将其分配给变量；如果不存在，则将默认值分配给变量。

const{nameOfRestaurant:name='PizzaHut',menu=[]}=restaurant;//Letsassumethattherestaurantobjecthasnopropertywithname'nameOfRestaurant',//Inthiscasethenamebecomes'PizzaHut'.//Ontheotherhandthereisnomenupropertysomenuisassignedwithemptyarray.变异值

在使用对象解构来改变值时，我们应该小心花括号，因为 javascript 会在遇到开放花括号时立即期望代码块。