JavaScript entries 方法小试牛刀 - js

最新推荐文章于 2024-06-12 10:16:34 发布
最新推荐文章于 2024-06-12 10:16:34 发布
阅读量397 收藏
点赞数
分类专栏： javascript 前端 文章标签： javascript entries
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/survivorsfyh/article/details/106624199
版权

新接的项目中遇到了一个很恶心的数据源结构，用到了 JavaScript 的 entries 方法，高效的解决了多层数据遍历的方式，不但性能上有效的提高了很多，还精简了很多冗余的代码 code，特此小结一下；

初始数据源样式，key 值为样式中的 section，对应的 value 为具体的 cell 子样式，而页面组件渲染的时候直接取 key 进行 for in 遍历的操作时可以通过 for((item, name, index) in obj) 中的 name 来直接获取 key，但在后期对数据源处理上会有很多的不便之处，所以终还是想将当前数据源再次重组，变成 {title: '', detail: []} 的结构，更加的利于组件的渲染和后期对数据的再次处理；

{
  "一般情况及头颈部": [
    {
      "dmi_ctime": "2017-06-14 17:03:36.0",
      "dmi_dmtid": 238,
      "dmi_id": 3753,
      "dmi_name": "暖手和听诊器、准备各种检查用具，并告知患者意图",
      "dmi_namespecial": "",
      "dmi_order": 1,
      "dmi_projectname": "一般情况及头颈部",
      "dmi_score": 2,
      "dmi_scorespecial": 0,
      "dmi_stepscore": 0.5,
      "dmi_utime": "2020-04-13 15:19:00.0",
      "memo": ""
    },
    {
      "dmi_ctime": "2017-06-14 17:03:36.0",
      "dmi_dmtid": 238,
      "dmi_id": 3754,
      "dmi_name": "眼：结膜（观察充血）、巩膜（观察黄染）、瞳孔对光反射",
      "dmi_namespecial": "",
      "dmi_order": 2,
      "dmi_projectname": "一般情况及头颈部",
      "dmi_score": 4,
      "dmi_scorespecial": 0,
      "dmi_stepscore": 0.5,
      "dmi_utime": "2018-05-17 14:10:13.0",
      "memo": ""
    },
   
  ],
  "腹部": [
    {
      "dmi_ctime": "2017-06-14 17:03:36.0",
      "dmi_dmtid": 238,
      "dmi_id": 3764,
      "dmi_name": "（视诊）腹部形态",
      "dmi_namespecial": "",
      "dmi_order": 12,
      "dmi_projectname": "腹部",
      "dmi_score": 2,
      "dmi_scorespecial": 0,
      "dmi_stepscore": 0.5,
      "dmi_utime": "2018-05-17 14:24:51.0",
      "memo": ""
    },
    {
      "dmi_ctime": "2017-06-14 17:03:36.0",
      "dmi_dmtid": 238,
      "dmi_id": 3765,
      "dmi_name": "（听诊）肠鸣音",
      "dmi_namespecial": "",
      "dmi_order": 13,
      "dmi_projectname": "腹部",
      "dmi_score": 4,
      "dmi_scorespecial": 0,
      "dmi_stepscore": 0.5,
      "dmi_utime": "2018-05-17 14:25:52.0",
      "memo": ""
    },
  ],
  "重点查体": [
    {
      "dmi_ctime": "2017-06-14 17:03:36.0",
      "dmi_dmtid": 238,
      "dmi_id": 3773,
      "dmi_name": "具体的重点查体步骤能体现诊断思路和鉴别关键点",
      "dmi_namespecial": "",
      "dmi_order": 22,
      "dmi_projectname": "重点查体",
      "dmi_score": 5,
      "dmi_scorespecial": 0,
      "dmi_stepscore": 0.5,
      "dmi_utime": "2018-05-17 14:36:34.0",
      "memo": ""
    }
  ],
}

处理方式

const examPaperDetails = Object.entries(itemData).map(([groupName, array]) => ({ groupName, array })); // 对象转换为数组

其中，itemData 为如上的数据源数据，通过 JavaScript entries() 方法 进行对数据源的再次整合；

一个很 nice 的函数处理方式，减少了很多冗余代码的处理，很高效的完成了数据的处理；

通过对数据的再次整合后，无论是页面的渲染上还是对后期数据源的再处理都起到了很大的便捷性，从而避免了对数据的多次遍历的复杂操作！

处理后的数据源样式如下所示：

