文章中英模式

布鲁斯前端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
}
*/