在日常的 JavaScript 編碼中，我們經常使用解構語法來提取對象中的屬性。假設我們有一個名為 fetchResult 的對象，代表從介面返回的數據，其中包含一個欄位名為 data。 const fetchResult = { data: null }; 在提取 data 欄位時，為了避免介面未 ...
在日常的 JavaScript 編碼中，我們經常使用解構語法來提取對象中的屬性。假設我們有一個名為 fetchResult 的對象，代表從介面返回的數據，其中包含一個欄位名為 data。
const fetchResult = {
data: null
};
在提取 data 欄位時，為了避免介面未返回該欄位而導致的問題，我們常常會使用解構語法，並給予該欄位一個預設值，比如 []。代碼看起來可能會像這樣：
const { data: confList = [] } = fetchResult;
這個操作的意圖是將 fetchResult 中的 data 欄位解構並賦值給變數 confList，同時，若 data 欄位未被返回，我們期望將其預設值設置為空數組 []。
然而，這裡隱藏了一個容易忽略的陷阱。儘管我們為 confList 指定了預設值為 []，但是當 data 欄位的值為 null 時，解構語法並不會觸發預設值的賦值，而是保留了 null 的值。這導致了一個潛在的問題：
即使我們嘗試使用 confList 作為數組來調用一些數組方法，由於其實際值是 null，這樣的操作將會觸發錯誤。
為瞭解決這個問題，我們需要在解構後手動檢查並將 null 值轉換為預設的空數組，以確保 confList 始終是一個數組，從而避免可能出現的錯誤：
const fetchResult = {
data: null
};
const { data } = fetchResult;
const confList = Array.isArray(data) ? data : [];
這種方式通過直接檢查 data 欄位是否為數組，然後手動設定 confList 變數，確保了即使 data 欄位的值為 null 或者未定義，confList 也會被正確地設定為一個空數組，避免了因為 null 值導致的錯誤。這樣我們可以放心地使用 confList 並調用其中的數組方法，而不會觸發意外的異常。
