深入淺出JS解構賦值

一、基礎概念

JS解構賦值是一種通過解構對象或數組的方式，來同時給多個變量賦值的一種語法。它是在ES6中新增的特性。

它的基本語法是：“let {a,b} = {a:1, b:2}”，其中“{a,b}”就是解構語法，它表示將對象里的屬性“a”和“b”賦值給對應的變量“a”和“b”。

除了對象之外，數組也可以通過解構語法來進行賦值，它的語法是：“let [a,b] = [1,2]”,其中“[a,b]”就是解構語法，它表示將數組元素的值“1”和“2”分別賦值給對應的變量“a”和“b”。

// 對象解構示例
let obj = {name:'小明',age:18}
let {name,age} = obj
console.log(name) // 小明
console.log(age) // 18

// 數組解構示例
let arr = [1,2,3]
let [a,b,c] = arr
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

二、默認值的使用

JS解構賦值還支持使用默認值，這樣當變量沒有值或者值為undefined時，就會賦上默認值。

// 使用默認值
let [a=1,b=2,c=3] = [1,undefined,null]
console.log(a) // 1
console.log(b) // 2
console.log(c) // null

注意：

當解構後的值為null時，不會使用默認值。另外，在對象解構中使用默認值的寫法是“let {a=’hello’,b=’world’} = {a:’hi’, c:’goodbye’}”，如果解構對象中不存在要解構的屬性，那麼使用的就是默認值。

三、重命名

JS解構賦值還支持重命名的功能，即在解構的同時將屬性或變量名進行重命名。這樣可以避免變量名重複或者取一個更好的變量名。

// 重命名
let {x:y} = {x:1}
console.log(y) // 1

從上面的例子可以看出，我們將解構對象的屬性“x”的值賦給了變量“y”，實現了重命名的效果。

四、嵌套解構

JS解構賦值還支持嵌套解構，即在解構對象中存在對象或數組的情況下，也可以使用解構賦值。

// 嵌套解構
let obj = {name:'小明',score:{math:90,english:80}}
let {name,score:{math,english}} = obj
console.log(name) // 小明
console.log(math) // 90
console.log(english) // 80

從上面的例子可以看到，我們成功地從一個嵌套的對象裡面解構出了它的屬性值。

五、應用場景

1、函數參數的解構賦值

JS解構賦值可以用來對函數參數進行解構賦值，這樣可以簡化函數的調用過程，並且讓函數的意圖更加明顯。

// 函數參數的解構賦值
function printInfo({name,age}){
    console.log(`我的名字是${name}，今年${age}歲`)
}
printInfo({name:'小李',age:20}) // 我的名字是小李，今年20歲

2、交換變量的值

JS解構賦值可以用來交換兩個變量的值，而不需要藉助第三個變量。

// 交換變量的值
let a = 1
let b = 2
[a,b] = [b,a]
console.log(a) // 2
console.log(b) // 1

3、提取對象中的多個屬性值

JS解構賦值可以用來從一個對象中提取多個屬性值，並將它們賦值給對應的變量。

// 提取對象中的多個屬性值
let obj = {name:'小明',age:18,gender:'男',score:90}
let {name,age,score} = obj
console.log(name,age,score) // 小明 18 90

4、函數返回值的解構

JS解構賦值可以用來對函數返回值進行解構，這樣可以讓函數返回值的意圖更加明顯。

// 函數返回值的解構
function getScore(){
    return {math:90,english:80}
}
let {math,english} = getScore()
console.log(math,english) // 90 80

六、總結

JS解構賦值是一種簡潔、靈活的變量賦值方式，它能夠以一種可讀性強的方式讓變量賦值更加直觀明了。我們在實際開發中可以結合函數參數、交換變量值、提取對象屬性值等場景來使用JS解構賦值。