我正在試驗，當我有一塊從API端點收到的物件陣列時，如何讓我的代碼更簡潔。這是最初的變數：
let stringOptionsOutlet = []。
然后我想做一個新的鍵，叫做 "值"。我通常是這樣做的（我認為這很好，但我相信與你可能想出的其他技術相比，肯定有一些缺點）：
stringOptionsOutlet = [...response.data. outlet]; // 1.這是我從一個API端點得到的資料，我用spread operator復制它。
stringOptionsOutlet.map((v) => return { ...v, value。"" }; ); // 2.然后我在陣列stringOptionsOutlet里面的每一個資料物件中制作同樣的新值。
Object.entries(stringOptionsOutlet).forEach((e) => /span> {
e[1].value = e[1].id; // 3. 復制id的值到新鍵。
});
在我映射資料之前的資料：
[
{
label: "A1-1"。
id: "1",
},
{
label: "B2-1",
id: "4",
},
映射之后（步驟2和3）：
[
{
label。"A1-1"。
id: "1",
value: "1"。
},
{
label: "B2-1",
id: "4",
value: "1"。
},
]
還請您解釋一下這些技術的優點和缺點？謝謝你。
uj5u.com熱心網友回復：
你所做的將會奏效，但肯定有一些不必要的步驟，因為所寫的。當你可以映射API回應本身時，沒有必要將API回應資料復制到一個陣列中，然后再改變陣列的內容。
// You can do steps 1 2 and 3 all in 1 .map()/span>
const stringOptionsOutlet = response.data.outlet。 map(span class="hljs-params">v => {
return {
...v,
value: v.id
}
})
以一種方式完成所有作業的缺點是，如果你想做一些更復雜的邏輯，單一的.map呼叫可能會變得非常雜亂，也許引入一個單獨的步驟會更簡單，但要注意的是，你會在第二次處理資料。
uj5u.com熱心網友回復：
試試這個：
stringOptionsOutlet. map((v) => ({ ...v, value: v.id }) 。)
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/308830.html
標籤：
上一篇：我如何為每個類別挑選最低成本值？