网站手机版排名seo,海口小程序制作公司,福建省建设银行网站,中国城乡建设局和住建局官网对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法
一#xff1a;基本语法 const obj {uname: 微木,age: 10}const { uname, age } objconsole.log(uname, age);
对象解构的变量名要与解构对象中属性名相同#xff0c;否则就会返回undefined解构的变量名不能…对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法
一基本语法 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 langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyscript// 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
