携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第31天，点击查看活动详情
今天之前的我负责的模块又双叒叕出了个问题......不过问题也很快锁定，就是因为昨天突发问题后，我改了下代码，改了没改全，只改了某一块地方，另一块涉及到相关的，没改过来，就没有应用成功。前后端都是的，当时因为某个地方去改了代码，一心想着实现那个功能，把一些变量类型都改掉了，然后另一个地方在引用该变量时，就没引用好，导致之前能正常使用的功能崩了(前端变量类型变量代码也没编译报错，所以第一时间也没发现)。不过还好问题解决了，还有个别地方是展示优化......改前端代码过程中，对于一些对象、数组的数据接收有一些收获，整理一下......
对象数据的获取
"data":{
"name": "陈冠希",
"age": "46",
"gender": "男"
}
如上例，如果后端返回给前端的数据是这样的，那么在前端代码中如果想要获取该对象中的指定数据，可以这么些：
//获取全部 key，即，"name","age","gender"
Object.keys(data);
//需要注意的是，这种方法获得的 key，会以数组的形式返回，即，["name","age","gender"]
//获取全部 value，即，"陈冠希","46","男"
Object.values(data);
//需要注意的是，这种方法获得的 values，会以数组的形式返回，即，["陈冠希","46","男"]
数组内数据的获取
"arr":["吴彦祖","彭于晏","胡歌"]
如果后端返回给前端的是一个数据，则在前端中如果想要遍历这个数组，可以如下这样写：
arr.forEach(item => {
console.log(item);
})
结果：
吴彦祖
彭于晏
胡歌
对象中包含数组/数组中包含对象
以上是比较基础、比较简单的情况，真正开发中，返回的数据可能会复杂一点，两者之间互相包含，但无论怎么包含，拆解开来看，还是对象的获取、数组的遍历......
案例1
"data":{
"陈冠希":["cgx","46","男"],
"吴彦祖":["wyz","47","男"],
"彭于晏":["pyy","33","男"]
}
像上面这种，如果想要获取各种数据，看着比较麻烦，但拆开来看，其实最基本的还是对象的获取、数组的遍历：
//获取 "33"
//拆开来看
//首先先获取到所有的 values
Object.values(data);
//结果 [["cgx","46","男"],["wyz","47","男"],["pyy","33","男"]]
//可以看到，"33" 在下标为 2 的子数组中下标为 1 的位置
//综上，获取 "33" 可以直接写成
Object.values(data)[2][1];
案例2
"data":{
"cgx":[
{
"age": "46",
"symbol":["photo","clot","singer"]
}
],
"wyz":[
{
"age","47","symbol":["model","actor"]
}
],
"pyy":[
{
"age":"33","symbol":["actor","athlete"]
}
]
}
像上面这个就又复杂了一点，但还是那句话，拆开看：
//获取 "cgx" 的所有 symbol
//可以先获取所有的 values
let arr = Object.values(data)
//结果 [[{"age": "46", "symbol":["photo","clot","singer"]}], [{"age","47","symbol":["model","actor"]}], [{"age":"33","symbol":["actor","athlete"]}]]
//其中，arr[0] 就是 [{"age": "46", "symbol":["photo","clot","singer"]}]
//再获取所有 values
Object.values(arr[0])
//结果 ["46", ["photo","clot","singer"]]
//其中 下表为 1 的就是 symbol 对应的数组的内容，可以遍历输出
Object.values(arr[0])[1].forEach(item => {
console.log(item);
})
结果：
photo
clot
singer
怎么写着写着，感觉，好像也不会碰到这种情况.....不过最后这种情况，我确实遇到了，而且就是我自己后端返回的数据，就是长这样......怎么说呢，万一碰到呢，是吧，多会一点知识不是坏事 :)
希望本文能够帮到你，如有错误，望指正！
我向你敬礼啊，Salute！
