JS数组按指定字段转map-list结构(示例详解)

 更新时间:2023年11月07日 09:24:20   作者:天葬  
在开发过程中经常会出现接口返回整个数组,我们需要将数组进行二次处理,这篇文章主要介绍了js 数组按指定字段转map-list结构,需要的朋友可以参考下

js 数组按指定字段转map-list结构

背景介绍

在开发过程中经常会出现接口返回整个数组,我们需要将数组进行二次处理,如下格式按照不同功能模块(type)进行数据拆分

原始数据

const list = [
    {"type":"red","id":1,"name":"a","count":1},
	{"type":"red","id":2,"name":"b","color":2},
	{"type":"green","id":3,"name":"c","color":3},
	{"type":"green","id":4,"name":"d","color":4},
	{"type":"blue","id":5,"name":"e","color":4},
	{"type":"blue","id":6,"name":"f","color":4}
];

转换方法

/**
 * @param {Object} listData 原始数据
 * @param {Object} field 字段 key
 */
const arrayToMap = (listData,field)=>{
    const arrayMap = {};
    listData.forEach(item => {
        const item_type = item[field];
        if (!arrayMap[item_type]) {
            arrayMap[item_type] = [];
        }
        // 将数据添加到相应 'type' 的数组中
        arrayMap[item_type].push(item);
    });
    return arrayMap;
}

测试验证

console.log(arrayToMap(list,'type'))
{
    "red": [
        {
            "type": "red",
            "id": 1,
            "name": "a",
            "count": 1
        },
        {
            "type": "red",
            "id": 2,
            "name": "b",
            "color": 2
        }
    ],
    "green": [
        {
            "type": "green",
            "id": 3,
            "name": "c",
            "color": 3
        },
        {
            "type": "green",
            "id": 4,
            "name": "d",
            "color": 4
        }
    ],
    "blue": [
        {
            "type": "blue",
            "id": 5,
            "name": "e",
            "color": 4
        },
        {
            "type": "blue",
            "id": 6,
            "name": "f",
            "color": 4
        }
    ]
}

到此这篇关于js 数组按指定字段转map-list结构的文章就介绍到这了,更多相关js数组转map-list结构内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Javascript中暂停功能的实现代码

    Javascript中暂停功能的实现代码

    Javascript中暂停功能的实现代码...
    2007-03-03
  • 分享12个非常实用的JavaScript小技巧

    分享12个非常实用的JavaScript小技巧

    这篇文章主要介绍了分享12个非常实用的JavaScript小技巧,这些小技巧可能在你的实际工作中或许能帮助你解决一些问题,需要的朋友可以参考下
    2016-05-05
  • 微信小程序之多列表的显示和隐藏功能【附源码】

    微信小程序之多列表的显示和隐藏功能【附源码】

    今天在项目碰到一个问题,之前在项目首页实现单列表的显示和隐藏,通过wx:if判断就可实现,现在要实现多列表的单项显示和隐藏功能应该如何实现呢?下面小编给大家带来了微信小程序之多列表的显示和隐藏功能,感兴趣的朋友一起看看吧
    2018-08-08
  • JavaScript学习笔记之数组随机排序

    JavaScript学习笔记之数组随机排序

    这篇文章主要介绍了JavaScript学习笔记之数组随机排序的相关资料,需要的朋友可以参考下
    2016-03-03
  • JavaScript实现微信号随机切换代码

    JavaScript实现微信号随机切换代码

    这篇文章主要介绍了JavaScript实现微信号随机切换代码,需要的朋友可以参考下
    2018-03-03
  • 浅谈javascript中for in 和 for each in的区别

    浅谈javascript中for in 和 for each in的区别

    两个的作用都用来遍历对象,但为什么有了for in语句了还要for each in语句呢,后来看了下for each in开发的文档,for each in是作为E4X标准的一部分在javascript 1.6中发布的,而且它不是ECMAScript标准的一部分
    2015-04-04
  • 原生js写的放大镜效果

    原生js写的放大镜效果

    在淘宝上购物时,总会看到类似放大镜的效果。以下为原生js写的一个放大镜效果,其中肯定有很多不足,请大牛们指正,谢啦
    2012-08-08
  • JS实现的随机排序功能算法示例

    JS实现的随机排序功能算法示例

    这篇文章主要介绍了JS实现的随机排序功能算法,结合具体实例形式分析了javascript常用的排序算法实现技巧,需要的朋友可以参考下
    2017-06-06
  • JavaScript中Promise的简单使用及其原理详解

    JavaScript中Promise的简单使用及其原理详解

    Promise是ES6最重要的特性之一,今天小编就来带大家一起系统且细致的研究一下Promise的用法以及原理,感兴趣的小伙伴可以学习一下哦
    2023-03-03
  • ionic实现底部分享功能

    ionic实现底部分享功能

    这篇文章主要为大家详细介绍了ionic实现底部分享功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05

最新评论