JavaScript 如何使用键的路径解压对象

在本文中，我们将学习如何解压一个对象，该对象在其中具有特定数量的键值对，并带有这些键的路径。

问题描述： 给定一个具有多个键值对的对象。某些键在点后面有多个键名，你需要将该对象解压。您可以通过路径来区分键和值。

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

例如，“car.seat.0.seater”代表了car对象中的嵌套对象，它进一步是一个包含“seater”键在其第一个索引上对应值的数组。

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

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

Javascript

<script>  
 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); 
 </script>

输出：

{
  '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
}

创建了包含多个键值对的对象之后，现在我们将分析一下可以实现非扁平化对象的方法。以下是实现上述目标的一些方法。

方法1：

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

Javascript

<script> 
  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)); 
</script>

输出结果：

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

第二种方法：

在这种方法中，我们首先遍历对象，当有任何键名后面跟着一个点时，我们还会使用 split() 方法进行分割。
在遍历分割后得到的子字符串时，我们首先检查下一个子字符串是数字还是非数字。
如果它不是数字，则表示对象的一个键名，否则它是一个数组的索引，因此我们将根据情况在一个空对象或一个空数组中添加我们的值。

JavaScript

<script>  
 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)); 
</script>

输出：

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