一、基础概念
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解构赋值。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/313015.html
微信扫一扫 
支付宝扫一扫 