对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法
一：基本语法
const obj = {uname: '微木',age: 10}const { uname, age } = objconsole.log(uname, age);- 对象解构的变量名要与解构对象中属性名相同，否则就会返回undefined
- 解构的变量名不能与当前作用域中的变量名冲突
二：对象解构细节：
1 解构对象的变量名修改
解构对象的变量名可以进行修改，语法如下：旧变量名：新变量名
const obj = {uname: '微木',age: 10}const { uname: username, age } = objconsole.log(username, age);2 数组对象解构
const pig = [{name: '佩奇', age: 18}]const [{ name, age }] = pigconsole.log(name, age);3 多级对象解构
const pig = {name: '佩奇',family: {mother: '猪妈妈',father: '猪爸爸'},age: 18}const { name, family: { mother, father }, age } = pig
//解构中，如果不标明是family对象，则会报错4 对象数组解构
const msg = { data: [1, 2, 3, 4] }const { data } = msg简单总结，就是一一对应——源数据写大括号解构时就写大括号，源数据填写中括号，解构时就填写中括号；重要的是变量名对应、以及变量名修改问题
三：练习题
练习题的需求在script标签中，同时需求的详要求在代码中
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><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// 需求2： 上面msg是后台传递过来的数据，我们需要把data选出当做参数传递给 函数// function render({ data }) {// // 我们只要 data 数据// // 内部处理// console.log(data);// }// render(msg)// 等价于function render(arr) {const { data } = arrconsole.log(data);}render(msg)//将msg对象作为参数传递给render函数的同时解构了msg中的data属性，从而可以简化代码// 需求3， 为了防止msg里面的data名字混淆，要求渲染函数里面的数据名改为 myDatafunction render({ data: myData }) {// 要求将 获取过来的 data数据 更名为 myData// 内部处理console.log(myData);}render(msg)</script>
</body></html> 字节顺序:网络字节序与IPv4)
)
