JS数组转换

a404352329

已于 2024-04-26 17:36:15 修改

阅读量232

点赞数 3

文章标签： javascript 前端 vue.js

于 2024-04-26 11:21:47 首次发布

本文链接：https://blog.csdn.net/a404352329/article/details/138196157

版权

本文介绍了JavaScript中针对数组对象的几种分组方法，包括根据key值分组为数组对象、返回对象数组、二维数组以及两种不同的数组转对象策略，通过示例展示了如何使用这些函数对数据进行分组操作。

摘要由CSDN通过智能技术生成

一、js数组对象根据key进行分组，返回值为数组

    function groupBy(array, key) {
      return array.reduce((result, currentItem) => {
        // 使用 key 函数获取分组的键
        const groupKey = key(currentItem);
        // 检查结果对象中是否已经有了这个键
        const existingGroup = result.find(item => item.key === groupKey);
        if (existingGroup) {
          // 如果已存在，则将当前项添加到该组数组中
          existingGroup.items.push(currentItem);
        } else {
          // 如果不存在，则创建新组并添加当前项
          result.push({ key: groupKey, items: [currentItem] });
        }
        return result;
      }, []);
    }

    // 示例使用
    const items = [
      { category: 'fruits', name: 'apple' },
      { category: 'animals', name: 'dog' },
      { category: 'fruits', name: 'banana' },
      { category: 'animals', name: 'cat' }
    ];

    const groupedItems = groupBy(items, item=>item.category);
    console.log(groupedItems);  
    // 返回结果 数组对象
    //     [{
    //       "key": "fruits",
    //       "items": [
    //         {
    //           "category": "fruits",
    //           "name": "apple"
    //         },
    //         {
    //           "category": "fruits",
    //           "name": "banana"
    //         }
    //       ]
    //     },
    //       {
    //         "key": "animals",
    //         "items": [
    //           {
    //             "category": "animals",
    //             "name": "dog"
    //           },
    //           {
    //             "category": "animals",
    //             "name": "cat"
    //           }
    //         ]
    //       }
    //     ]

二、js数组对象根据key进行分组，返回值为对象


function groupBy(array, key) {
  return array.reduce((result, currentItem) => {
    // 使用 key 的值作为分组的键
    const groupKey = currentItem[key];
    
    // 如果 result 中不存在这个键，则创建一个数组
    if (!result[groupKey]) {
      result[groupKey] = [];
    }
    
    // 将当前项推入对应的分组数组中
    result[groupKey].push(currentItem);
    
    return result;
  }, {});
}
 
// 示例使用
const items = [
  { category: 'fruits', name: 'apple' },
  { category: 'animals', name: 'dog' },
  { category: 'fruits', name: 'banana' },
  { category: 'animals', name: 'cat' }
];
 
const groupedItems = groupBy(items, 'category');
console.log(groupedItems);

三、js数组对象进行分组，返回值为二维数组

function groupBy(array) {
  let obj={},newArr=[];
  array.forEach(function(item){
    //根据对象的属性是唯一的，将值作为对象的属性名
    if(!obj[item.groupName]){
      let arr=[];
      arr.push(item);
      newArr.push(arr);
      obj[item.groupName]=item;
    }else{
      newArr.forEach(function(value,index){
        //如果已经存在 就循环新组的值将值插入属性相同的数组里 为了防止重复添加 只要和第一个比较就可以了
        if(value[0].groupName==item.groupName){
          value.push(item)
        }
      })
    }
  })
  return newArr
}
const array = [
  { groupName: '食物', name: 'apple' },
  { groupName: '动物', name: 'dog' },
  { groupName: '食物', name: 'banana' },
  { groupName: '动物', name: 'cat' }
];
const groupedItems  = groupBy(array)
console.log(groupedItems)

四、js数组对象转对象，影响排序和不影响排序的两种方法

function groupBy(array) {
  const Obj = {}
  array.forEach((item) => {
    Obj[item.groupName] = { text: item.groupName, args: item.name }
  })
  return Obj
}
function groupByTwo(array) {
  const map = new Map()
  array.forEach((item) => {
    map.set(item.groupName, { text: item.groupName, args: item.name })
  })
  return map
}

const array = [
  { groupName: '', name: 'apple' },
  { groupName: '1', name: 'dog' },
  { groupName: '2', name: 'banana' },
  { groupName: '3', name: 'cat' }
];
const groupedItems  = groupByTwo(array)
const groupByI = this.groupBy(array)

console.log(groupedItems, groupByI )

五、js数组对象返回带key对象或者返回二维数组

function groupBy(array,fn) {
  const groups = {};
  array.forEach(function (o) {
    const group = JSON.stringify(fn(o));
    groups[group] = groups[group] || [];
    groups[group].push(o);
  });
  // 返回二维数组
  // return Object.keys(groups).map(function (group) {
  //     return groups[group];
  // });
  //返回对象数组
  return groups;
}

const array = [
  { groupName: 'fruits', name: 'apple' },
  { groupName: 'animals', name: 'dog' },
  { groupName: 'fruits', name: 'banana' },
  { groupName: 'animals', name: 'cat' }
];
const groupedItems = groupBy(array,  (link) => {
  return link.groupName
})
console.log('groupedItem', groupedItems)