本文主要是介绍【JS重点12】解构赋值-对象解构，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法
一：基本语法
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>这篇关于【JS重点12】解构赋值-对象解构的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
