先追這段程式
三列資料是 A、B、C。畫面只要可見列，再把 ID 轉小寫；B 不顯示，但來源仍須保留。
const source=[{id:'A',visible:true},{id:'B',visible:false},{id:'C',visible:true}];
const display=source.filter(row=>row.visible).map(row=>row.id.toLowerCase());
console.log(JSON.stringify({display,sourceIds:source.map(row=>row.id)}));
{"display":["a","c"],"sourceIds":["A","B","C"]}| 處理階段 | ID | 對來源的影響 |
|---|---|---|
| 來源 | A, B, C | length: 3 |
| filter | A, C | 只在結果略過 B |
| map | a, c | 傳回文字 |
結果為何如此
filter 建立所選值的新陣列，map 建立回呼結果的新陣列。本例只讀原物件、傳回文字，因此來源不變；若直接保留物件，參照仍共用，回呼也可能自行改它們。
比較另一種寫法
透過篩選結果改物件，原物件也會變。新陣列不等於各列資料都已複製。
const source=[{id:'A',visible:true},{id:'B',visible:false}];const filtered=source.filter(row=>row.visible);
filtered[0].id='Changed';
console.log(JSON.stringify({differentArray:filtered!==source,sameRow:filtered[0]===source[0],sourceIds:source.map(row=>row.id)}));
{"differentArray":true,"sameRow":true,"sourceIds":["Changed","B"]}試清邊界
所有列都不顯示時，filter 會否把來源清空？
查看參考答案
不會。結果是空陣列，原有列和次序仍保留。
const source=[{id:'A',visible:false},{id:'B',visible:false}];const display=source.filter(row=>row.visible).map(row=>row.id.toLowerCase());
console.log(JSON.stringify({display,sourceIds:source.map(row=>row.id),length:source.length}));
{"display":[],"sourceIds":["A","B"],"length":2}