js将数组根据指定属性值分组成二维数组

最新推荐文章于 2023-01-31 23:09:20 发布
原创 最新推荐文章于 2023-01-31 23:09:20 发布 · 1.3k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js #一维根据属性值整理成二维

本文介绍如何将给定的一维数组oneDimensionalArr按照multi、codeKey和codeType字段进行分组，形成每个组内具有相同multi、codeKey和codeType的子数组，便于数据管理和分析。

根据mulit字段+codeKey+codeType三个字段进行分组

oneDimensionalArr: [
     {multi: 'one',codeKey: 'LTL', codeType: 1, name: 'ABC', id: 1},
     {multi: 'one',codeKey: 'LTL', codeType: 1, name: 'ioh', id: 3},

     {multi: 'mulit',codeKey: 'LTL', codeType: 1, name: 'CDF', id: 6},

     {multi: 'mulit',codeKey: 'FES', codeType: 1, name: 'werr', id: 4},

     {multi: 'one',codeKey: 'FES', codeType: 2, name: 'ytg', id: 5},
     {multi: 'one',codeKey: 'FES', codeType: 2, name: 'CDF', id: 2},

     {multi: 'mulit',codeKey: 'FRE', codeType: 2, name: 'etery', id: 7},
     {multi: 'mulit',codeKey: 'FRE', codeType: 2, name: 'nvn', id: 8},
     {multi: 'mulit',codeKey: 'FRE', codeType: 2, name: 'abc', id: 9},

     {multi: 'one',codeKey: 'Small', codeType: 1, name: 'ware', id: 10},
     {multi: 'one',codeKey: 'Small', codeType: 1, name: 'trwe', id: 11},
]

最终想要的结果

