是否可以在以下代碼中結合 map() 和 concat() 以使其更簡潔/更短？
const firstColumnData = data.map((item: any) => {
return item.firstColumn;
});
const secondColumnData = data.map((item: any) => {
return item.secondColumn;
});
const allData = firstColumnData.concat(secondColumnData);
對于背景關系，稍后在檔案中 allData 被映射以將資料填充到列中。具體資料取決于哪個頁面正在呼叫該組件。
基本上，我想知道是否可以跳過 firstColumnData 和 secondColumn 資料的宣告并直接將值分配給 allData。這是我嘗試重構的一個示例，但它不起作用。（白頁，無法渲染）
const allData = data.map((item: any => {
return item.firstColumn.concat(item.secondColumn)
});
uj5u.com熱心網友回復：
您可以使用單個reduce()操作。可以說，您只需迭代一次即可保存的內容，您會失去可讀性：
const data =[
{firstColumn: 1, secondColumn: 2},
{firstColumn: 3, secondColumn: 4}
];
const result = data.reduce((a, {firstColumn, secondColumn}, i, {length}) => {
a[i] = firstColumn;
a[i length] = secondColumn;
return a;
}, []);
console.log(result);uj5u.com熱心網友回復：
我同意 Robby 的觀點，即可讀性可能是其中最重要的部分。
不過，您可以這樣寫：
const allData = [...data.map(item => item.firstColumn), ...data.map(item.secondColumn)];
但在這種情況下，您仍然回圈兩次，因此您沒有保存任何計算，您只是縮短了撰寫時間。
uj5u.com熱心網友回復：
如果保證屬性是有序的，您可以“壓縮” Object.values. 這將處理任意數量的屬性而無需顯式解構。
const data = [
{ firstColumn: 1, secondColumn: 2 },
{ firstColumn: 3, secondColumn: 4 }
];
const result = zip(...data.map(Object.values)).flat()
console.log(result)<script>
/**
* @see https://stackoverflow.com/a/10284006/13762301
*/
const zip = (...rows) => [...rows[0]].map((_, c) => rows.map((row) => row[c]));
</script>但是為了避免依賴屬性順序，您仍然可以解構。
const result = zip(...data.map(({ firstColumn, secondColumn }) => [firstColumn, secondColumn])).flat()
有關“zip”的更多討論，請參見：Python 的 zip 函式的 Javascript 等效項。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/478301.html
標籤：javascript 反应