在 JavaScript 中使用路径扁平化对象 | 嵌套归约与拆分

简介

在本实验中，我们将探索如何在JavaScript中使用带键路径的对象来实现对象的扁平化。我们将使用嵌套的 Array.prototype.reduce() 和 String.prototype.split() 方法，以点号作为分隔符来拆分每个键，并根据这些键添加对象。完成本实验后，你将对如何有效地将扁平对象转换为嵌套对象有深入的理解。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("Destructuring Assignment") subgraph Lab Skills javascript/variables -.-> lab-28678{{"将 JavaScript 对象扁平化"}} javascript/data_types -.-> lab-28678{{"将 JavaScript 对象扁平化"}} javascript/arith_ops -.-> lab-28678{{"将 JavaScript 对象扁平化"}} javascript/comp_ops -.-> lab-28678{{"将 JavaScript 对象扁平化"}} javascript/array_methods -.-> lab-28678{{"将 JavaScript 对象扁平化"}} javascript/higher_funcs -.-> lab-28678{{"将 JavaScript 对象扁平化"}} javascript/destr_assign -.-> lab-28678{{"将 JavaScript 对象扁平化"}} end

如何在JavaScript中扁平化对象

要在JavaScript中使用带键路径的对象来实现扁平化，可按以下步骤操作：

打开终端/SSH并输入 node 以开始练习编码。
使用嵌套的 Array.prototype.reduce() 将扁平路径转换为叶节点。
使用 String.prototype.split() 以点号作为分隔符拆分每个键，并使用 Array.prototype.reduce() 根据这些键添加对象。
如果当前累加器已经包含针对某个特定键的值，则返回其值作为下一个累加器。
否则，将适当的键值对添加到累加器对象中，并返回该值作为累加器。

以下是 unflattenObject 函数的代码：

const unflattenObject = (obj) =>
  Object.keys(obj).reduce((res, k) => {
    k.split(".").reduce(
      (acc, e, i, keys) =>
        acc[e] ||
        (acc[e] = isNaN(Number(keys[i + 1]))
          ? keys.length - 1 === i
            ? obj[k]
            : {}
          : []),
      res
    );
    return res;
  }, {});

你可以使用 unflattenObject 函数在JavaScript中扁平化对象：

unflattenObject({ "a.b.c": 1, d: 1 }); // { a: { b: { c: 1 } }, d: 1 }
unflattenObject({ "a.b": 1, "a.c": 2, d: 3 }); // { a: { b: 1, c: 2 }, d: 3 }
unflattenObject({ "a.b.0": 8, d: 3 }); // { a: { b: [ 8 ] }, d: 3 }

总结

恭喜你！你已完成“扁平化对象”实验。你可以在LabEx中练习更多实验以提升技能。