扁平化之谜，原来是这样

2023-11-10 10:06:13

今天在刷面试题，看到了对象扁平化和数组扁平化，因此写这篇文章记录一下。如果有错误，可以在评论区中指正。

对象扁平化

对象扁平化是指将对象的所有属性值都放在同一层级上，而不会再有嵌套属性。例如，下面这个对象：

const user = {
  name: '张三',
  age: 20,
  address: {
    city: '北京',
    street: '海淀区五道口'
  }
};

可以被扁平化为：

const flattenedUser = {
  name: '张三',
  age: 20,
  'address.city': '北京',
  'address.street': '海淀区五道口'
};

对象扁平化有多种实现方法，最简单的方法是使用递归。我们可以在对象中遍历每个属性，如果属性值是一个对象，我们就递归地将该对象扁平化。如果属性值不是对象，我们就将它添加到扁平化的对象中。

function flattenObject(obj) {
  const flattenedObj = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      const value = obj[key];
      if (typeof value === 'object') {
        const flattenedValue = flattenObject(value);
        for (const key in flattenedValue) {
          if (flattenedValue.hasOwnProperty(key)) {
            flattenedObj[`${key}.${key}`] = flattenedValue[key];
          }
        }
      } else {
        flattenedObj[key] = value;
      }
    }
  }
  return flattenedObj;
}

数组扁平化

数组扁平化是指将数组中的所有元素都放在同一层级上，而不会再有嵌套数组。例如，下面这个数组：

const arr = [1, 2, [3, 4], [5, [6, 7]]];

可以被扁平化为：

const flattenedArr = [1, 2, 3, 4, 5, 6, 7];

数组扁平化有多种实现方法，最简单的方法是使用递归。我们可以在数组中遍历每个元素，如果元素是一个数组，我们就递归地将该数组扁平化。如果元素不是数组，我们就将它添加到扁平化的数组中。

function flattenArray(arr) {
  const flattenedArr = [];
  for (let i = 0; i < arr.length; i++) {
    const element = arr[i];
    if (Array.isArray(element)) {
      const flattenedElement = flattenArray(element);
      flattenedArr.push(...flattenedElement);
    } else {
      flattenedArr.push(element);
    }
  }
  return flattenedArr;
}

Lodash

Lodash 是一个 JavaScript 库，它提供了许多有用的函数，其中就包括对象扁平化和数组扁平化的函数。

const flattenedUser = _.flatten(user);
const flattenedArr = _.flatten(arr);

使用 Lodash 可以大大简化对象扁平化和数组扁平化的操作。

算法原理

数组扁平化背后的算法原理其实很简单，它就是利用递归将嵌套的数组一层一层地展开，直到所有元素都处于同一层级。

function flattenArray(arr) {
  const flattenedArr = [];
  for (let i = 0; i < arr.length; i++) {
    const element = arr[i];
    if (Array.isArray(element)) {
      const flattenedElement = flattenArray(element);
      flattenedArr.push(...flattenedElement);
    } else {
      flattenedArr.push(element);
    }
  }
  return flattenedArr;
}