解构 {name,age}=obj
1. 数组解构
数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法，如下代码所示：
<script>javascript">// 普通的数组let arr = [1, 2, 3];// 批量声明变量 a b c// 同时将数组单元值 1 2 3 依次赋值给变量 a b clet [a, b, c] = arr;console.log(a); // 1console.log(b); // 2console.log(c); // 3
</script>
用剩余参数解决
总结：
-
赋值运算符
=左侧的[]用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量 -
变量的顺序对应数组单元值的位置依次进行赋值操作
-
变量的数量大于单元值数量时，多余的变量将被赋值为
undefined -
变量的数量小于单元值数量时，可以通过
...获取剩余单元值，但只能置于最末位
-
允许初始化变量的默认值，且只有单元值为
undefined时默认值才会生效
6. 按需导入，忽略某些返回值
7. 多维数组的结构
注：支持多维解构赋值，比较复杂后续有应用需求时再进一步分析
补充：js前面必须加分号的两种情况
-
立即执行函数
-
数组解构
-
[1,2,3].map
2. 对象解构
对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法，如下代码所示：
- 基本用法
<script>javascript">// 普通对象const user = {name: "小明",age: 18,};// 批量声明变量 name age// 同时将数组单元值 小明 18 依次赋值给变量 name ageconst { name, age } = user;console.log(name); // 小明console.log(age); // 18
</script>
注意：对象解构可以顺序不一致
const user = {nameOld: "小明",ageOld: 18,};// 可以顺序不一致const { ageOld: age, nameOld: name } = user;console.log(name); // 小明console.log(age); // 18
- 对象解构的变量名可以重新改名
旧变量名：新变量名
const obj1 = {name111: "slx",age1111: 12,
};const { name111: name, age111: age } = obj1;
console.log("name", name);
console.log("age", age);- 数组对象解构
4. 多级解构
总结：
- 赋值运算符
=左侧的{}用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量 - 对象属性的值将被赋值给与属性名相同的变量
- 对象中找不到与变量名一致的属性时变量值为
undefined - 允许初始化变量的默认值，属性不存在或单元值为
undefined时默认值才会生效
注：支持多维解构赋值
<body><script>javascript">// 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// console.log(data)// 需求2： 上面msg是后台传递过来的数据，我们需要把data选出当做参数传递给 函数// const { data } = msg// msg 虽然很多属性，但是我们利用解构只要 data值function render({ data }) {// const { data } = arr// 我们只要 data 数据// 内部处理console.log(data);}render(msg);// 需求3， 为了防止msg里面的data名字混淆，要求渲染函数里面的数据名改为 myDatafunction render({ data: myData }) {// 要求将 获取过来的 data数据 更名为 myData// 内部处理console.log(myData);}render(msg);</script>
</body>
展开 …obj/arr
使用场景1:合并对象
const obj1 = {name: "slx",age: 11,
};const obj2 = {clsss: "jk",sex: "f",name: "dddd",
};const obj3 = { ...obj1, ...obj2 };
console.log("obj3", obj3);
使用场景2：合并数组
const arr1 = [1, 2, 3, 4];
const arr2 = [5, 6, 7];
console.log([...arr1, ...arr2]);
使用场景3: 数组求最大值
const arr = [1, 2, 3, 4];
console.log(Math.max(...arr)); // 也就是...arr ==== 1,2,3,4// 错误写法：
console.log(Math.max(arr)); // 不能直接对数组求最大值
例子：黑马P111
从res中解构data,再从data中解构base64和key
综合使用
const obj = { name: "slx", age: 22, sex: "w" };const { name, ...newobj } = obj;
console.log("name", name);
console.log("newobj", newobj);
