JavaScript有两个很棒的数据结构，可以帮助你写出简洁高效的代码。但处理它们有时会变得很混乱。
在这篇博客中，我将向你展示如何在JavaScript中处理数组和对象的析构。我们还将学习如何使用传播操作符。
让我们深入了解一下。
什么是JavaScript中的数组析构？
假设我们有一个包含五个数字的数组，像这样：
let array1 = [1, 2, 3, 4, 5]
包含五个数字的数组
为了从数组中获取元素，我们可以做一些事情，比如根据索引来获取数字：
array1[0];
array1[1];
array1[2];
array1[3];
array1[4];
获取数组元素
但是这种方法很老套，而且很笨重，有一种更好的方法--使用数组析构。它看起来像这样：
let [ indexOne, indexTwo, indexThree, indexFour, indexFive ] = array1;
使用数组解构
上面两种方法都会产生相同的结果：
现在，我们在数组中有五个元素，我们打印这些元素。 但是如果我们想在中间跳过一个元素呢？
let [ indexOne, indexTwo, , indexFour, indexFive ] = array1;
在这里，我们跳过了indexThird ，在indexTwo和indexFour之间有一个空位。
let [ indexOne, indexTwo, , indexFour, indexFive ] = array1;
console.log(indexOne);
console.log(indexTwo)
console.log(indexFour)
console.log(indexFive)
跳过第三个元素
你可以看到，我们没有得到第三个元素，因为我们已经把它设置为空。
什么是JavaScript中的对象重构？
这种析构对对象也很有效。让我给你举个例子。
let object = {
name: "Nishant",
age: 24,
salary: 200,
height: '20 meters',
weight: '70 KG'
}
一个JavaScript对象
假设我们想把这个对象的名字、工资和体重在控制台中打印出来：
console.log(object.name)
console.log(object.salary)
console.log(object.weight)
从对象中获取姓名、工资和体重
我们可以使用键来获取它们，这些键是姓名、工资和体重。
但是这段代码有时会变得难以理解。这时，解构就派上用场了。
let { name, salary, weight } = object;
console.log(name)
console.log(salary)
console.log(weight)
解构对象
而现在，我们可以直接记录姓名、工资和体重，而不是使用那种老方法：
如果对象中不存在值，我们也可以使用去结构化来设置默认值：
let object = {
name: "Nishant",
age: 24,
height: '20 meters',
weight: '70 KG'
}
let { name, salary, weight } = object;
console.log(name)
console.log(salary)
console.log(weight)
在这里，我们有名字和体重存在于对象中，但没有工资。
我们将得到一个未定义的工资值。
为了纠正这个问题，我们可以在解构对象时设置默认值。
let object = {
name: "Nishant",
age: 24,
height: '20 meters',
weight: '70 KG'
}
let { name, salary = 200, weight } = object;
console.log(name)
console.log(salary)
console.log(weight)
设置薪金的默认值
你可以看到，我们得到了200作为工资。这只在我们的对象中没有这个键，而我们想设置一个缺省值时才有效。
let object = {
name: "Nishant",
age: 24,
salary: 300,
height: '20 meters',
weight: '70 KG'
}
let { name, salary = 200, weight } = object;
console.log(name)
console.log(salary)
console.log(weight)
在对象中添加salary，你将得到300作为工资。
如何在函数中使用对象重构
假设我们有一个函数，将数组中的所有数据打印到控制台。
let object = {
name: "Nishant",
age: 24,
salary: 300,
height: '20 meters',
weight: '70 KG'
}
function printData(){
}
printData(object)
在控制台打印数据的函数
当函数被调用时，我们将对象作为一个参数传给它。
let object = {
name: "Nishant",
age: 24,
salary: 300,
height: '20 meters',
weight: '70 KG'
}
function printData(object){
console.log(object)
}
printData(object)
通常情况下，我们会做这样的事情--传递对象并在控制台中记录它。
但同样地，我们也可以使用去结构化来做同样的事情。
let object = {
name: "Nishant",
age: 24,
salary: 300,
height: '20 meters',
weight: '70 KG'
}
function printData({name, age, salary, height, weight}){
console.log(name, age, salary, height, weight)
}
printData(object)
在函数中使用去结构化
在这里，我们在函数参数中把对象去结构化为姓名、年龄、工资、身高和体重，并在同一行中打印所有内容。
你可以看到去结构化是如何使它变得如此容易理解的。
使用去结构化打印对象数据
让我们来看看最后一个例子。
function sample(a, b) {
return [a + b, a * b]
}
let example = sample(2, 5);
console.log(example)
两个数字相加和相乘的函数
我们这里有一个接受两个数字的函数。它返回一个数组，将它们相加和相乘，并将它们记录到控制台。
让我们在这里用去结构化来代替。
我们可以像这样把它分解成加法和乘法的变量。
let [addition, multiplication] = sample(2, 5);
console.log(addition)
console.log(multiplication)
使用去结构化
在输出中，你可以看到我们得到两个数字的加法 和乘法 。
什么是JavaScript中的扩展运算符？
展开的意思是展开或扩大。而JavaScript中的展开运算符是由三个点表示的。
这个扩展运算符有很多不同的用途。让我们逐一看看。
展开运算符的例子
假设我们有两个数组，我们想把它们合并起来。
let array1 = [1, 2, 3, 4, 5]
let array2 = [6, 7, 8, 9, 10]
let array3 = array1.concat(array2);
console.log(array3)
用concat方法合并两个数组
我们将得到两个数组的组合，即array1和array2。
但是有一个更简单的方法可以做到这一点。
let array1 = [1, 2, 3, 4, 5]
let array2 = [6, 7, 8, 9, 10]
let array3 = [...array1, ...array2]
console.log(array3)
用传播操作符合并两个数组
在这种情况下，我们使用传播操作符来合并两个数组。
你可以看到，我们将得到相同的输出。
让我们设想另一个用例，我们必须在数组2的元素之间插入数组1。
例如，我们想在数组1的第二和第三元素之间插入数组2 。
那么，我们如何做到这一点呢？我们可以这样做。
let array1 = [1, 2, 3, 4, 5]
let array2 = [6, 7, ...array1, 8, 9, 10]
console.log(array2);
在array2的7和8之间插入array1
你可以看到，我们得到数组1的元素在7和8之间。
现在，让我们用传播操作符把两个对象合并起来。
let object1 = {
firstName: "Nishant",
age: 24,
salary: 300,
}
let object2 = {
lastName: "Kumar",
height: '20 meters',
weight: '70 KG'
}
两个准备合并的对象
我们这里有两个对象。一个包含名字、年龄和工资。第二个对象包含lastName、身高和体重。
让我们把它们合并在一起：
let object1 = {
firstName: "Nishant",
age: 24,
salary: 300,
}
let object2 = {
lastName: "Kumar",
height: '20 meters',
weight: '70 KG'
}
let object3 = {...object1, ...object2}
console.log(object3);
将这两个对象合并为第三个对象
现在我们已经使用传播操作符合并了这两个对象，我们已经在控制台中记录了这个值：
合并以前的对象
你可以看到，我们得到的是两个对象的组合。
最后，我们还可以使用传播操作符将一个数组复制到另一个数组中。让我告诉你它是如何工作的：
let array1 = [1, 2, 3, 4, 5]
let array2 = [...array1]
console.log(array2);
将数组1复制到数组2中
在这里，我们使用传播操作符将数组1复制到数组2：
我们在控制台中记录数组2 ，并获得数组1的项目。
总结
就这样了，伙计们!在这篇文章中，我们了解了数组和对象的重构以及传播操作符。
如果你想补充学习，你也可以观看我在Youtube上拍摄的关于数组和对象析构以及扩散操作符的视频。
学习愉快
