JavaScript 花括号在 var { … } = … 语句中有什么用途

解构赋值 允许我们将数组或对象的属性分配给一堆变量，这样做有时非常方便且简洁。考虑以下说明。下面提到的两种方法都是正确的并产生相同的结果。

不使用解构赋值：

var array = [1, 20, 40];

var first = array[0]
var second = array[1]
var third = arr[2]

使用解构赋值

var array = [1, 20, 40];

var [first, second, third] = array;

对象解构 可以对JavaScript对象进行解构。在赋值运算符的左边，有一个变量模式，用于存储对象的属性。变量的名称必须与对象中定义的名称相同。让我们从以下示例中看一下这个概念。

注意： 花括号“{ }”用于解构JavaScript对象的属性。

示例：

<script> 
    let example_object = { 
        name: "Object", 
        platform: "GeeksForGeeks", 
        number: 100 
    }; 
          
    let {name, platform, number} = example_object; 
          
    console.log("Name: ", name); 
    console.log("Platform: ", platform); 
    console.log("Number: ", number); 
</script>

输出：

Name:  Object
Platform:  GeeksForGeeks
Number:  100

如果我们希望在对象中定义的变量应该被分配给其他名称的变量，那么我们可以使用冒号来设置。

语法：

{sourceProperty : targetVariable}

示例：

<script> 
    let cuboid = { 
        width: 100, 
        height: 50, 
        depth: 10 
    }; 
          
    // width -> w 
    // height -> h 
    // depth -> d 
    let {width:w, height:h, depth:d} = cuboid; 
          
    console.log("Width: ", w); 
    console.log("Height:", h); 
    console.log("Depth: ", d); 
</script>

输出：

Width:  100
Height: 50
Depth:  10

数组解构： 数组的元素也可以以相同的方式进行解构。在JavaScript中，解构赋值可用于将数组的值分配给一组不同的变量。

注意： 方括号‘[ ]’用于解构数组元素。

示例：

<script> 
    var arr = [1, 2, 3]; 
          
    var [arr_1, arr_2, arr_3] = arr; 
          
    console.log("First Element: ", arr_1); 
    console.log("Second Element: ", arr_2); 
    console.log("Third Element: ", arr_3); 
</script>

输出：

First Element:  1
Second Element:  2
Third Element:  3