Question

这是我拥有的对象数组：

var sentences = [
{ id: "1-1", layer: ["A"] },
{ id: "1-2", layer: ["B"] },
{ id: "1-3", layer: ["C"] },
{ id: "2-1", layer: ["D"] },
{ id: "2-2", layer: ["E"] },
{ id: "2-3", layer: ["F"] },
{ id: "3-1", layer: ["G"] },
{ id: "3-2", layer: ["H"] },
{ id: "3-3", layer: ["I"] },
];

id中的第一个数字是幻灯片编号，第二个数字是该幻灯片上的句子。例如id: 3-2是幻灯片3和句子2。

所以我们这里有3张幻灯片...

现在的问题是如何以编程方式填充幻灯片数组：

var slides = [
{ slide_id: "1", slide_layer: ["A", "B", "C"] },
{ slide_id: "2", slide_layer: ["D", "E", "F"] },
{ slide_id: "3", slide_layer: ["G", "H", "I"] },
]

我仍在研究，但找不到合适的方法...

Answer 1

您可以使用reduce方法使用对象作为累加器按ID对幻灯片进行分组，然后可以使用Object.values方法从该对象获取值数组。

var sentences = [{"id":"1-1","layer":["A"]},{"id":"1-2","layer":["B"]},{"id":"1-3","layer":["C"]},{"id":"2-1","layer":["D"]},{"id":"2-2","layer":["E"]},{"id":"2-3","layer":["F"]},{"id":"3-1","layer":["G"]},{"id":"3-2","layer":["H"]},{"id":"3-3","layer":["I"]}]

const result = Object.values(sentences.reduce((r, {id, layer}) => {
  let [a, b] = id.split('-');
  if(!r[a]) r[a] = { slide_id: a, slide_layer: [] }
  r[a].slide_layer[b - 1] = layer[0]
  return r;
}, {}))

console.log(result)

Answer 2

这是具有易于阅读的代码的解决方案。

let slides = [];
for(let data of sentences) {
    let slideId = parseInt(data.id.split("-")[0]);
    let slideIndex = slideId-1;
    if (!slides[slideIndex]) slides[slideIndex] = {"slide_id": slideId, "slide_layer": []}
    slides[slideIndex].slide_layer.push(data.layer[0]);
}
console.log("slides", slides);

Answer 3

我们可以使用Array.prototype.reduce从sentences数组中累积幻灯片。我们需要使用Array.prototype.findIndex()和slide_id测试累加器数组中的滑动对象是否已经存在。

如果存在（idx是>= 0），我们需要将layer添加到幻灯片对象的slide_layer数组属性中。

var sentences = [
{ id: "1-1", layer: ["A"] },
{ id: "1-2", layer: ["B"] },
{ id: "1-3", layer: ["C"] },
{ id: "2-1", layer: ["D"] },
{ id: "2-2", layer: ["E"] },
{ id: "2-3", layer: ["F"] },
{ id: "3-1", layer: ["G"] },
{ id: "3-2", layer: ["H"] },
{ id: "3-3", layer: ["I"] },
];
var slides = sentences.reduce((acc, ele) => {
 let idx = acc.findIndex(obj => obj.slide_id === ele.id.split("-")[0]);
 if(idx >= 0){
   let obj = acc[idx];
   obj.slide_layer.push(ele.layer[0]);
 }else{
  acc.push({slide_id: ele.id.split("-")[0], slide_layer : [ele.layer[0]]});
 }
 return acc;
}, []);
console.log(slides);

Answer 4

JavaScript中的array reduce（）方法用于将数组简化为单个值，并为该数组的每个值（从左到右）执行提供的函数，并将该函数的返回值存储在一个累加器。

const output = Object.values(sentences.reduce((k, {id, layer}) => {
  let [frst, sec] = id.split('-');
  if(!k[frst]) 
  k[frst] = { slide_id: frst, slide_layer: [] }
  k[frst].slide_layer[sec - 1] = layer[0]
  return k;
}, {}))

以编程方式基于另一个对象数组创建一个对象数组

4 个答案: