我有一個像這樣的內容塊陣列：
interface Content{
type: string,
content: string | string[]
}
const content: Content[] = [
{
type: "heading"
content: "whatever"
},
{
type: "para"
content: "whatever"
},
{
type: "para"
content: "whatever"
},
{
type: "list_item"
content: "whatever"
},
{
type: "list_item"
content: "whatever"
},
{
type: "list_item"
content: "whatever"
},
{
type: "para"
content: "whatever"
},
{
type: "heading"
content: "whatever"
},
{
type: "para"
content: "whatever"
},
{
type: "para"
content: "whatever"
},
{
type: "list_item"
content: "whatever"
},
{
type: "list_item"
content: "whatever"
},
{
type: "list_item"
content: "whatever"
},
{
type: "list_item"
content: "whatever"
},
{
type: "para"
content: "whatever"
},
]
我正在嘗試撰寫一個函式，該函式可以將這些list_item' 合并到list一個陣列中，每個陣列的內容。因此，上述輸入的函式輸出應為：
[
{
type: "heading"
content: "whatever"
},
{
type: "para"
content: "whatever"
},
{
type: "para"
content: "whatever"
},
{
type: "list"
content: ["whatever","whatever","whatever"]
},
{
type: "para"
content: "whatever"
},
{
type: "heading"
content: "whatever"
},
{
type: "para"
content: "whatever"
},
{
type: "para"
content: "whatever"
},
{
type: "list"
content: ["whatever", "whatever", "whatever", "whatever"]
},
{
type: "para"
content: "whatever"
},
]
我一直在嘗試使用三指標系統，將陣列從 i=1 回圈到 i < length - 1，跟蹤prev和curr塊next，但是，我對邏輯以及我應該如何處理案例。
我覺得這對于更有經驗的演算法設計者來說是一個相當簡單的問題，所以我一直在尋找一些指導。
uj5u.com熱心網友回復：
一個相當簡單的回圈，檢查是否current.type是一個'list_item'，type: 'list'如果我們已經創建了一個物件，則實體化一個新物件或推送到前一個物件。
const content = [{ type: "heading", content: "whatever" }, { type: "para", content: "whatever" }, { type: "para", content: "whatever" }, { type: "list_item", content: "list1 1" }, { type: "list_item", content: "list1 2" }, { type: "list_item", content: "list1 3" }, { type: "para", content: "whatever" }, { type: "heading", content: "whatever" }, { type: "para", content: "whatever" }, { type: "para", content: "whatever" }, { type: "list_item", content: "list2 1" }, { type: "list_item", content: "list2 2" }, { type: "list_item", content: "list2 3" }, { type: "list_item", content: "list2 4" }, { type: "para", content: "whatever" },];
const res = [];
for (const item of content) {
if (item.type === 'list_item') {
if (res[res.length - 1]?.type !== 'list') {
res.push({ type: 'list', content: [] });
}
res[res.length - 1].content.push(item.content);
} else {
res.push({ ...item });
}
}
console.log(res);避免重復訪問陣列尾部的另一種方法是將對活動串列陣列的參考存盤在臨時變數中，并在每次list_items 序列結束時重置它。（TS游樂場）
const content = [{ type: "heading", content: "whatever" }, { type: "para", content: "whatever" }, { type: "para", content: "whatever" }, { type: "list_item", content: "list1 1" }, { type: "list_item", content: "list1 2" }, { type: "list_item", content: "list1 3" }, { type: "para", content: "whatever" }, { type: "heading", content: "whatever" }, { type: "para", content: "whatever" }, { type: "para", content: "whatever" }, { type: "list_item", content: "list2 1" }, { type: "list_item", content: "list2 2" }, { type: "list_item", content: "list2 3" }, { type: "list_item", content: "list2 4" }, { type: "para", content: "whatever" },];
const res = [];
let temp = [];
for (const item of content) {
if (item.type === 'list_item') {
if (!temp.length) {
res.push({ type: 'list', content: temp });
}
temp.push(item.content);
} else {
if (temp.length) {
temp = [];
}
res.push({ ...item });
}
}
console.log(res);uj5u.com熱心網友回復：
您可以使用reduce回傳新陣列：
const content = [{ type: "heading", content: "whatever" }, { type: "para", content: "whatever" }, { type: "para", content: "whatever" }, { type: "list_item", content: "list1 1" }, { type: "list_item", content: "list1 2" }, { type: "list_item", content: "list1 3" }, { type: "para", content: "whatever" }, { type: "heading", content: "whatever" }, { type: "para", content: "whatever" }, { type: "para", content: "whatever" }, { type: "list_item", content: "list2 1" }, { type: "list_item", content: "list2 2" }, { type: "list_item", content: "list2 3" }, { type: "list_item", content: "list2 4" }, { type: "para", content: "whatever" },];
const result = content.reduce(function (acc, item) {
if (item.type !== "list_item") {
acc.push({...item });
} else if (acc.at(-1)?.type !== 'list') {
acc.push({ type: 'list', content: [item.content] });
} else {
acc.at(-1).content.push(item.content);
}
return acc;
}, []);
console.log(result);at(-1)用于檢索累積陣列中的最后一個條目，并且?.用于在累積陣列仍然為空時不會失敗。
uj5u.com熱心網友回復：
我認為只使用 js 內置陣列方法就足夠優化了
const a = [
{
type: "heading",
content: "whatever"
},
{
type: "para",
content: "whatever"
},
{
type: "para",
content: "whatever"
},
{
type: "list_item",
content: "whatever 1"
},
{
type: "list_item",
content: "whatever 2"
},
{
type: "list_item",
content: "whatever 3"
},
{
type: "para",
content: "whatever"
},
{
type: "heading",
content: "whatever"
},
{
type: "para",
content: "whatever"
},
{
type: "para",
content: "whatever"
},
{
type: "list_item",
content: "whatever 4"
},
{
type: "list_item",
content: "whatever 5"
},
{
type: "list_item",
content: "whatever 6"
},
{
type: "list_item",
content: "whatever 7"
},
{
type: "para",
content: "whatever"
},
]
let listItemContent = [];
const res = a.reduce((total, v) => {
if(v.type === "list_item") {
listItemContent.push(v.content);
}
else if(listItemContent.length > 0) {
total.push({type: "list", content: listItemContent});
listItemContent = [];
} else {
total.push(v);
}
return total;
}, []);
if(listItemContent.length > 0) {
res.push({type: "list", content: listItemContent});
}
console.log(res)轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/532370.html