当前位置:网站首页>ES6 real case deconstruction (multidimensional array object) new case:
ES6 real case deconstruction (multidimensional array object) new case:
2022-07-19 05:12:00 【Create splendid -- hand in hand with you】
Obtained project data value :
const msg={
"code":200,
"msg":" Get the news list successfully ",
"data":[
{
"id":1,
"title":"5G Commercial own , The income of the three major operators fell ",
"count":58,
},
{
"id":2,
"title":" A quick look at international media headlines ",
"count":56,
},
{
"id":3,
"title":" Ukraine and Russia continue to conflict ",
"count":1669,
},
]
}
Through the real data above , Many friends will have questions , How to deconstruct this , Now we will give you a detailed explanation according to your needs .
// demand 1: Please send the above msg object Use object deconstruction Just choose data
// The rendering page is used after the aspect
// const {data} = msg
// console.log(data);
// It's worth it [{…}, {…}, {…}]
// demand 2: above msg 10. Data transferred from the background , We need to take data Select as a parameter to pass to the function
// The old way of writing it
// const {data} = msg
// function render(arr){
// // All we have to do is data data
// // Internal processing
// console.log(arr)
// }
// render(data)
// The output is [{…}, {…}, {…}]
// Now it is written as
// function render({data}){
// console.log(data)
// }
// render(msg)
// The result is [{…}, {…}, {…}]
// analysis :function render({data}) This is deconstructed while passing parameters
// Now the writing becomes more gradual It only needs data So we just need to deconstruct data that will do
// demand 3: To place msg Inside data Name confusion , The data name in the demand rendering function is changed to myData
// function render({data:myData}){
// // Demand will Get it data data Renamed myData
// // Internal processing
// console.log(myData)
// }
// render(msg)
// The printed result is [{…}, {…}, {…}]
// msg Although many properties , It only needs data, By deconstructing, we get the corresponding
边栏推荐
- STL容器——map的基本操作
- PAT乙级1017: A除以B
- 微信小程序5-基础加强(没写完)
- 学习C语言第7天
- 游玩数据获取与数据分析、数据挖掘 【2022.5.30】
- 一个问题的探讨
- 【Es6】详细解说Set ,Array的常用对象及其他方法(完整版)
- Two methods of obtaining URL parameters and various methods of obtaining location objects
- (精讲)Es6 剩余参数,ES6内置对象,模板字符串内容(详例宝典)及灵活运用项目的实战案例
- Interface parameters return encapsulated class result
猜你喜欢

The code of yolov5 model for pest identification in Title A of the 10th Teddy cup data mining challenge (has been run through, original works, continuously updated)

游玩数据获取与数据分析、数据挖掘 【2022.5.30】

百度地图 实现 热力图

NVIDIA GeForce Experience登录报错:验证程序加载失败,请检查您的浏览器设置,例如广告拦截程序(解决办法)

Harmonyos second training notes

uni-app 条件编译#ifdef #endif 兼容多个终端

About the current response, the method getoutputstream() has been called

Internship project 3- change owner

es6新增-对象部分
![[batch] batch delete intermediate folder - personal research script](/img/6d/699987559bc25998e635a403d9d52d.png)
[batch] batch delete intermediate folder - personal research script
随机推荐
Elment UI usage
实习项目3-更改所有者
【C语言—零基础第十一课】旋转大转盘之指针
Simply and quickly establish a pytorch environment yolov5 target detection model to run (super simple)
01_电影推荐(ContentBased)_物品画像
Class object automatic injection attribute operation tool
SQL statement learning
MD5 password encryption
LeetCode53. 最大子数组和
【C语言_学习_考试_复习第三课】ASCII码与C语言概述
决策树原理和案例应用-泰坦尼克号生存预测
热更新及其原理
【C语言—零基础_学习_复习_第四课】数据类型及其运算
获取URL参数的两种方法及location对象的各项获取方式
Applet cloud development upload pictures to cloud storage
【2022第十届‘泰迪杯’挑战赛】A题:害虫识别完整版(大致思路。详细过程和代码以及结果csv在压缩包中)
User - registration / login
【C语言_复习_学习第二课】什么是进制?进制之间应该如何转换
学习C语言第三天
Uni app conditional compilation ifdef ENDIF compatible with multiple terminals