文章中英模式

布魯斯前端JS面試題目 - 實作扁平化陣列或物件

學習如何實作扁平化陣列與物件，掌握遞迴與迭代的處理方式，提升前端面試競爭力。

文章中英模式

懶得看文章？那就來看影片吧

什麼是陣列/物件扁平化？

扁平化是指將多層嵌套的資料結構轉換為單層結構的過程。在前端開發中，常見於處理API回傳的嵌套JSON數據或處理複雜的樹狀結構。

1. 陣列扁平化：將多維陣列轉為一維陣列
2. 物件扁平化：將嵌套物件轉為單層鍵值對

這類題目考察的是對遞迴、迭代的理解，以及如何處理複雜資料結構。

1. 實作陣列扁平化

陣列扁平化可以透過遞迴或迭代方式實現，面試中通常需要你手寫實現方法，而不是直接使用 Array.flat()。

方法一：遞迴方式

function flattenArray(arr) {
  let result = [];
  
  arr.forEach(item => {
    if (Array.isArray(item)) {
      // 將遞迴結果合併到當前陣列
      result = result.concat(flattenArray(item));
    } else {
      result.push(item);
    }
  });
  
  return result;
}

// 範例
const nestedArray = [1, [2, 3], [4, [5, 6]]];
console.log(flattenArray(nestedArray)); // [1, 2, 3, 4, 5, 6]

2. 實作物件扁平化

物件扁平化將巢狀物件轉換為單層物件，通常使用點符號表示層級。

function flattenObject(obj, prefix = '') {
  let result = {};
  
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      const newKey = prefix ? `${prefix}.${key}` : key;
      
      if (typeof obj[key] === 'object' && obj[key] !== null && !Array.isArray(obj[key])) {
        // 巢狀物件，遞迴處理
        Object.assign(result, flattenObject(obj[key], newKey));
      } else {
        // 基本型別值或陣列，直接賦值
        result[newKey] = obj[key];
      }
    }
  }
  
  return result;
}

// 範例
const nestedObject = {
  a: 1,
  b: {
    c: 2,
    d: {
      e: 3
    }
  },
  f: 4
};

console.log(flattenObject(nestedObject));
/*
輸出:
{
  'a': 1,
  'b.c': 2,
  'b.d.e': 3,
  'f': 4
}
*/