我有一個可以創建重復部分的表格。現在，當提交表單時，表單會吐出一個巨大的物件。我正在研究一個過濾器功能，它可以過濾掉重復的部分并將重復的部分組織成陣列，以便它與我的 API 一起使用。
例如
// 基礎物件
{
question_10: ""
question_10a: ""
question_11_checkbox: false
question_11_checkbox_copy_0: false
question_11_checkbox_copy_1: true
question_11_text: "110 Monroe St"
question_11_text_copy_0: "186 Aspen Road"
question_12_checkbox: false
question_12_checkbox_copy_0: false
question_12_text: "New York"
question_12_text_copy_0: "South Orange"
...
}
// 我想要的是
{
question_10: ""
question_10a: ""
question_11_checkbox: false
question_11_checkbox_copies: [
{ question_11_checkbox_copy_0: false }
{ question_11_checkbox_copy_1: true }
]
question_11_text: "101 Monroe St"
question_11_text_copies: [
{ question_11_text_copy_0: "186 Aspen Road"}
]
question_12_checkbox: false
question_12_checkbox_copies: [
{ question_12_checkbox_copy_0: false}
]
question_12_text: "New York"
question_12_text_copies: [
{ question_12_text_copy_0: "South Orange"}
]
...
}
到目前為止，我已經能夠從原始物件中過濾掉副本并為副本創建陣列
// filter out copy keys
const copiesKey = Object.keys(data).filter(key => key.includes('copy'));
const copy = {};
// create arrays for copies
copiesKey.map(copiedQuestion => {
if (!(`${copiedQuestion.slice(0, copiedQuestion.length - 7)}_copies` in copy)) {
copy[`${copiedQuestion.slice(0, copiedQuestion.length - 7)}_copies`] = [];
}
});
我卡住的地方是不清楚如何將物件匹配到適當的陣列并推送它。例如
question_11_text_copies: [
{ question_11_text_copy_0: "186 Aspen Road" }
]
到目前為止，我已嘗試使用 array.filter 對 copy_0 物件的最后三個鍵進行切片，并將鍵與陣列名稱匹配，但這并沒有按預期作業。
如何將“copy_n”物件匹配到適當的陣列并將這些物件推送到陣列？
uj5u.com熱心網友回復：
這可能有點過時，但使用for...in回圈結合正則運算式模式匹配鍵可能是最清晰的解決方案。
const data = {
question_10: "",
question_10a: "",
question_11_checkbox: false,
question_11_checkbox_copy_0: false,
question_11_checkbox_copy_1: true,
question_11_text: "110 Monroe St",
question_11_text_copy_0: "186 Aspen Road",
question_12_checkbox: false,
question_12_checkbox_copy_0: false,
question_12_text: "New York",
question_12_text_copy_0: "South Orange",
};
const copy_n = /^(.*)_copy_(\d )$/;
const result = {};
for (const key in data) {
const value = data[key];
const match = key.match(copy_n);
if (match) {
const copies_key = `${match[1]}_copies`;
const index = parseInt(match[2], 10);
result[copies_key] ||= [];
result[copies_key][index] = { [key]: value };
} else {
result[key] = value;
}
}
console.log(result);該模式匹配以 1 個或多個小數/^(.*)_copy_(\d )$/結尾的任何內容。_copy_前面的所有_copy_內容都放在捕獲組 1 中，后面的小數_copy_放在捕獲組 2 中。
如果沒有匹配（else場景），我們只需將值分配給相同的鍵。
如果有匹配（如果場景），我們首先確定集合鍵（copies_key）和要使用的索引。然后我們檢查是否result[copies_key]已經設定（我們檢查它是否是一個準確的真實值）。如果不是，我們將它分配給一個空陣列。之后，我們使用index將物件分配給陣列中的正確索引。
uj5u.com熱心網友回復：
您可以將物件的條目減少為新物件。對于每個鍵，使用帶有前瞻的 RegExp 查找它是否具有基本鍵（“復制”之前的那個）。如果它沒有基本密鑰，則將其直接添加到累加器中。如果是這樣，請將其添加到適當的“副本”陣列中（如果需要，使用邏輯空值賦值對其進行初始化??=）（TS 操場）。
const fn = obj => Object.entries(obj)
.reduce((acc, [k, v]) => {
const [baseKey] = k.match(/.*(?=_copy_)/) ?? [] // get the key from an item with copy
if(!baseKey) acc[k] = v // if no baseKey add the item to the accumulator
else {
const copiesKey = `${baseKey}_copies`
acc[copiesKey] ??= [] // if no copies key add a new one to the accumulator
acc[copiesKey].push({ [k]: v }) // create an object and push to the current copies key
}
return acc
}, {})
const obj = {"question_10":"","question_10a":"","question_11_checkbox":false,"question_11_checkbox_copy_0":false,"question_11_checkbox_copy_1":true,"question_11_text":"110 Monroe St","question_11_text_copy_0":"186 Aspen Road","question_12_checkbox":false,"question_12_checkbox_copy_0":false,"question_12_text":"New York","question_12_text_copy_0":"South Orange"}
const result = fn(obj)
console.log(result)轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/462236.html
標籤：javascript 数组 打字稿 目的