洞悉对象的本质：扁平化与反扁平化之旅

前端

2024-01-01 20:54:53

对象扁平化和反扁平化：数据处理中的魔术技巧

在浩瀚的前端开发宇宙中，对象扮演着举足轻重的角色。它们是存储和操作数据的基石。然而，当我们面对复杂的对象结构时，数据冗余、理解和维护困难等问题常常让我们头疼不已。

解药：对象扁平化和反扁平化

为了解决这些难题，掌握对象扁平化和反扁平化的技巧至关重要。它们就好比数据处理中的魔术技巧，让我们巧妙地转换数据结构，让数据处理变得高效而便捷。

对象扁平化：抽丝剥茧，化繁为简

对象扁平化是一种将多层嵌套的对象结构转换为单层结构的技术。它就像抽丝剥茧一般，将对象中的属性和值提取出来，形成一个新的扁平化对象。

扁平化后的对象更易于理解、管理和操作，也更适合在某些场景下进行数据传输和存储。

代码示例：

const user = {
  name: 'John Doe',
  address: {
    street: '123 Main Street',
    city: 'Anytown',
    state: 'CA',
    zip: '12345'
  },
  phoneNumbers: [
    {
      type: 'home',
      number: '(123) 456-7890'
    },
    {
      type: 'mobile',
      number: '(987) 654-3210'
    }
  ]
};

const flattenedUser = flatten(user);

function flatten(obj) {
  const flattenedObj = {};

  for (const key in obj) {
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      const flattenedSubObj = flatten(obj[key]);
      for (const subKey in flattenedSubObj) {
        flattenedObj[`${key}.${subKey}`] = flattenedSubObj[subKey];
      }
    } else {
      flattenedObj[key] = obj[key];
    }
  }

  return flattenedObj;
}

对象反扁平化：化整为零，重构结构

对象反扁平化则相反，它将扁平化的对象结构还原为多层嵌套的对象结构。这就好比把打乱的积木重新堆砌成一座城堡，需要耐心和技巧。

代码示例：

const flattenedUser = {
  'name': 'John Doe',
  'address.street': '123 Main Street',
  'address.city': 'Anytown',
  'address.state': 'CA',
  'address.zip': '12345',
  'phoneNumbers[0].type': 'home',
  'phoneNumbers[0].number': '(123) 456-7890',
  'phoneNumbers[1].type': 'mobile',
  'phoneNumbers[1].number': '(987) 654-3210'
};

const user = unflatten(flattenedUser);

function unflatten(obj) {
  const unflattenedObj = {};

  for (const key in obj) {
    const parts = key.split('.');
    let currentObj = unflattenedObj;

    for (let i = 0; i < parts.length; i++) {
      const part = parts[i];

      if (i === parts.length - 1) {
        currentObj[part] = obj[key];
      } else {
        if (!currentObj[part]) {
          currentObj[part] = {};
        }

        currentObj = currentObj[part];
      }
    }
  }

  return unflattenedObj;
}