Maison > interface Web > js tutoriel > Comment développer des objets à l'aide de chemins clés en JavaScript ?

Comment développer des objets à l'aide de chemins clés en JavaScript ?

王林
Libérer: 2023-08-29 15:09:03
avant
1357 Les gens l'ont consulté

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

在 JavaScript 中,可以通过创建对象的浅表副本来“扁平化”对象。这对于创建对象的快照很有用,但如果稍后修改对象,可能会导致问题。如果需要取消展平对象,可以使用键的路径来恢复原始结构。

使用密钥路径

当对象被展平时,键将连接成单个字符串。您可以使用此字符串通过创建具有相同键和值的对象来展开对象。

例如,考虑以下对象。

var obj = { 
   "foo.bar": "baz", 
   "foo.qux": "quux" 
};
Copier après la connexion

您可以通过创建具有相同键和值的对象来展开该对象。

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result1">Original Object:</div><br/>
   <div id="result2">After Unflatten:</div>
   <script>
      var obj = {
         "foo.bar": "baz",
         "foo.qux": "quux"
      };
      var unflattenedObj = {};
      for (var key in obj) {
         var value = obj[key];
         var path = key.split(".");
         var current = unflattenedObj;
         for (var i = 0; i < path.length - 1; i++) {
            var part = path[i];
            current[part] = current[part] || {};
            current = current[part];
         }
         current[path[path.length - 1]] = value;
      }
      document.getElementById("result1").innerHTML += JSON.stringify(obj);
      document.getElementById("result2").innerHTML += JSON.stringify(unflattenedObj);
      console.log(unflattenedObj)
   </script>
</body>
</html>
Copier après la connexion

取消展平的好处

出于多种原因,取消展平对象可能很有用。首先,它可以帮助您避免重复的密钥。如果有两个同名的键,当对象被展平时它们将被覆盖。其次,它可以帮助您保留对象的原始结构。当您需要将对象传递给需要某种格式的函数时,这可能很重要。

结论

取消展平对象很简单,只需创建具有相同键和值的对象即可。这对于避免重复键和保留原始对象结构很有用。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal