如何使用 JavaScript 中键的路径展开对象？

在本文中，我们将学习使用 JavaScript 中的键路径对其中具有一定数量的键值对的对象进行展平。

问题陈述：给定一个具有多个键值对的对象。有些键在点后有各种键名，您基本上需要解开该对象。您可以实现一条更容易分别区分键和它们的值的路径。

方法：我们首先需要声明一个对象，该对象最初将具有不同的键值对。我们需要将几个键名分开并显示在由该特定键及其值组成的同一主对象下。

例如，“car.seat.0.seater”表示汽车对象中的一个嵌套对象，该对象进一步是一个数组，该数组由与其值对应的第一个索引处的“座位”键组成。

让我们首先尝试了解如何在 JavaScript 中创建一个具有多个键值对的对象。

示例 1：以下代码片段将帮助我们创建对象。

Javascript

 
 let object = {
    "firstName": "Hello",
    "lastName": "World",
    "car.name": "Duster",
    "car.price": 9.9,
    "car.mileage": 16.42,
    "car.seat.0.seater": 5,
    "car.seat.1.seatLength": 4360,
  };
  console.log(object);
 

输出：

{
  'firstName': 'Hello',
  'lastName': 'World',
  'car.name': 'Duster',
  'car.price': 9.9,
  'car.mileage': 16.42,
  'car.seat.0.seater': 5,
  'car.seat.1.seatLength': 4360
}

在使用几个键值对创建对象之后，现在我们将分析我们可以通过哪些方法来实现未展平的对象。以下是实现上述目标的一些方法。

方法一：

• 在这种方法中，我们将使用 for-in 循环来遍历我们的对象，然后将我们的键存储在一个变量中，每当遇到点时，我们将使用split()方法来获取所有键名。
• 我们将使用 reduce() 方法来帮助我们在将字符串转换为数字后检查下一个键是否为数字。
• 然后我们将使用 JSON.stringify() 方法，该方法通过将所有对象的值转换为相应的字符串值来帮助我们更有效地打印我们的对象。

Javascript

  let object = {
    firstName: "Hello",
    lastName: "World",
    "car.name": "Duster",
    "car.price": 9.9,
    "car.mileage": 16.42,
    "car.seat.0.seater": 5,
    "car.seat.0.seatLength": 4360,
  };
  
  let unflattenObject = (data) => {
    let result = {};
    for (let i in data) {
      let keys = i.split(".");
      keys.reduce((acc, value, index) => {
        return (
          acc[value] ||
          (acc[value] = isNaN(Number(keys[index + 1]))
            ? keys.length - 1 === index
              ? data[i]
              : {}
            : [])
        );
      }, result);
    }
    return result;
  };
  console.log(JSON.stringify(
    unflattenObject(object), null, 4));

输出：

{
    "firstName": "Hello",
    "lastName": "World",
    "car": {
        "name": "Duster",
        "price": 9.9,
        "mileage": 16.42,
        "seat": [
            {
                "seater": 5,
                "seatLength": 4360
            }
        ]
    }
}

方法二：

• 在这种方法中，我们将首先迭代我们的对象，并在任何键名后面有一个点时使用split()方法。
• 在遍历拆分后得到的子串时，我们将首先检查下一个子串是否为数字。
• 如果它不是一个数字，那么它将代表一个对象的键名之一，否则它是一个数组的索引，因此我们将把我们的值添加到一个空对象或一个空数组中。

Javascript

 
 let object = {
    firstName: "Hello",
    lastName: "World",
    "car.name": "Duster",
    "car.price": 9.9,
    "car.mileage": 16.42,
    "car.seat.0.seater": 5,
    "car.seat.0.seatLength": 4360,
  };
  let unflatten = (obj) => {
    let result = {},
      temp,
      substrings,
      property,
      i;
    for (property in obj) {
      substrings = property.split(".");
      temp = result;
      for (i = 0; i < substrings.length - 1; i++) {
        if (!(substrings[i] in temp)) {
          if (isFinite(substrings[i + 1])) {
            temp[substrings[i]] = [];
          } else {
            temp[substrings[i]] = {};
          }
        }
        temp = temp[substrings[i]];
      }
      temp[substrings[substrings.length - 1]] = obj[property];
    }
   return result;
  };
 console.log(JSON.stringify(unflatten(object), null, 4));

输出：

{
    "firstName": "Hello",
    "lastName": "World",
    "car": {
        "name": "Duster",
        "price": 9.9,
        "mileage": 16.42,
        "seat": [
            {
                "seater": 5,
                "seatLength": 4360
            }
        ]
    }
}