JavaScript 解构赋值

解构赋值是JavaScript中的一种表达式，允许从数组中解压值或从对象中解雇属性，将数据提取到专用变量中，可以从数组、对象、嵌套对象中提取数据，并将其分配给变量。在解构赋值中，左侧定义了从资源变量中应解压的值。通常，数组的提取实现如下所示:
示例:

<script> 
var names = ["alpha", "beta", "gamma", "delta"]; 
 
var firstName = names[0]; 
var secondName = names[1]; 
 
console.log(firstName);//"alpha" 
console.log(secondName);//"beta" 
</script>

输出：

alpha
beta

语法：

数组解构：

var x, y;
[x, y] = [10, 20];
console.log(x); // 10
console.log(y); // 20

或者

[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log(x); // 10
console.log(y); // 20
console.log(restof); // [30, 40, 50]

对象解构：

({ x, y} = { x: 10, y: 20 });
console.log(x); // 10
console.log(y); // 20

或者

({x, y, ...restof} = {x: 10, y: 20, m: 30, n: 40});
console.log(x); // 10
console.log(y); // 20
console.log(restof); // {m: 30, n: 40}

数组解构： 使用JavaScript中的解构赋值可以在数组中实现多种情况，下面列出了所有示例。

示例1： 使用 解构赋值 可以用以下实现方式进行相同的提取。

<script> 
var names = ["alpha", "beta", "gamma", "delta"]; 
var [firstName, secondName] = names; 
     
console.log(firstName);//"alpha" 
console.log(secondName);//"beta" 
 
//Both of the procedure are same 
var [firstName, secondName] = ["alpha", "beta", "gamma", "delta"]; 
         
console.log(firstName);//"alpha" 
console.log(secondName);//"beta 
</script>

输出：

alpha
beta
alpha
beta

示例2： 数组元素还可以使用逗号分隔符跳过。一条逗号可以用来跳过一个数组元素。传播运算符和数组解构之间的一个关键区别是，传播运算符将所有数组元素解包成逗号分隔的列表，不允许我们选择要分配给变量的元素。要跳过整个数组，可以使用逗号的个数，因为有一定数量的数组元素。

<script> 
var [firstName,,thirdName] = ["alpha", "beta", "gamma", "delta"]; 
         
console.log(firstName);//"alpha" 
console.log(thirdName);//"gamma" 
</script>

输出：

alpha
gamma

示例3： 为了将一些数组元素分配给变量，而将其余的数组元素仅分配给一个变量，可以使用 rest运算符（…） 来实现，如下所示。但是rest运算符的一个限制是它只能正确地与最后一个元素一起使用，即无法得到一个子数组，留下数组中的最后一个元素。

<script> 
var [firstName,,...lastName] = ["alpha", "beta", "gamma", "delta"]; 
         
console.log(firstName);//"alpha" 
console.log(lastName);//"gamma, delta" 
</script>

输出：

alpha
  0: "gamma"
1: "delta"

示例 4： 值也可以使用以下的解构赋值来进行交换：

<script> 
var [firstName, lastName] = ["alpha", "beta", "gamma", "delta"]; 
 
console.log(firstName);//"alpha" 
console.log(secondName);//"beta" 
 
//After swapping 
[firstName, secondName] = [secondName, firstName] 
     
console.log(firstName);//"beta" 
console.log(secondName);//"alpha" 
</script>

输出:

alpha
beta
beta
alpha

示例5： 数据也可以从函数返回的数组中提取。使用解构赋值的一个优点是在函数中不需要操作整个对象，只需将所需字段复制到函数内部。

<script> 
function NamesList() { 
        return ["alpha", "beta", "gamma", "delta"] 
    } 
var[firstName, secondName] = NamesList(); 
 
console.log(firstName);//"alpha" 
console.log(secondName);//"beta" 
</script>

输出：

alpha
beta

示例 6： 在 ES5 中，从对象中赋值给变量 的实现方式是

<script> 
var marks = {x: 21, y: -34, z: 47 }; 
 
var x = marks.x; // x = 21 
var y = marks.y; // y = -34 
var z = marks.z; // z = 47 
 
console.log(x); 
console.log(y); 
console.log(z); 
</script>

输出：

21
-34
47

示例 7: 使用解构赋值的ES6中的上述实现是。

<script> 
var marks = {x: 21, y: -34, z: 47 }; 
 
const { x, y, z } = marks; // x = 21, y = -34, z = 47 
 
 
console.log(x); 
console.log(y); 
console.log(z); 
</script>

输出：

21
-34
47

对象解构：

示例1： 使用解构语法也可以对嵌套对象进行解构。

<script> 
const marks = { 
section1: { alpha: 15, beta: 16}, 
section2: { alpha: -31, beta: 19 } 
}; 
const { section1 : { alpha: alpha1, beta: beta1 }} = marks; 
console.log(alpha1, beta1); // 15, 16 
 
</script>

输出：

15 16

示例2: 嵌套对象也可以解构

let obj = {
    name: "GFG",
    add : {
        country: "India",
        state : {
            code : "JS",
            pincode:"820800",
            article:{
              topic : "destructuring"
            }
        }
    }
}
 
let {name} = obj;
console.log(name)
 
let {add:{country:abcd}} = obj
console.log(abcd)
 
let {add:{state:{code:cd}}} = obj
console.log(cd)
 
let {add:{state:{article:{topic:ef}}}} = obj
console.log(ef);

输出: