Javascript 简明教程
JavaScript - Destructuring Assignment
Destructuring Assignment
在 JavaScript 中， destructuring assignment 是一个表达式，它允许我们从数组或对象中解包值并将其存储在单独的变量中。这是一种将数组值或对象属性分配给变量的技术。
In JavaScript, the destructuring assignment is an expression that allows us to unpack the values from the arrays or objects and store them in individual variables. It is a technique to assign array values or object properties to the variables.
解构赋值语法在 ECMAScript 6 (ES6) 中引入。在 ES6 之前，开发人员会手动解包对象属性，如下面示例所示。
The destructuring assignment syntax is introduced in ECMAScript 6 (ES6). Before ES6, developers were unpacking the object properties manually as shown in the example below.
Array unpacking before ES6
在下面的示例中，“arr”数组包含水果名称。之后，我们创建了不同的变量并将数组元素分配给变量。
In the example below, the 'arr' array contains the fruit names. After that, we created different variables and assigned array elements to the variables.
<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 行代码？
The above code will work if the array doesn’t contain the dynamic number of elements. What if the array contains 20+ elements? Will you write 20 lines of the code?
这里解构赋值的概念就发挥作用了。
Here the concept of the destructuring assignment comes into the picture.
Array Destructuring Assignment
您可以按照以下语法使用解构赋值来解包数组元素。
You can follow the syntax below to use destructuring assignment to unpack array elements.
const [var1, var2, var3] = arr;在上述语法中，“arr”是一个数组。var1、var2 和 var3 是用于存储数组元素的变量。您还可以类似地解包对象。
In the above syntax, 'arr' is an array. The var1, var2, and var3 are variables to store array elements. You can also similarly unpack the objects.
Example
下面的示例实现了与上述示例相同的逻辑。在这里，我们使用了解构赋值来解包数组元素。代码给出的输出与上一个示例相同。
The below example implements the same logic as the above example. Here, we have used the destructuring assignment to unpack the array elements. The code gives the same output as the previous example.
<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: WatermelonExample: Nested Array Destructuring
在下面的示例中，我们创建了一个嵌套数组。要访问这些元素，我们使用了嵌套数组解构赋值。尝试以下示例 –
In the example below, we created a nested array. To access these elements, we used nested array destructuring assignment. Try the following example –
<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
WatermelonObject Destructuring Assignment
您可以按照以下语法使用解构赋值来解包对象元素。
You can follow the syntax below to use destructuring assignment to unpack object elements.
const {prop1, prop2, prop3} = obj;在上述语法中，“obj”是一个对象。prop1、prop2 和 prop3 是用于存储对象属性的变量。
In the above syntax, 'obj' is an object. The prop1, prop2, and prop3 are variables to store object properties.
Example
下面的示例实现了与数组解构赋值示例中相同的逻辑。在这里，我们使用了解构赋值来解包对象元素。
The below example implements the same logic as in the example of array destructuring assignment. Here, we have used the destructuring assignment to unpack the object elements.
<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: 100Example: Nested Object Destructuring
在下面的示例中，我们定义了一个名为 person 的嵌套对象，其中包含两个属性 age 和 name。name 属性包含两个属性，分别为 fName 和 lName。我们使用嵌套解构来访问这些属性。
In the example below, we defined a nested object called person with two properties age and name. The name property contains two properties called fName and lName. We access these properties using nested destructuring.
<html>
<body>
<div id = "output"> </div>
<script>
const person = {
age: 26,
name: {
fName: "John",
lName: "Doe"
}
}
// nested destructuring
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