Javascript 对数组中的项进行分组_Javascript_Arrays_Ecmascript 6_Reduce

Javascript 对数组中的项进行分组

javascript arrays ecmascript-6

Javascript 对数组中的项进行分组,javascript,arrays,ecmascript-6,reduce,Javascript,Arrays,Ecmascript 6,Reduce,我需要一些关于如何转换包含多个对象的数组的帮助，我想将一些类型分组为一个对象。特别是带有“H*”和“text”类型的。到目前为止，我有这个函数 convert = () => { let list = []; let objBlock = {}; for (let i = 0; i < content.length; i++) { const element = content[i]; if (element.type === 'H2' || element.type

我需要一些关于如何转换包含多个对象的数组的帮助，我想将一些类型分组为一个对象。特别是带有“H*”和“text”类型的。到目前为止，我有这个函数

convert = () => {
let list = [];
let objBlock = {};
for (let i = 0; i < content.length; i++) {
    const element = content[i];
    if (element.type === 'H2' || element.type === 'H3' || element.type === 'text') {
        objBlock = { type: "text-block", content: element.html };
        list.push(objBlock);
    } else if (
        element.type === 'list-pos-neg') {
        objBlock = { type: "list-pos-neg", content: element[Object.keys(element)[1]] };
        list.push(objBlock);
    } else if (element.type === 'list-pos') {
        objBlock = { type: "list-pos", content: element[Object.keys(element)[1]] };
        list.push(objBlock);
    } else if (element.type === 'list-neg') {
        objBlock = { type: "list-neg", content: element[Object.keys(element)[1]] };
        list.push(objBlock);
    } else if (element.type === 'list-simple') {
        objBlock = { type: "list-simple", content: element[Object.keys(element)[1]] };
        list.push(objBlock);
    } else if (element.type === 'image') {
        let content = element.content;
        if (!content)
            return;
        objBlock = { type: "image-block", content: content };
        list.push(objBlock);
    } else if (element.type === 'simple-btn') {
        objBlock = { type: "btn-simple", content: element[Object.keys(element)[1]] };
        list.push(objBlock);
    }
}
}

convert=（）=>{
让列表=[]；
设objBlock={}；
for（设i=0；i


它给了我一个所有元素的列表，现在有类型和内容字段。我想现在就把它们分组，而不打断列表中的顺序。我已经说了一半了，现在我被卡住了
另外，可能有一个比我在这里使用的更简单的方法
以下是初始数组的示例：
{"contentBefore": [
    {
        "type": "H2",
        "html": "<h2>Header 2</h2>"
    },
    {
        "type": "text",
        "html": "<p>Some Text <a href=\"https://let/me/out\">and</a> then some</p>"
    },
    {
        "type": "text",
        "html": "<p>Some more text</p>"
    },
    {
        "type": "list-simple",
        "simple": {
            "header": "Qs",
            "html": "<ul><li>Q1</li><li>Q2</li><li>Q3</li><li>Q4</li><li>Q5</li></ul>"
        }
    },
    {
        "type": "image",
        "content": {
            "url": "qs.png",
            "altText": "qs",
            "seoImportant": true,
            "imgSrc": "",
            "imgEmbedded": false,
            "articleID": "artcile1234",
            "height": 700,
            "width": 1200
        }
    },
    {
        "type": "text",
        "html": "<p>Somebody</p>"
    },
    {
        "type": "text",
        "html": "<p>I used to know</p>"
    },
    {
        "type": "H3",
        "html": "<h3>Header 3</h3>"
    },
    {
        "type": "text",
        "html": "<p>More text</p>"
    },
    {
        "type": "text",
        "html": "<ol><li>1</li><li><a href=\"https://hear.com/me/out\">2</a></li><li>3</li></ol>"
    },
    {
        "type": "list-simple",
        "simple": {
            "header": "1. Q1?",
            "html": "<p><em>Big 1</em></p>"
        }
    },
    {
        "type": "list-simple",
        "simple": {
            "header": "2. Q2?",
            "html": "<p><em>Big 2</em></p>"
        }
    },
    {
        "type": "H3",
        "html": "<h3>Header 3</h3>"
    },
    {
        "type": "text",
        "html": "<p>More text?</p>"
    },
    {
        "type": "list-pos",
        "pos": {
            "header": "Qq:",
            "html": "<ul><li><em>1</em></li><li><em>2</em></li></ul>"
        }
    },
    {
        "type": "text",
        "html": "<p>Even more text</p>"
    }
]}

{“contentBefore”：[
{
“类型”：“H2”，
“html”：“标题2”
},
{
“类型”：“文本”，
“html”：“一些文本，然后是一些”
},
{
“类型”：“文本”，
“html”：“更多文本”
},
{
“类型”：“简单列表”，
“简单”：{
“标题”：“Qs”，
“html”：“Q1
Q2
Q3
Q4
Q5”
}
},
{
“类型”：“图像”，
“内容”：{
“url”：“qs.png”，
“altText”：“qs”，
“seoiimportant”：没错，
“imgSrc”：“，
“imgEmbedded”：错误，
“articleID”：“artcile1234”，
“高度”：700，
“宽度”：1200
}
},
{
“类型”：“文本”，
“html”：“someone”
},
{
“类型”：“文本”，
“html”：“我以前知道”
},
{
“类型”：“H3”，
“html”：“标题3”
},
{
“类型”：“文本”，
“html”：“更多文本”
},
{
“类型”：“文本”，
“html”：“1
3”
},
{
“类型”：“简单列表”，
“简单”：{
“标题”：“1.Q1？”，
“html”：“大1”
}
},
{
“类型”：“简单列表”，
“简单”：{
“标题”：“2.Q2？”，
“html”：“大2”
}
},
{
“类型”：“H3”，
“html”：“标题3”
},
{
“类型”：“文本”，
“html”：“更多文本？”
},
{
“类型”：“列表位置”，
“pos”：{
“标题”：“Qq:”，
“html”：“1
2”
}
},
{
“类型”：“文本”，
“html”：“更多文本”
}
]}

最终结果应如下所示：
{"contentAfter": [
    {
        "type": "text-block",
        "content": "<h2>Header 2</h2><p>Some Text <a href=\"https://let/me/out\">and</a> then some</p><p>Some more text</p>"
    },
    {
        "type": "list-simple",
        "content": {
            "header": "Qs",
            "html": "<ul><li>Q1</li><li>Q2</li><li>Q3</li><li>Q4</li><li>Q5</li></ul>"
        }
    },
    {
        "type": "image-block",
        "content": {
            "url": "qs.png",
            "altText": "qs",
            "seoImportant": true,
            "imgSrc": "",
            "imgEmbedded": false,
            "articleID": "artcile1234",
            "height": 700,
            "width": 1200
        }
    },
    {
        "type": "text-block",
        "content": "<p>Somebody</p><p>I used to know</p><h3>Header 3</h3><p>More text</p><ol><li>1</li><li><a href=\"https://hear.com/me/out\">2</a></li><li>3</li></ol>"
    },
    {
        "type": "list-simple",
        "content": {
            "header": "1. Q1?",
            "html": "<p><em>Big 1</em></p>"
        }
    },
    {
        "type": "list-simple",
        "content": {
            "header": "2. Q2?",
            "html": "<p><em>Big 2</em></p>"
        }
    },
    {
        "type": "text-block",
        "content": "<h3>Header 3</h3><p>More text?</p>"
    },
    {
        "type": "list-pos",
        "content": {
            "header": "Qq:",
            "html": "<ul><li><em>1</em></li><li><em>2</em></li></ul>"
        }
    },
    {
        "type": "text-block",
        "content": "<p>Even more text</p>"
    }
]}

{“contentAfter”：[
{
“类型”：“文本块”，
“内容”：“标题2一些文本，然后是一些
更多文本”
},
{
“类型”：“简单列表”，
“内容”：{
“标题”：“Qs”，
“html”：“Q1
Q2
Q3
Q4
Q5”
}
},
{
“类型”：“图像块”，
“内容”：{
“url”：“qs.png”，
“altText”：“qs”，
“seoiimportant”：没错，
“imgSrc”：“，
“imgEmbedded”：错误，
“articleID”：“artcile1234”，
“高度”：700，
“宽度”：1200
}
},
{
“类型”：“文本块”，
“内容”：“某人
我以前知道
标题3更多文本
1
3”
},
{
“类型”：“简单列表”，
“内容”：{
“标题”：“1.Q1？”，
“html”：“大1”
}
},
{
“类型”：“简单列表”，
“内容”：{
“标题”：“2.Q2？”，
“html”：“大2”
}
},
{
“类型”：“文本块”，
“内容”：“标题3更多文本？”
},
{
“类型”：“列表位置”，
“内容”：{
“标题”：“Qq:”，
“html”：“1
2”
}
},
{
“类型”：“文本块”，
“内容”：“更多文本”
}
]}

有什么提示吗？
我不确定我是否理解您的意图，但这里有一个脚本，它复制了我能够注意到的部分，并在我看来创建了您作为给定输入的示例输出提供的输出：

const content={“contentBefore”：[
{
“类型”：“H2”，
“html”：“标题2”
},
{
“类型”：“文本”，
“html”：“一些文本，然后是一些”
},
{
“类型”：“文本”，
“html”：“更多文本”
},
{
“类型”：“简单列表”，
“简单”：{
“标题”：“Qs”，
“html”：“Q1
Q2
Q3
Q4
Q5”
}
},
{
“类型”：“图像”，
“内容”：{
“url”：“qs.png”，
“altText”：“qs”，
“seoImport
var data = [ { "type": "H2", "html": "<h2>Header 2</h2>" }, { "type": "text", "html": "<p>Some Text <a href=\"https://let/me/out\">and</a> then some</p>" }, { "type": "text", "html": "<p>Some more text</p>" }, { "type": "list-simple", "simple": { "header": "Qs", "html": "<ul><li>Q1</li><li>Q2</li><li>Q3</li><li>Q4</li><li>Q5</li></ul>" } }, { "type": "image", "content": { "url": "qs.png", "altText": "qs", "seoImportant": true, "imgSrc": "", "imgEmbedded": false, "articleID": "artcile1234", "height": 700, "width": 1200 } }, { "type": "text", "html": "<p>Somebody</p>" }, { "type": "text", "html": "<p>I used to know</p>" }, { "type": "H3", "html": "<h3>Header 3</h3>" }, { "type": "text", "html": "<p>More text</p>" }, { "type": "text", "html": "<ol><li>1</li><li><a href=\"https://hear.com/me/out\">2</a></li><li>3</li></ol>" }, { "type": "list-simple", "simple": { "header": "1. Q1?", "html": "<p><em>Big 1</em></p>" } }, { "type": "list-simple", "simple": { "header": "2. Q2?", "html": "<p><em>Big 2</em></p>" } }, { "type": "H3", "html": "<h3>Header 3</h3>" }, { "type": "text", "html": "<p>More text?</p>" }, { "type": "list-pos", "pos": { "header": "Qq:", "html": "<ul><li><em>1</em></li><li><em>2</em></li></ul>" } }, { "type": "text", "html": "<p>Even more text</p>" } ];


data.reduce(function(acc,val){
    if(acc[val["type"]]){
        acc[val["type"]].push(val);
    } else {
        acc[val["type"]] = [val];
    }
return acc;
},{});