学习javascript中对解构赋值的理解

javascript学习——ES6中的解构赋值

文章目录 前言一、什么是解构赋值二、代码案例1.数组解构赋值2.对象解构赋值3.字符串解构赋值4.特殊情况——JSON字符串解构赋值 总结

---

前言

这是自学js对解构赋值的理解，做一次记录吧

---

提示：以下是本篇文章正文内容，下面案例仅供参考

一、什么是解构赋值

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。
解构赋值是对赋值运算符的扩展。
他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。
在解构中，有下面两部分参与：
解构的源，解构赋值表达式的右边部分。
解构的目标，解构赋值表达式的左边部分。

二、代码案例 1.数组解构赋值

代码如下（示例）：

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

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

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

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

数组的解构赋值其实是按照左右两边的模式去匹配对应的值
如果左边的模式存在但右边不存在，则会是undefined
如果左边的模式存在且右边存在，则会取到右边的值

2.对象解构赋值

代码如下（示例）：

 let obj = {
     name: '张三',
     age: 18
 }
 let { age, name } = obj
 let { age: a, name: str } = obj
 console.log(name, age) //张三，18
 console.log(str, age) //张三，18

对象的解构赋值其实是按照键去匹配对应的值
在左边键名后用冒号可以重新赋给一个自定义的变量
对象解构赋值的时候也可以给默认值

---

3.字符串解构赋值

代码如下（示例）：

 let str = 'HelloWorld'
 let [a, b, c, d, e, f, g, h, i, j] = str
 console.log(a, b, c, d, e, f, g, h, i, j) //H e l l o W o r l d

字符串的解构赋值与数组的解构赋值类似

---

---

4.特殊情况——JSON字符串解构赋值

有时候我们会需要对网络请求获取的数据做解构赋值类似的 *** 作获取属性，但此时我们不能直接当作字符串解构赋值

 let jsonStr = '{"name":"张三","age":"18"}'
 let { name, age } = JSON.parse(jsonStr)
 console.log(name, age) //张三 18

JSON字符串的解构赋值应该利用JSON.parse方法转换为类似于对象的解构赋值

总结

解构赋值给我们带来了很多便利，很多时候我们还可以直接在函数参数那儿进行解构赋值简化 *** 作。具体的使用场景需要具体分析，我也在继续努力学习中，有写得不对或不得当的地方欢迎批评指出。