[
  {
    "groupName": "一般情况及头颈部",
    "array": [
      {
        "dmi_ctime": "2017-06-14 17:03:36.0",
        "dmi_dmtid": 238,
        "dmi_id": 3753,
        "dmi_name": "暖手和听诊器、准备各种检查用具，并告知患者意图",
        "dmi_namespecial": "",
        "dmi_order": 1,
        "dmi_projectname": "一般情况及头颈部",
        "dmi_score": 2,
        "dmi_scorespecial": 0,
        "dmi_stepscore": 0.5,
        "dmi_utime": "2020-04-13 15:19:00.0",
        "memo": ""
      },
      {
        "dmi_ctime": "2017-06-14 17:03:36.0",
        "dmi_dmtid": 238,
        "dmi_id": 3754,
        "dmi_name": "眼：结膜（观察充血）、巩膜（观察黄染）、瞳孔对光反射",
        "dmi_namespecial": "",
        "dmi_order": 2,
        "dmi_projectname": "一般情况及头颈部",
        "dmi_score": 4,
        "dmi_scorespecial": 0,
        "dmi_stepscore": 0.5,
        "dmi_utime": "2018-05-17 14:10:13.0",
        "memo": ""
      },
    ]
  },
  {
    "groupName": "腹部",
    "array": [
      {
        "dmi_ctime": "2017-06-14 17:03:36.0",
        "dmi_dmtid": 238,
        "dmi_id": 3764,
        "dmi_name": "（视诊）腹部形态",
        "dmi_namespecial": "",
        "dmi_order": 12,
        "dmi_projectname": "腹部",
        "dmi_score": 2,
        "dmi_scorespecial": 0,
        "dmi_stepscore": 0.5,
        "dmi_utime": "2018-05-17 14:24:51.0",
        "memo": ""
      },
      {
        "dmi_ctime": "2017-06-14 17:03:36.0",
        "dmi_dmtid": 238,
        "dmi_id": 3765,
        "dmi_name": "（听诊）肠鸣音",
        "dmi_namespecial": "",
        "dmi_order": 13,
        "dmi_projectname": "腹部",
        "dmi_score": 4,
        "dmi_scorespecial": 0,
        "dmi_stepscore": 0.5,
        "dmi_utime": "2018-05-17 14:25:52.0",
        "memo": ""
      },
    ]
  },
  {
    "groupName": "重点查体",
    "array": [
      {
        "dmi_ctime": "2017-06-14 17:03:36.0",
        "dmi_dmtid": 238,
        "dmi_id": 3773,
        "dmi_name": "具体的重点查体步骤能体现诊断思路和鉴别关键点",
        "dmi_namespecial": "",
        "dmi_order": 22,
        "dmi_projectname": "重点查体",
        "dmi_score": 5,
        "dmi_scorespecial": 0,
        "dmi_stepscore": 0.5,
        "dmi_utime": "2018-05-17 14:36:34.0",
        "memo": ""
      }
    ]
  },
]

 

以上便是此次分享的全部内容，希望能对大家有所帮助

