這將是我們幾乎日常都會用到的一個超實用函數。

根據數據的多樣性與結構，API 的響應可能會返回極其復雜的 JSON 對象。有時候，僅僅從整個 JSON 中抓取一個字段可能就不太夠用了。我們可能需要提取多個字段來展示在網頁上。每次手動遍歷這樣的復雜 JSON 顯然不是個好主意。如果能將其轉換為更簡潔的 JSON，根據情況，那將是個不錯的選擇。

希望這些介紹已經足夠了。讓我們直奔主題吧。

這里，我要處理的是深度嵌套的 JSON。我會將其轉化為簡單的 JSON。

所以，這是我的示例 JSON：

const obj = {first: {first: '1',second: {second: true,third: {third: 'third',fourth: {fourth: 4}}}}
}

我期望的輸出是：

{first: '1', second: true, third: 'third', fourth: 4}

再仔細對比一下輸入和輸出，應該就能理解了吧。

現在，讓我們動手實現這個功能：

const simpleObj = {};
function destructure(obj) {for (let key in obj) {const value = obj[key];const type = typeof value;if (['string', 'boolean'].includes(type) || (type === 'number' && !isNaN(value))) {simpleObj[key] = value;} else if (type === 'object') {Object.assign(simpleObj, destructure(value));}}return simpleObj;
}console.log(destructure(obj));

for (let key in obj) { -> 遍歷給定的對象。

const value = obj[key];
const type = typeof value;

獲取實際的 value 和它的 type。

if (['string', 'boolean'].includes(type) || (type === 'number' && !isNaN(value))) {simpleObj[key] = obj[key];

驗證鍵值是否為非 object 類型。如果不是 object，則復制到 simpleObj 中。

else if (typeof obj[key] === 'object') {Object.assign(simpleObj, destructure(obj[key]));}

如果是對象類型，則再次調用同一函數（這叫做“遞歸”），以深入對象的嵌套層級。同時，將所有內容賦值給 simpleObj。因此，在最后，這個單一對象將包含所有的鍵值對。

最后，返回這個對象并在控制臺打印出來。

如果你有任何建議，讓我知道如何能以更優秀的方式實現這個功能，我將非常感激。謝謝。