深入浅出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解构赋值。