JavaScript中 ES6变量的结构赋值

下面是关于“JavaScript中 ES6变量的结构赋值”的完整攻略。

什么是ES6变量的结构赋值

ES6中引入了一种新的变量赋值方式，叫做“结构赋值”（Destructuring Assignment）。结构赋值可以让我们方便地从数组和对象中提取值，然后赋值给变量。

数组结构赋值

数组结构赋值是指对于数组中的每个元素，通过相应位置上的变量名进行访问和取值赋给变量的操作。语法形式为：

let [a, b, c] = [1, 2, 3]
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

上面的代码中，let [a, b, c] = [1, 2, 3]表示将数组[1, 2, 3]中第一个元素1赋值给变量a，第二个元素2赋值给变量b，第三个元素3赋值给变量c。此时a的值为1，b的值为2，c的值为3。

除了基本的解构赋值，还可以使用嵌套解构语法对数据进行复杂的解构操作。例如：

let [a, [b, c]] = [1, [2, 3]]
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

上面的代码中，let [a, [b, c]] = [1, [2, 3]]表示将数组[1, [2, 3]]中第一个元素1赋值给变量a，第二个元素[2, 3]中第一个元素2赋值给变量b，第二个元素3赋值给变量c。此时a的值为1，b的值为2，c的值为3。

同时，还可以通过使用默认值来为没有赋值的变量提供默认值：

let [a, b = 2, c = 3] = [1]
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

上面的代码中，let [a, b = 2, c = 3] = [1]表示将数组[1]中第一个元素1赋值给变量a，由于数组中没有第二个元素，因此变量b使用默认值2，变量c使用默认值3。此时a的值为1，b的值为2，c的值为3。

对象结构赋值

对象结构赋值是指对于对象中的每个属性，通过相应属性名进行访问和取值赋给变量的操作。语法形式为：

let {prop1, prop2} = {prop1: "Hello", prop2: "World"}
console.log(prop1) // "Hello"
console.log(prop2) // "World"

上面的代码中，let {prop1, prop2} = {prop1: "Hello", prop2: "World"}表示将对象{prop1: "Hello", prop2: "World"}中的prop1属性值“Hello”赋值给变量prop1，prop2属性值“World”赋值给变量prop2。此时prop1的值为“Hello”，prop2的值为“World”。

同样，对象结构赋值也支持嵌套语法和默认值：

let {prop1: {prop2: a, prop3: b = "Default"}} = {prop1: {prop2: "Hello"}}
console.log(a) // "Hello"
console.log(b) // "Default"

上面的代码中，let {prop1: {prop2: a, prop3: b = "Default"}} = {prop1: {prop2: "Hello"}}表示将对象{prop1: {prop2: "Hello"}}中的prop1属性值（也是一个对象）中的prop2属性值“Hello”赋值给变量a，由于prop1属性没有prop3属性，因此b使用默认值“Default”。此时a的值为“Hello”，b的值为“Default”。

总结

通过本文的介绍，我们了解到了ES6中的变量结构赋值。数组结构赋值和对象结构赋值，为我们操作数据提供了更加方便、简洁、优雅的方式。在实际的代码编写中，我们可以灵活地使用变量结构赋值，来提高我们的编码效率。