如何从数组的键值对创建一个新数组?

时间:2020-08-20 12:33:31

标签: javascript arrays

我需要一种转换此数组的有效方法:

[
    {
      uuid: 1,
      date: '2020-12-25',
      note: 'example note 1',
      time: '12:05:00',
      language: ['english']
    },
    {
      uuid: 2,
      date: '2020-12-25',
      note: 'example note 2',
      time: '12:05:00',
      language: ['french']
    },
    {
      uuid: 3,
      date: '2020-12-26',
      note: 'example note 3',
      time: '12:05:00',
      language: ['spanish']
    },
    {
      uuid: 4,
      date: '2020-12-26',
      note: 'example note 4',
      time: '12:05:00',
      language: ['chinese']
    },
  ]

此按日期分组的新数组

[
    {
    date:'2020-12-26',
    details:[
      {
        uuid: 3,
        date: '2020-12-26',
        note: 'example note 3',
        time: '12:05:00',
        language: ['spanish']
      },
      {
        uuid: 4,
        date: '2020-12-26',
        note: 'example note 4',
        time: '12:05:00',
        language: ['chinese']
      },
    ]
  },
    {
    date:'2020-12-25',
    details:[
      {
        uuid: 1,
        date: '2020-12-26',
        note: 'example note 1',
        time: '12:05:00',
        language: ['english']
      },
      {
        uuid: 2,
        date: '2020-12-26',
        note: 'example note 2',
        time: '12:05:00',
        language: ['french']
      },
    ]
  },
  ]

我用lodash _.groupBy尝试过,但这不是我想要我的数组看起来的样子,我尝试将.filter,.reduce和.map进行这种组合,但它确实冗长,而且看起来效率不高全部

5 个答案:

答案 0 :(得分:2)

我将.reduce().find()结合使用:

function setup() {
    createCanvas(500, 500);
}

function draw() {
    background(100);
    rectMode(CENTER);

    let posX = width * 0.5;
    let posY = height * 0.5;
    let sizeX = width / 3;
    let sizeY = height / 3;

    for (let i = 0; i < 3; i++) {
        for (let j = 0; j < 2; j++) {
            fill('Red');
            rect(i * posX + 75, j * posY + 75, sizeX - 50, sizeY - 50);
        }
    }
}

答案 1 :(得分:0)

您可以使用reduce函数创建组并将值分配给它们:

const input = [
    {
      uuid: 1,
      date: '2020-12-25',
      note: 'example note 1',
      time: '12:05:00',
      language: ['english']
    },
    {
      uuid: 2,
      date: '2020-12-25',
      note: 'example note 2',
      time: '12:05:00',
      language: ['french']
    },
    {
      uuid: 3,
      date: '2020-12-26',
      note: 'example note 3',
      time: '12:05:00',
      language: ['spanish']
    },
    {
      uuid: 4,
      date: '2020-12-26',
      note: 'example note 4',
      time: '12:05:00',
      language: ['chinese']
    },
  ];
  
const output = input.reduce((result, record) => {
  if (!result[record.date]) result[record.date] = { date: record.date, details: [] };
  result[record.date].details.push(record);
  
  return result;
}, {});

console.log(output);

// If you want it as an array
console.log(Object.values(output));

我将其创建为一个以日期为键的对象,而不是直接将其创建为数组。这样一来,我就不必在所有结果中搜索正确的结果。

我首先查看该日期是否有条目。如果不这样做,我会做一个。

然后我只需将记录添加到该条目的详细信息中即可。

最后,如果您真的需要使用Object.values(),那么我会将其转换为数组。

答案 2 :(得分:0)

Ciao,您可以先执行chain,然后再将groupBy改成map。像这样:

let input = [
    {
      uuid: 1,
      date: '2020-12-25',
      note: 'example note 1',
      time: '12:05:00',
      language: ['english']
    },
    {
      uuid: 2,
      date: '2020-12-25',
      note: 'example note 2',
      time: '12:05:00',
      language: ['french']
    },
    {
      uuid: 3,
      date: '2020-12-26',
      note: 'example note 3',
      time: '12:05:00',
      language: ['spanish']
    },
    {
      uuid: 4,
      date: '2020-12-26',
      note: 'example note 4',
      time: '12:05:00',
      language: ['chinese']
    },
  ]
  
  console.log(
  _.chain(input)
    // Group the elements of Array based on `date` property
    .groupBy("date")
    .map((value, key) => ({ date: key, details: value }))
    .value()
);
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>

答案 3 :(得分:0)

这是一个解决方案:https://jsfiddle.net/9p1fx3dq/1/

    var a = [
        {
          uuid: 1,
          date: '2020-12-25',
          note: 'example note 1',
          time: '12:05:00',
          language: ['english']
        },
        {
          uuid: 2,
          date: '2020-12-25',
          note: 'example note 2',
          time: '12:05:00',
          language: ['french']
        },
        {
          uuid: 3,
          date: '2020-12-26',
          note: 'example note 3',
          time: '12:05:00',
          language: ['spanish']
        },
        {
          uuid: 4,
          date: '2020-12-26',
          note: 'example note 4',
          time: '12:05:00',
          language: ['chinese']
        },
      ];
      
      function groupBy(key) {
      return function group(array) {
        return array.reduce((acc, obj) => {
          const property = obj[key];
          if (!acc.some(s => s.date === property)){
            acc.push({date: property, details: []});
          }
          var details = acc.find(s => s.date === property).details;
          details.push(obj);
          return acc;
        }, []);
      };
    }
    
    console.log(groupBy('date')(a));

答案 4 :(得分:0)

我用new Set来获得不同的值

const array1 = [
  {
    uuid: 1,
    date: "2020-12-25",
    note: "example note 1",
    time: "12:05:00",
    language: ["english"]
  },
  {
    uuid: 2,
    date: "2020-12-25",
    note: "example note 2",
    time: "12:05:00",
    language: ["french"]
  },
  {
    uuid: 3,
    date: "2020-12-26",
    note: "example note 3",
    time: "12:05:00",
    language: ["spanish"]
  },
  {
    uuid: 4,
    date: "2020-12-26",
    note: "example note 4",
    time: "12:05:00",
    language: ["chinese"]
  }
];

const dates = array1.map(x => x.date);
const uniqueDates = [...new Set(dates)];
const result = uniqueDates.map(date => {
  return {
    date: date,
    details: array1.filter(f => f.date === date)
  }
});