Javascript: разбить массив объектов на отдельные массивы с динамическими именами в зависимости от значения свойства

Question

У меня есть массив, содержащий объекты.Теперь я хочу разделить массив на новые массивы, содержащие только те объекты, которые соответствуют определенному значению свойства.

В идеале имена новых массивов должны создаваться динамически.

Исходный массив выглядит следующим образом:

specificSlotButtonArray = [
  {slotStarttime:"06:00:00", slotTimespan:1},
  {slotStarttime:"09:00:00", slotTimespan:1},
  {slotStarttime:"12:00:00", slotTimespan:2},
  {slotStarttime:"15:00:00", slotTimespan:2},
  {slotStarttime:"18:00:00", slotTimespan:3}
];

Новые массивы должны выглядеть следующим образом:

timespan1 = [
  {slotStarttime:"06:00:00", slotTimespan:1},
  {slotStarttime:"09:00:00", slotTimespan:1}
]

timespan2 = [
  {slotStarttime:"12:00:00", slotTimespan:2},
  {slotStarttime:"15:00:00", slotTimespan:2}
]

timespan3 = [
  {slotStarttime:"18:00:00", slotTimespan:3}
]

Если возможно, я хочу избежать синтаксиса / функций javascript, которые не поддерживаются IE и некоторыми другими более старыми браузерами.

Я уже пытался работать с reduce() и slice(), но не нашел решения.

Answer 1

Используйте общую группу по ключевому редуктору. Я возьму это из моего предыдущего ответа . Это элегантный и простой способ создания функции, которая группирует ваши данные по определенному ключу, который приводится в качестве аргумента.

const groupBy = key => (result,current) => {
  const item = Object.assign({},current);
  if (typeof result[current[key]] == 'undefined'){
    result[current[key]] = [item];
  }else{
    result[current[key]].push(item);
  }
  return result;
};

const specificSlotButtonArray = [
  {slotStarttime:"06:00:00", slotTimespan:1},
  {slotStarttime:"09:00:00", slotTimespan:1},
  {slotStarttime:"12:00:00", slotTimespan:2},
  {slotStarttime:"15:00:00", slotTimespan:2},
  {slotStarttime:"18:00:00", slotTimespan:3}
];

const timespan = specificSlotButtonArray.reduce(groupBy('slotTimespan'),{});
console.log(timespan);

Answer 2

Следующее решение повторяется один раз на specificSlotButtonArray с использованием Array.reduce. Это решение будет адаптироваться к любому числу slotTimespan.

const specificSlotButtonArray = [{
    slotStarttime: '06:00:00',
    slotTimespan: 1,
  },
  {
    slotStarttime: '09:00:00',
    slotTimespan: 1,
  },
  {
    slotStarttime: '12:00:00',
    slotTimespan: 2,
  },
  {
    slotStarttime: '15:00:00',
    slotTimespan: 2,
  },
  {
    slotStarttime: '18:00:00',
    slotTimespan: 3,
  },
];

// Loop through the array
const splitted = specificSlotButtonArray.reduce((tmp, x) => {
  // Look if we got already an array having the slotTimespan of the current
  // item to treat
  const match = tmp.find(y => y.some(z => z.slotTimespan === x.slotTimespan));

  // If we have such array, push the data into it
  if (match) {
    match.push(x);
  } else {
    // If we don't create a new array
    tmp.push([x]);
  }

  return tmp;
}, []);

console.log(splitted);

Если вы хотите иметь дело с массивом сразу после Array.reduce, вы можете использовать деструктуризацию:

const [
  timespan1,
  timespan2,
  timespan3
] = specificSlotButtonArray.reduce((tmp, x) => {

Answer 3

Вы можете уменьшить массив, взяв объект для массивов деталей.

var specificSlotButtonArray = [{ slotStarttime: "06:00:00", slotTimespan: 1 }, { slotStarttime: "09:00:00", slotTimespan: 1 }, { slotStarttime: "12:00:00", slotTimespan: 2 }, { slotStarttime: "15:00:00", slotTimespan: 2 }, { slotStarttime: "18:00:00", slotTimespan: 3 }],
    timespan1 = [],
    timespan2 = [],
    timespan3 = [];
    
specificSlotButtonArray.reduce(function (r, o) {
    r[o.slotTimespan].push(o);
    return r;
}, { 1: timespan1, 2: timespan2, 3: timespan3 });

console.log(timespan1);
console.log(timespan2);
console.log(timespan3);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 4

Вы можете использовать эту функцию для создания отдельных массивов, сгруппированных по slotTimespan,

    specificSlotButtonArray = [
        {slotStarttime:"06:00:00", slotTimespan:1},
        {slotStarttime:"09:00:00", slotTimespan:1},
        {slotStarttime:"12:00:00", slotTimespan:2},
        {slotStarttime:"15:00:00", slotTimespan:2},
        {slotStarttime:"18:00:00", slotTimespan:3}
    ];
    
    function groupBy(arr, property) {
        return arr.reduce(function(memo, x) {
            if (!memo[x[property]]) { memo[x[property]] = []; }
            memo[x[property]].push(x);
            return memo;
        }, {});
    }
    
    console.log(groupBy(specificSlotButtonArray, "slotTimespan"));

Answer 5

Вы можете просто достичь желаемого результата, используя reduce, так как вы можете создать объект, используя reduce, вот пример того, как вы можете это сделать.

Как вы можете видеть, он проверит, что соответствующее свойство объекта не равно нулю, если оно есть, тогда оно установлено в пустой массив, после этой проверки можно просто нажать соответствующуюЗначения на массив, как это.

var array = [{
    slotStarttime: "06:00:00",
    slotTimespan: 1
  },
  {
    slotStarttime: "09:00:00",
    slotTimespan: 1
  },
  {
    slotStarttime: "12:00:00",
    slotTimespan: 2
  },
  {
    slotStarttime: "15:00:00",
    slotTimespan: 2
  },
  {
    slotStarttime: "18:00:00",
    slotTimespan: 3
  }
];

var newObject = array.reduce(function(obj, value) {
  var key = `timespan${value.slotTimespan}`;
  if (obj[key] == null) obj[key] = [];

  obj[key].push(value);
  return obj;
}, {});

console.log(newObject);