Javascript如何实现对象扁平化实例详解

Javascript中有时我们需要将复杂的嵌套对象进行“扁平化”，也就是将它们转换为一维对象。下面我将详细讲解如何实现对象扁平化。

什么是对象扁平化

对象扁平化指将一个多层嵌套的对象转换成一个一维对象。比如下面这个复杂的嵌套对象：

{
  name: 'Jack',
  address: {
    province: 'Shanghai',
    city: {
      district: 'Pudong',
      street: 'Century Avenue'
    }
  }
}

可以转换为：

{
  'name': 'Jack',
  'address.province': 'Shanghai',
  'address.city.district': 'Pudong',
  'address.city.street': 'Century Avenue'
}

在实际应用场景中，扁平化对象非常有用，常被用于数据存储、数据传输等方面。

实现对象扁平化的方法

实现对象扁平化的方法有很多，下面给出两个示例。

递归实现

递归扁平化对象的过程可以简单地描述为：

• 将对象的“非对象”属性提取到结果对象中；
• 对象的“对象”属性递归处理，生成新的属性名称，并将新生成的键值对添加到结果对象中。

具体的代码实现如下：

function flatten(obj) {
  let result = {};

  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      if (typeof obj[key] === 'object' && obj[key] !== null) {
        let temp = flatten(obj[key]);
        for (let subKey in temp) {
          if (temp.hasOwnProperty(subKey)) {
            result[key + '.' + subKey] = temp[subKey];
          }
        }
      } else {
        result[key] = obj[key];
      }
    }
  }

  return result;
}

// 示例
let obj = {
  name: 'Jack',
  address: {
    province: 'Shanghai',
    city: {
      district: 'Pudong',
      street: 'Century Avenue'
    }
  }
};

let result = flatten(obj);
console.log(result);

输出结果为：

{
  "name": "Jack",
  "address.province": "Shanghai",
  "address.city.district": "Pudong",
  "address.city.street": "Century Avenue"
}

迭代实现

迭代扁平化对象的思路也很简单：利用队列来存放当前需要扁平化的对象，每次取出一个对象，将它的非对象属性提取到结果对象中，并将它的对象属性加入到队列中，直至队列为空。

具体的代码实现如下：

function flatten(obj) {
  let result = {};
  let queue = [{obj, prefix: ''}];

  while (queue.length > 0) {
    let {obj, prefix} = queue.shift();

    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (typeof obj[key] === 'object' && obj[key] !== null) {
          queue.push({obj: obj[key], prefix: prefix + key + '.'});
        } else {
          result[prefix + key] = obj[key];
        }
      }
    }
  }

  return result;
}

// 示例
let obj = {
  name: 'Jack',
  address: {
    province: 'Shanghai',
    city: {
      district: 'Pudong',
      street: 'Century Avenue'
    }
  }
};

let result = flatten(obj);
console.log(result);

输出结果同样为：

{
  "name": "Jack",
  "address.province": "Shanghai",
  "address.city.district": "Pudong",
  "address.city.street": "Century Avenue"
}

总结

以上就是实现对象扁平化的方法和示例。无论是递归还是迭代都可以完成这个任务，具体采用哪种方法取决于你的个人喜好和实际应用场景。