JavaScript - 解构赋值
解构赋值
在 JavaScript 中，解构赋值是一种表达式，它允许我们从数组或对象中解包值并将其存储在单独的变量中。它是一种将数组值或对象属性赋值给变量的技术。
解构赋值语法是在 ECMAScript 6 (ES6) 中引入的。在 ES6 之前，开发人员需要手动解包对象属性，如下例所示。
ES6 之前的数组解包
在下面的示例中，"arr"数组包含水果名称。之后，我们创建了不同的变量，并将数组元素赋值给这些变量。
<html>
<body>
<p id = "output"> </p>
<script>
const arr = ["Apple", "Banana", "Watermelon"];
const fruit1 = arr[0];
const fruit2 = arr[1];
const fruit3 = arr[2];
document.getElementById("output").innerHTML =
"fruit1: " + fruit1 + "<br>" +
"fruit2: " + fruit2 + "<br>" +
"fruit3: " + fruit3;
</script>
</body>
</html>
输出
fruit1: Apple fruit2: Banana fruit3: Watermelon
如果数组不包含动态数量的元素，上述代码可以正常工作。但如果数组包含 20 个以上的元素怎么办?你会写 20 行代码吗?
这里就涉及到解构赋值的概念了。
数组解构赋值
你可以按照以下语法使用解构赋值来解包数组元素。
const [var1, var2, var3] = arr;
在上述语法中，"arr"是一个数组。var1、var2 和 var3 是用于存储数组元素的变量。你也可以类似地解包对象。
示例
以下示例实现了与上述示例相同的逻辑。这里，我们使用了解构赋值来解包数组元素。代码的输出与上例相同。
<html>
<body>
<p id = "output"> </p>
<script>
const arr = ["Apple", "Banana", "Watermelon"];
const [fruit1, fruit2, fruit3] = arr;
document.getElementById("output").innerHTML =
"fruit1: " + fruit1 + "<br>" +
"fruit2: " + fruit2 + "<br>" +
"fruit3: " + fruit3;
</script>
</body>
</html>
输出
fruit1: Apple fruit2: Banana fruit3: Watermelon
示例:嵌套数组解构
在下面的示例中，我们创建了一个嵌套数组。为了访问这些元素，我们使用了嵌套数组解构赋值。请尝试以下示例
<html>
<body>
<p id = "output"> </p>
<script>
const arr = ["Apple", ["Banana", "Watermelon"]];
const [x, [y, z]] = arr;
document.getElementById("output").innerHTML =
x + "<br>" +
y + "<br>" +
z ;
</script>
</body>
</html>
输出
Apple Banana Watermelon
对象解构赋值
您可以按照以下语法使用解构赋值来解包对象元素。
const {prop1, prop2, prop3} = obj;
在上述语法中，"obj"是一个对象。prop1、prop2 和 prop3 是用于存储对象属性的变量。
示例
以下示例实现了与数组解构赋值示例相同的逻辑。在这里，我们使用解构赋值来解包对象元素。
<html>
<body>
<div id = "output1"> </div>
<div id = "output2"> </div>
<script>
const fruit = {
name: "Apple",
price: 100,
}
const {name, price} = fruit;
document.getElementById("output1").innerHTML = "fruit name: " + name;
document.getElementById("output2").innerHTML = "fruit price: " + price;
</script>
</body>
</html>
输出
fruit name: Apple fruit price: 100
示例:嵌套对象解构
在下面的示例中，我们定义了一个名为 person 的嵌套对象，它具有两个属性:age 和 name。name 属性包含两个属性:fName 和 lName。我们使用嵌套解构来访问这些属性。
<html>
<body>
<div id = "output"> </div>
<script>
const person = {
age: 26,
name: {
fName: "John",
lName: "Doe"
}
}
// 嵌套解构
const {age, name: {fName, lName}} = person;
document.getElementById("output").innerHTML =
"Person name: " + fName + " " + lName + "<br>"+
"Person age: " + age;
</script>
</body>
</html>
输出
Person name: John Doe Person age: 26
下一步是什么?
在接下来的章节中，我们将详细学习以下概念。
数组解构 − 解包数组元素。
对象解构 − 解包对象属性。
嵌套解构 − 解包嵌套数组元素和嵌套对象。
