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()方法，但未找到解决方案。

- Gardinero

Answer 1

您可以使用reduce来实现所需的结果，因为您可以使用reduce创建一个对象。以下是如何完成此操作的示例。

如您所见，它将检查对象上的相关属性是否为null，如果是，则将其设置为空数组，在此检查后，安全地将相关值推入数组中，如下所示。

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);

- JO3-W3B-D3V

Answer 2

使用通用的按键减少器。我会从我的先前回答中获取它。这是一种优雅而简单的方法，可以生成一个函数，该函数将根据作为参数传递的特定键对数据进行分组。

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);

- David Lemon

Answer 3

You could reduce the array by taking an object for the part arrays.

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; }

- Nina Scholz

Answer 4

以下解决方案使用 Array.reduce 对 specificSlotButtonArray 进行一次迭代。该解决方案适用于任何数量的 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) => {

- Orelsanpls

Answer 5

你可以使用此函数按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"));

- Sandeepa