javascript - 使用 Javascript reduce 根据主题将文章数组拆分为子数组

Question

我正在尝试根据第一个键值对及其顺序将文章数组拆分为子数组。

我查看了许多 Stack Overflow 帖子，我认为这是最适合我要实现的目标的帖子:

break array of objects into separate arrays based on a property

我知道关于 reduce 的问题很常见，但我被绊倒了，这就是我找不到答案的原因:

有什么不同:我不想将数组过滤成两个单独的类别(即“标记”和“视频”)，而是让第一个数组全部是“标记” "items UNTIL a "video"项目，将所有 "video"项目组成一个数组，直到下一个 "markup"项目，将所有 "markup"项目组成一个新数组，直到下一个 "video"项目，等等。

这是一个重现我正在尝试做的事情的 REPL: REPL reproducing problem

数据如下所示:

export default [{
  "type": "markup",
  "element": "p",
  "html": "blah"
}, {
  "type": "markup",
  "element": "p",
  "html": "blah"
}, {
  "type": "markup",
  "element": "p",
  "html": "blah"
}, {
  "type": "embeddedVideo",
  "element": "p",
  "html": "embeddedWidget"
}, {
  "type": "markup",
  "element": "p",
  "html": "blah"
},
{
  "type": "markup",
  "element": "p",
  "html": "blah"
},
]

我希望它在使用 JavaScript reduce 后看起来像这样:

[
  [
    {type: 'markup', element: 'p', html: 'blah' /*...*/ },
    {type: 'markup', element: 'p', html: 'blah' /*...*/ },
    {type: 'markup', element: 'p', html: 'blah' /*...*/ }
  ],
  [
    {type: 'embeddedVideo', /*...*/ }
  ],
  [
    {type: 'markup', element: 'p', html: 'blah' /*...*/ },
    {type: 'markup', element: 'p', html: 'blah' /*...*/ },
    {type: 'markup', element: 'p', html: 'blah' /*...*/ }
  ]
]

我目前拥有的是:

import articleBody from './articleBody.js';


 function groupBy(arr, property) {
  return arr.reduce((prop, x) => {
    if (!prop[x[property]]) { prop[x[property]] = []; }
    prop[x[property]].push(x);
    return prop;
  }, {});
}

let outputSample = groupBy(articleBody, "type");

console.log(outputSample)

这段代码只是创建了 2 个数组(一个带有标记，一个带有视频)，它没有记住原始数据的顺序，也没有根据顺序创建所有数据组的单独数组。

解决这个问题最优雅的方法是什么？如果您能指导我正确的方向，我将不胜感激。

Answer 1

你可以使用 Array#reduce并检查累加器的最后一个元素。

var array = [{ type: "markup", element: "p", html: "blah" }, { type: "markup", element: "p", html: "blah" }, { type: "markup", element: "p", html: "blah" }, { type: "embeddedVideo", element: "p", html: "embeddedWidget" }, { type: "markup", element: "p", html: "blah" }],
    grouped = array.reduce((r, o, i, a) => {
        var last = r[r.length - 1];
        if (!last || last[0].type !== o.type) {
            r.push([o]);
        } else {
            last.push(o);
        }
        return r;
    }, []);

console.log(grouped);

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