[
      {
        multi: 'one',
        codeKey: 'LTL', 
        codeType: 1, 
        list:[
          {multi: 'one',codeKey: 'LTL', codeType: 1, name: 'ABC', id: 1},
          {multi: 'one',codeKey: 'LTL', codeType: 1, name: 'ioh', id: 3},
        ]
     },
     {
        multi: 'mulit',
        codeKey: 'LTL', 
        codeType: 1, 
        list:[{multi: 'mulit',codeKey: 'LTL', codeType: 1, name: 'CDF', id: 6}]
    },
    {
      multi: 'mulit',
      codeKey: 'FES', 
     codeType: 1, 
      list:[
            {multi: 'mulit',codeKey: 'FES', codeType: 1, name: 'werr', id: 4},
           ]
    },
    {
      multi: 'one',
      codeKey: 'FES', 
      codeType: 2, 
      list:[
             {multi: 'one',codeKey: 'FES', codeType: 2, name: 'ytg', id: 5},
              {multi: 'one',codeKey: 'FES', codeType: 2, name: 'CDF', id: 2},
          ]
  },
  {
     multi: 'mulit',
     codeKey: 'FRE', 
     codeType: 2, 
     list:[
            {multi: 'mulit',codeKey: 'FRE', codeType: 2, name: 'etery', id: 7},
            {multi: 'mulit',codeKey: 'FRE', codeType: 2, name: 'nvn', id: 8},
           {multi: 'mulit',codeKey: 'FRE', codeType: 2, name: 'abc', id: 9},
          ]
 },
{
    multi: 'one',
    codeKey: 'Small', 
    codeType: 1, 
    list:[
             {multi: 'one',codeKey: 'Small', codeType: 1, name: 'ware', id: 10},
             {multi: 'one',codeKey: 'Small', codeType: 1, name: 'trwe', id: 11},
         ]
 },

实现方案

// 根据指定属性值将一维数组进行分组成二维数组
mapTwoDimension(arr) {
      console.log(arr, 'arr');
      let dataArr = []
      if (arr.length === 0)  {
            return dataArr
      }
      arr.map(oneDim => {
           if (dataArr.length == 0) {
                dataArr.push({
                     multi: oneDim.multi,
                     codeKey: oneDim.codeKey,
                     codeType: oneDim.codeType,
                     list: [oneDim]
                })
            } else {
                let res = dataArr.some(item => { // 判断相同，有就添加到当前项
                if (item.multi == oneDim.multi && item.codeType == oneDim.codeType &&
                        item.codeKey == oneDim.codeKey) {
                        item.list.push(oneDim)
                        return true
                        }
                    })
                    if (!res) { // 如果没找相同添加一个新对象
                        dataArr.push({
                        multi: oneDim.multi,
                        codeKey: oneDim.codeKey,
                        codeType: oneDim.codeType,
                        list: [oneDim]
                        })
                    }
                 }
     })
     console.info(dataArr, 'dataArr')
     return dataArr
},

 

JavaScript - 一维数组 / 二维数组根据指定的对象属性获取该对象在数组中的下标（对数组进行增删还要确定该项位置）
🏆 前端领域优质创作者
04-01 2943
前言 如果你要对一个数组对象（二维数组）进行增删，它的数组下标会根据数组长度进行变化，这会导致你无法正确找到数组项。 适用于对数组进行增删还要确定该项位置需求。 如果你指定一个属性（匹配数组项从而找到该项所在下标），那么无论数组长度怎么变化，你都可以“正确”找到该项。 一维数组 //ArrayObject constarr=['王佳斌','孙玉红','11'] //获取'11'该项所在位置的下标 //'11'即要匹配的变量(请根据逻辑,我这里直接写死了) var_i
javascript 二维数组的实现与应用
10-29
在 JavaScript 中虽然没有直接提供二维数组的内置数据结构，但可以通过多层嵌套数组的方式来模拟实现二维数组的功能。...通过将数组作为数组元素的方式来构建和使用二维数组，是处理二维数据结构时的一个重要技能。
js将包含对象数组一维数组，按属性改为二维数组
Lisunlight的博客
09-02 561
js将包含对象数组一维数组，按属性改为二维数组，适用于根据某一个相同属性，进行分组的操作
将数组按照分类转换为二维数组
betterliumm的博客
03-05 469
将数组按照首字母，把名字进行分类为二维数组 如果将一个数组用js根据名字的首字母转换成二维数组呢？ 例如将 ['zhang san', 'zhang jie', 'xie na']，转换为[['zhang san', 'zhang jie'], ['xie na']], 接下来我们就来实现这个功能 const beforeArr = ['zhang san', 'li si', 'zhang liu', 'wang wu', 'zhang jie', 'xie na'] const afterAr
js实现一个数组划分为二维数组内多个小数组
qq_2422941992的博客
12-31 334
//一个数组划分为二维数组内多个小数组 /*arr：原数组 num:需要获取成几个小数组 */ formatArr(arr,num){ //最后返回的结果为一个二维数组 varnewArr=newArray(Math.ceil(arr.length/2)); for(leti=0;i<newArr.length;i++){ newArr[i]=[]; ...
根据数组对象中不同的属性条件产生二维数组
Bitter的博客
09-10 491
1.首先定义一个包含n条对象的大数组 const sourceData = [ {name:"张三",age: 18, height:180}, {name: "李四",age: 28,height:160}, {name: "王五",age: 38,height:170} ] 2.再根据数组对象中属性做为二维数组的条件 比如：const header=['name','height'] 3.定义一个函数 function tansData(sourceData,header){
js 一维数组对象，以某个属性 组成二维数组
qq_36364963的博客
06-28 462
// 需求是 以value 相同的组成数组 const arr = [ { id: '1', value: 1, }, { id: '2', value: 2, }, ...
Javascript计算二维数组重复值示例代码
10-20
本文将详细探讨如何使用JavaScript来计算二维数组中的重复值，并提供示例代码帮助理解。文中给出的示例代码是通过遍历二维数组，然后利用一个对象来记录每个唯一值的总和，最终生成一个新的二维数组，其中包含了原始...
精选资源
js代码-二维数组中的查找
07-16
本话题将深入探讨如何在JavaScript的二维数组中进行查找操作。 在`main.js`文件中，我们可能会看到针对二维数组的查找功能实现。通常，查找操作可以分为两种类型：线性查找和基于特定算法的查找（如二分查找）。但...
JS实现将二维数组转为json格式字符串操作示例
10-18
在当今Web开发中，将二维数组转换为JSON格式字符串是一种常见的数据处理需求。在JavaScript中，这种转换可以通过数组遍历、拼接和转换操作来实现。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，...
js 将一维数组转为二维数组并分组
weixin_44812604的博客
01-31 366
js 将一维数组转为二维数组并分组
js根据相同属性值将一个一维对象数组转为二维数组
F小钱的博客
03-05 1万+
js根据相同属性值将一个一维对象数组转为二维数组es6的方法 将一个一维对象数组，根据相同的属性值，转化成一个二维数组 如 // 待转换的一维数组 var arrayFirst = [{ code: 1, datas: 'a网吧' }, { code: 1, datas: 'b网吧' }, { code: 2, datas: 'a酒店' }, { ...
js数组，根据数组内的对象中的某一个值进行分组
陈梵的博客
11-05 4319
有一个数组： let list = [ {name:'test',value:'value1',count:6}, {name:'test1',value:'value2',count:4}, {name:'test1',value:'value3',count:2}, {name:'test',value:'value4',count:0}, ] 假如想要根据数组中对象的名字进行分类，可以分为test和test1两类。希望得到如下数据： { test:[ {name:'test',value:'v
js 数组，根据数组内部的对象中的某个属性值进行分组
本以为成功很简单，没想到活成普通人都需拼尽全力！
12-03 6526
工作期间，遇到了一个问题，将 let data = [ { value: 'A组小明', group: 'A' }, { value: 'A组小红', group: 'A' }, { value: 'A组小刚', group: 'A' }, { value: 'B组小蓝', group: 'B' }, { value: 'B组小天', group: 'B' },
js一维数组按对象中某项值生成二维数组
qq_16103861的博客
06-21 987
let classRes = [ //操作将所有数据转为以className分类的二维数组 let res = {} classRes.map(item => { // 可以先输出一下想要的结果 // console.log(item.className,item,'66666') res[item.className] = res[item.className] || []; //给className后加一个[]中括号 re
【数组分组】根据数组元素对象中的key值分组
菜鸟博客
04-02 1328
var arr = [ {tag: ‘a’, name: 1, age: 2}, {tag: ‘b’, name: 3, age: 4}, {tag: ‘a’, name: 5, age: 6}, {tag: ‘b’, name: 7, age: 8}, {tag: ‘c’, name: 7, age: 8}, {tag: ‘b’, name: 1, age: 2}, {tag: ‘b’, nam...
PHP实现根据数组的值进行分组的方法
qq_31763129的博客
04-16 2982
本文实例讲述了PHP实现根据数组的值进行分组的方法。分享给大家供大家参考，具体如下：PHP根据数组的值分组，php array中没有自带这个函数但是很常用，今天写了出来记录一下。代码：$_array = array(     array(1,11,'2016-05-18'),     array(2,11,'2016-05-18'),     array(3,22,'2016-05-18'),  ...
js将两个一维数组合并为二维数组
热门推荐
jiejieyuy的博客
05-07 1万+
let data = ['1','2','3']; let array = ['3','4','5']; data = data.map((key,value)=&gt;[key,array[value]]);这是一个很好的思路
JS 根据数组对象属性值分类，把一个数组拆分为多个数组
hmily43的博客
10-29 7477
在工作中有时前台展示需求的不同要把后台的数组对象进行再分类。 举个栗子： let arr = [ { date: '2018-01-06',SW: '90.95', LL: '136', XXSW: '80.22',CKLL: '500' }, { date: '2018-01-06', SW: '164.95', LL: '137', XXSW: '99.22', CKLL: '93' }, { date: '2018-01-07', SW: '176.95', L.
js 处理 一维数组 根据可以相同 转位二维数组
最新发布
09-04
<think> 我们有一个需求：在JavaScript中，将一维数组（数组元素为对象）根据相同的key值分组，转换为二维数组（实际上是对象，因为分组后的键是动态的，但每个键对应的值是数组）。注意，这里的分组是指将具有相同键值的元素放入同一个数组中，并以该键值作为结果对象的键。 例如，输入数组： [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 1, name: 'Charlie' } ] 根据'id'分组后，我们期望得到： { 1: [ { id: 1, name: 'Alice' }, { id: 1, name: 'Charlie' } ], 2: [ { id: 2, name: 'Bob' } ] } 注意：输出结果是一个对象，而不是二维数组。因为键是动态的（这里是1和2），所以不能使用数组索引（0,1,...）来组织。但是，有时我们可能希望得到二维数组的形式（即只保留分组后的数组，不要键），那么可以使用`Object.values(grouped)`来获得一个二维数组，其中每个子数组是同一分组。 然而，根据用户需求，他们希望将一维数组根据相同的key值转换为二维数组，并且参考了引用[1]中的代码（使用reduce方法，按固定长度分割），但我们的需求是按相同属性值分组。 在JavaScript中，我们可以使用`Array.prototype.reduce`方法来实现分组，类似于PHP中的方法。 步骤： 1. 初始化一个空对象（作为reduce的初始值）。 2. 遍历数组的每一个元素。 3. 对于每个元素，获取指定key的值（例如'id'）。 4. 检查结果对象中是否已经有以该值为键的数组，如果没有则初始化为空数组。 5. 将当前元素添加到该键对应的数组中。 6. 最后，返回这个对象。 如果用户希望得到二维数组（即只包含分组后的数组，不包含键），则再使用`Object.values()`将对象的值转换为数组。 但是，用户的问题是“转换为二维数组”，注意二维数组在JavaScript中就是数组的数组，例如： [ [ { id: 1, name: 'Alice' }, { id: 1, name: 'Charlie' } ], [ { id: 2, name: 'Bob' } ] ] 但是这样我们丢失了分组键（id值）。所以通常我们保留分组键的对象形式更有用。不过，根据具体需求，我们可以提供两种结果。 参考引用[1]中的代码是按固定长度分割数组，与按属性值分组不同。而引用[2]中的代码是查找数组元素下标，也不直接相关。 因此，我们按照按属性值分组的需求来实现。 代码如下： 方案1：使用reduce方法分组，得到一个以key为键，以数组为值的对象。 方案2：如果需要二维数组（数组的数组，不保留键），则使用Object.values()将上面对象的值转换为数组。 注意：如果分组键是数字，那么结果对象的键也是数字（但实际上对象键会被转换为字符串，所以数字键在对象中也是字符串形式）。如果希望保持数字类型，可以在分组时使用Map，最后再将Map转换为对象或者数组。 我们也可以使用Map来分组，这样键的类型可以保持（但最终输出为对象时，键还是字符串）。如果希望输出二维数组并且不关心键，那么使用Map与否不重要。 下面给出两种实现方式： 方式一：使用reduce和普通对象 ```javascript function groupByKey(array, key) { return array.reduce((result, currentItem) => { const keyValue = currentItem[key]; // 如果result中还没有这个键，则初始化一个空数组 if (!result[keyValue]) { result[keyValue] = []; } // 将当前元素加入对应的数组 result[keyValue].push(currentItem); return result; }, {}); } ``` 方式二：使用Map（可以保持键的类型，但最终输出为对象时，键会变成字符串。如果输出Map，则键保持原类型） ```javascript function groupByKey(array, key) { const map = new Map(); array.forEach(item => { const keyValue = item[key]; if (!map.has(keyValue)) { map.set(keyValue, []); } map.get(keyValue).push(item); }); // 将Map转换为对象（键为字符串） return Object.fromEntries(map.entries()); // 或者直接返回Map，但这样后续处理可能需要使用Map的方法 } ``` 如果我们需要二维数组（不保留键），则： ```javascript function groupByKeyToArray(array, key) { const grouped = groupByKey(array, key); // 先得到对象 return Object.values(grouped); } ``` 示例： ```javascript const input = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 1, name: 'Charlie' }, { id: 3, name: 'David' } ]; const groupedObject = groupByKey(input, 'id'); console.log(groupedObject); // 输出: // { // '1': [ { id: 1, name: 'Alice' }, { id: 1, name: 'Charlie' } ], // '2': [ { id: 2, name: 'Bob' } ], // '3': [ { id: 3, name: 'David' } ] // } const groupedArray = groupByKeyToArray(input, 'id'); console.log(groupedArray); // 输出: // [ // [ { id: 1, name: 'Alice' }, { id: 1, name: 'Charlie' } ], // [ { id: 2, name: 'Bob' } ], // [ { id: 3, name: 'David' } ] // ] ``` 注意：使用`Object.values`得到的数组顺序是对象键的插入顺序。在ES6中，对象的属性顺序是：数字键（按升序排列）-> 字符串键（按插入顺序）-> Symbol键（按插入顺序）。但是，在我们的例子中，我们使用的是数字键，但是它们在对象中会被转换为字符串。然而，在ES6规范中，数字键（即使是字符串形式）也会按照数字大小升序排列，但请注意，这仅针对数字字符串键（如'1','2'）有效，如果键是混合类型（比如既有数字字符串又有普通字符串），那么顺序是先数字字符串升序，再其他字符串插入顺序。 在我们的分组函数中，由于我们使用reduce（或forEach）遍历数组，所以键出现的顺序就是我们在数组中遇到的顺序（除了数字键会被排序？）。但实际上，根据规范，对于非数字字符串键，顺序是插入顺序；对于数字字符串键，会按照数值升序排列。因此，为了避免混淆，如果顺序很重要，我们可以使用Map，因为Map会保持插入顺序（包括键的插入顺序），然后使用`Array.from(map.values())`来得到二维数组（数组的数组，按分组键的首次出现顺序排列）。 因此，如果我们希望分组后的二维数组的顺序是按照分组键在数组中第一次出现的顺序，那么我们可以使用Map来分组，然后取Map的值（Map.values()）并转换为数组。 修改后的`groupByKeyToArray`函数（保持顺序）： ```javascript function groupByKeyToArray(array, key) { const map = new Map(); array.forEach(item => { const keyValue = item[key]; if (!map.has(keyValue)) { map.set(keyValue, []); } map.get(keyValue).push(item); }); return Array.from(map.values()); } ``` 这样，分组后的数组顺序就是分组键在数组中第一次出现的顺序。例如： 输入数组： [ { id: 2, ... }, { id: 1, ... }, { id: 2, ... } ] 分组后的二维数组顺序： 第一个子数组是id为2的分组（因为2先出现），第二个子数组是id为1的分组。 总结： 1. 根据相同key分组，通常得到一个对象（键为分组值，值为数组）。 2. 如果只需要二维数组（数组的数组），则提取对象的值（Object.values）或者使用Map并取values。 3. 使用Map可以保证分组顺序（按分组键首次出现的顺序）。 因此，我们根据需求选择不同的输出形式。 下面是完整的代码示例： </think> ### JavaScript实现一维数组根据相同Key值分组为二维数组的方法 在JavaScript中，根据相同Key值将一维数组分组为二维数组（实际是对象结构）是常见的数据处理需求。下面详细介绍实现方法和代码示例： #### 核心实现方法 使用`Array.prototype.reduce()`方法是最简洁高效的实现方式： ```javascript function groupByKey(array, key) { return array.reduce((result, currentItem) => { const keyValue = currentItem[key]; // 若该Key值不存在则初始化空数组 if (!result[keyValue]) { result[keyValue] = []; } // 将当前元素添加到对应Key的数组中 result[keyValue].push(currentItem); return result; }, {}); } ``` #### 代码说明 1. **输入参数**： - `array`：原始一维数组，元素为对象 - `key`：用于分组的属性名（如"id"） 2. **处理流程**： - 初始化空对象`{}`作为累加器 - 遍历数组元素，提取当前元素的Key值 - 若结果对象中无此Key，则创建空数组 - 将当前元素推入对应Key的数组 - 返回分组后的对象 3. **时间复杂度**：$O(n)$，其中$n$为数组长度 #### 使用示例 ```javascript // 原始数据 const input = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 1, name: 'Charlie' }, { id: 3, name: 'David' } ]; // 按id分组 const grouped = groupByKey(input, 'id'); console.log(grouped); /* 输出： { 1: [ { id: 1, name: 'Alice' }, { id: 1, name: 'Charlie' } ], 2: [{ id: 2, name: 'Bob' }], 3: [{ id: 3, name: 'David' }] } */ ``` #### 转换为纯二维数组 如果需要标准的二维数组（非对象结构），可添加后续处理： ```javascript const twoDArray = Object.values(grouped); console.log(twoDArray); /* 输出： [ [ { id: 1, name: 'Alice' }, { id: 1, name: 'Charlie' } ], [{ id: 2, name: 'Bob' }], [{ id: 3, name: 'David' }] ] */ ``` #### 方案对比 | 方法 | 优点 | 缺点 | |--------------------|--------------------------|--------------------------| | `reduce()` | 代码简洁，一次遍历完成 | 需要理解累加器机制 | | `forEach()`+对象 | 逻辑直观 | 需额外声明临时变量 | | Lodash的`groupBy` | 最简语法（需引入外部库） | 增加项目依赖 | #### 注意事项 1. **Key值处理**：当Key值为数字时，会自动转为字符串（JavaScript对象键的特性） 2. **空值处理**：建议添加空值检查`if (!currentItem[key])` 3. **大数据优化**：超过10万条数据时，建议使用Map替代对象提高性能[^1] ```javascript // 使用Map的优化版本 function groupByMap(array, key) { const map = new Map(); array.forEach(item => { const keyVal = item[key]; if (!map.has(keyVal)) map.set(keyVal, []); map.get(keyVal).push(item); }); return Object.fromEntries(map); } ``` #### 实际应用场景 1. 商品按分类分组显示 2. 日志数据按日期聚合 3. 用户消息按会话分组 4. 统计报表数据按维度汇总
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值