survivorsfyh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【ES6】JavaScript数组-迭代器方法-keys()-values()-entries()-迭代方法-every()-some()-filter()-map()-forEach()
YK菌的博客
02-03 568
文章目录迭代器方法例子迭代方法every()filter()forEach()map()some()例子 迭代器方法 Array的原型上暴露了3个用于检测数组内容的方法 keys() 返回数组索引的迭代器 values() 返回数组元素的迭代器 entries() 返回索引/值的迭代器 例子 const a = ["apple", "orange", "banana", "strawberry"]; const aKeys = Array.from(a.keys()); // [0, 1, 2, 3
JS entries() 方法
qq_31151699的博客
02-16 402
const fiuits = ['Banana', 'Orange', 'Apple'] fruits.entries() /* [0, "Banana"] [1, "Orange"] [2, "Apple"] */
js中entries方法的使用
weixin_48659263的博客
10-24 3001
Object.entries() 可以把一个对象的键值以数组的形式遍历出来，结果和 for…in 一致，但不会遍历原型属性。 1-传入对象 const obj = { name: ‘colin’, age: ‘18’ }; console.log(Object.entries(obj)); // [[‘name’, ‘colin’], [‘age’, ‘18’]] 每一个键值对对应一个数组，最后再存入到一个数组中。 2 – 传入数组 const arr1 = [1, 2, 3]; console.log(
ES6 .entries用法
最新发布
Mahuicool的博客
06-12 436
返回数组的可迭代对象itarator,可以通过for of 来遍历数组或对象的值。但是它们的写法不一样。
JavaScript entries() 方法 + 数组索引 +检测数组
qq_46100747的博客
03-01 462
从数组 fruits创建一个可迭代对象， 该对象包含了数组的键值对： var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.entries(); entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。 迭代对象中数组的索引值作为 key， 数组元素作为 value。 [0, "Banana"] [1, "Orange"] [2, "Apple"] [3, "Mango"] 数组索引 数组中元素
javascript .entries()用法示例
别忘了微笑
12-28 839
.entries()是 JavaScript 中用于获取对象的键值对的迭代器。这些例子涵盖了一些常见的情况，你可以根据实际需要进一步扩展测试用例。键值对的迭代器对象。
js中entries()方法的使用
dx_zheng的博客
10-20 3952
语法： Object.entries(obj) 参数： obj：可以返回其可枚举属性的键值对的对象 返回值： 给定对象自身可枚举属性的键值对数组 Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用for…in循环遍历该对象时返回的顺序一致。区别在于for in 会枚举原型链上的属性。 eg: let per = { name:'zdx', age: 18 } for(let [key,value] of Object.entries
js代码-js 遍历数组entries() keys() 和 values() 方法
07-16
在JavaScript中，遍历数组是常见的操作，而`entries()`、`keys()`和`values()`方法为开发者提供了方便快捷的方式来进行此类操作。这三个方法都是数组对象的内置方法，它们分别返回不同的迭代器对象，让我们来深入...
Array-Methods-JS：数组-方法-JS
02-17
在JavaScript中，数组方法是处理和操作数组的强大工具。这些方法极大地简化了对数组的迭代、过滤、查找、合并和变换等操作。本篇将详细探讨JavaScript中的数组方法，包括它们的功能、用法以及如何在实际编程中有效地...
caql-js-compiler:CaQL编译器，可将查询转换为可执行JavaScript
05-03
将CaQL查询编译为可执行JavaScript。 了解更多： 。 安装 npm install caql-js-compiler 例子 var JSCompiler = require ( 'caql-js-compiler' ) ; var entries = [ { name : 'Postini' , founded_year : 1999 ,...
js数组常用操作方法汇总——entries
KusakabeiHikaru
12-21 3158
Array.entries该方法返回一个新的Array Iterator对象，该对象包含数组中每个索引对应的键/值对语法（Syntax）a.entries()示例代码var a = ['a','b','c'] var iterator = a.entries() console.log(iterator) // Array Iterator{}console.log(iterator.next().
js，javascript 方法concat()，copyWithin()，entries()，every() （2024-04-29）
hap1994的博客
04-29 285
concat()方法用于连接两个或多个数组，该方法不会更改现有数组，而是返回一个新数组，其中包含已连接数组的值。
JavaScript深入理解对象方法——Object.entries()
weixin_34049032的博客
10-18 571
Object.entries() Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for...in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环也枚举原型链中的属性）。 语法 Object.entries(obj) 参数 obj可以返回其可枚举属性的键值对的对象。 返回值 给定...
js中的entries方法的使用
热门推荐
qq_42628504的博客
08-02 1万+
js中的 Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for…in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环也枚举原型链中的属性）。 简单说就是 Object.entries() 可以把一个对象的键值以数组的形式遍历出来，结果和 for…in 一致，但不会遍历原型属性。 1-- 传入对象 const obj = { name: 'xixixi', age: '23' }; console.log(Object.entries(obj)
js entries()
lgg1997的博客
10-10 277
js entries()
JavaScript不清不楚之entries、keys、values
dao-keer
07-04 521
Array.prototype.entries 以下代码均来自：MDN entries方法返回一个新的Array Iterator对象，每个元素项是包含数组中每个索引的键/值对 IE系列不支持 var arr = ["a", "b", "c"]; var iter = arr.entries(); var res = []; for(var i=0; i< a...
js中Object的keys()方法和values()方法还有entries()方法
阿泽呀的博客
08-24 1万+
  对Object中的索引进行循环 let obj = { name:"张三", sex:"男", age:20, height:150 } for ( let key of Object.keys(obj)){ console.log(key) } // name // sex // age // height 对Object中的值进行循环。 ...
js 列表entries()迭代
weixin_42577735的博客
02-16 308
在 JavaScript 中，entries() 是一个数组原型方法，用于创建一个数组迭代器对象，该迭代器将数组的每个元素作为一个键值对返回，其中键是元素的索引，值是元素本身。这个方法通常用于遍历数组的所有元素。 以下是使用 entries() 方法迭代数组的示例： const fruits = ['apple', 'banana', 'cherry']; const iterator = fr...
JavaScript entries() 方法，取到数组中对象的key、value
lmyh1111的博客
12-23 1219
entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。 迭代对象中数组的索引值作为 key， 数组元素作为 value。 console.log(newColumns,'newColumns') for (let [index, item] of newColumns.entries()) { console.log(index,'----------------',item) this.columns.splice(4..
JavaScript中的Object.entries（）方法
07-27
Object.entries()方法是JavaScript中的一个内置方法，用于将一个对象的键值对转换为一个数组。它返回一个由对象的可枚举属性键值对组成的数组。每个键值对都表示为一个长度为2的数组，其中第一个元素是键，第二个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值