解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值，分为数组解构、对象解构两大类型。
一、数组解构
数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法，如下代码所示：
<script> // 普通的数组 let arr = [1, 2, 3] // 批量声明变量 a b c // 同时将数组单元值 1 2 3 依次赋值给变量 a b c let [a, b, c] = arr console.log(a); // 1 console.log(b); // 2 console.log(c); // 3 // 应用:交换2个变量的值 let a = 1 let b = 2; [b, a] = [a, b] console.log(a, b) //2,1 </script>
总结：
- 赋值运算符 = 左侧的 [ ] 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量
- 变量的顺序对应数组单元值的位置依次进行赋值操作
- 变量的数量大于单元值数量时，多余的变量将被赋值为 undefined
- 变量的数量小于单元值数量时，可以通过 ... 获取剩余单元值，但只能置于最末位
- 允许初始化变量的默认值，且只有单元值为 undefined 时默认值才会生效
注：支持多维解构赋值，比较复杂后续有应用需求时再进一步分析
// const arr = [1, 2, [3, 4]] // console.log(arr[0]) // 1 // console.log(arr[1]) // 2 // console.log(arr[2]) // [3,4] // console.log(arr[2][0]) // 3 // 多维数组解构 // const arr = [1, 2, [3, 4]] // const [a, b, c] = [1, 2, [3, 4]] // console.log(a) // 1 // console.log(b) // 2 // console.log(c) // [3,4] const [a, b, [c, d]] = [1, 2, [3, 4]] console.log(a) // 1 console.log(b) // 2 console.log(c) // 3 console.log(d) // 4
二、对象解构
象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法，如下代码所示：
<script> // 普通对象 const user = { name: "小明", age: 18 }; //对象解构 // 批量声明变量 name age // 同时将数组单元值 小明 18 依次赋值给变量 name age const {name, age} = user //相当于 const name=user.name const age=user.age //变量名必须和属性名相同 console.log(name) // 小明 console.log(age) // 18 //如果遇到变量名和原有的变量名冲突时，可以修改变量名 // 对象解构的变量名 可以重新改名 旧变量名: 新变量名 // const { uname: username, age } = { uname: '小明', age: 18 } // console.log(username) // 小明 // console.log(age) // 18 </script>
总结：
- 赋值运算符 = 左侧的 { } 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量
- 对象属性的值将被赋值给与属性名相同的变量
- 可以从一个对象中提取变量并同时修改新的变量名 （变量：新变量名）
- 对象中找不到与变量名一致的属性时变量值为 undefined
- 允许初始化变量的默认值，属性不存在或单元值为 undefined 时默认值才会生效
多级对象结构
<script> // const pig = { // name: '佩奇', // family: { // mother: '猪妈妈', // father: '猪爸爸', // sister: '乔治' // }, // age: 6 // } // // 多级对象解构 // const { name, family: { mother, father, sister } } = pig // console.log(name) // console.log(mother) // console.log(father) // console.log(sister) const person = [ { name: '佩奇', family: { mother: '猪妈妈', father: '猪爸爸', sister: '乔治' }, age: 6 } ] const [{ name, family: { mother, father, sister } }] = person console.log(name) console.log(mother) console.log(father) console.log(sister) </script>
应用：对象解构时，我们可以只选取自己想要的
<script> // 1. 这是后台传递过来的数据 const msg = { "code": 200, "msg": "获取新闻列表成功", "data": [ { "id": 1, "title": "5G商用自己，三大运用商收入下降", "count": 58 }, { "id": 2, "title": "国际媒体头条速览", "count": 56 }, { "id": 3, "title": "乌克兰和俄罗斯持续冲突", "count": 1669 }, ] } // 需求1： 请将以上msg对象 采用对象解构的方式 只选出 data 方便后面使用渲染页面 const { data } = msg //这样就只选出了data console.log(data) </script>
好了，本文就到这里吧，点个关注再走嘛~
