大前端

前端学习之家-大前端

JS 将对象中某些键值对放在数组中

 一、背景:后端的接口是一个对象里包含许多的字段,我们要用到里面的一些字段对页面进行渲染,刚开始我在页面中罗列了许多结构相同的代码段(如下图),可能开发的时候比较容易(主要还是我懒),但是在后期维护以及页面的性能优化上都有很多不妥,所以决定优化一下,在页面获取到数据的时候就对数据进行一个处理,把需要的字段放在一个数组中,最后在页面直接v-if就解决了!

二、用到的知识点: 

Object.keys、Object.values:js 获取对象的key和value_sunshineTing2的博客-CSDN博客_js获取对象的key和value

findIndex:js find方法和findIndex方法_xkqbaiyuan的博客-CSDN博客

三、解决思路:

首先要明确,这里我们需要用到接口中字段的value,所以我们要将字段中的key与“发票类型”等名称绑定对应,在data中定义一个数组格式如下:

将对象中的key 和 value 获取出来,然后遍历我们定义的数组messageList,通过findindex来确定对象字段的key与数组对象中的key相等时的索引,再根据这个索引去的value中查找并赋值给数组messageList中的value,

 最后简化后就变成:

 

(是个小白,大佬们有更好的方法可以分享一下)

发表评论:

Copyright Your WebSite.Some Rights Reserved.