使用递归扁平化JavaScript对象

JavaScriptJavaScriptBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在本实验中,我们将探索一个JavaScript函数,该函数会使用键的路径来扁平化一个对象。该函数使用递归以及 Object.keys() 并结合 Array.prototype.reduce(),将每个叶节点转换为扁平化路径节点。完成本实验后,你将更好地理解如何操作JavaScript对象并将其扁平化,以便更轻松地进行数据处理。


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/cond_stmts("`Conditional Statements`") javascript/BasicConceptsGroup -.-> javascript/array_methods("`Array Methods`") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("`Higher-Order Functions`") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("`Destructuring Assignment`") javascript/AdvancedConceptsGroup -.-> javascript/template_lit("`Template Literals`") subgraph Lab Skills javascript/variables -.-> lab-28312{{"`使用递归扁平化JavaScript对象`"}} javascript/data_types -.-> lab-28312{{"`使用递归扁平化JavaScript对象`"}} javascript/arith_ops -.-> lab-28312{{"`使用递归扁平化JavaScript对象`"}} javascript/comp_ops -.-> lab-28312{{"`使用递归扁平化JavaScript对象`"}} javascript/cond_stmts -.-> lab-28312{{"`使用递归扁平化JavaScript对象`"}} javascript/array_methods -.-> lab-28312{{"`使用递归扁平化JavaScript对象`"}} javascript/higher_funcs -.-> lab-28312{{"`使用递归扁平化JavaScript对象`"}} javascript/destr_assign -.-> lab-28312{{"`使用递归扁平化JavaScript对象`"}} javascript/template_lit -.-> lab-28312{{"`使用递归扁平化JavaScript对象`"}} end

扁平化对象

要使用键的路径来扁平化一个对象,请遵循以下步骤:

  1. 打开终端/SSH并输入 node 以开始练习编码。
  2. 使用递归来扁平化对象。
  3. 使用 Object.keys() 并结合 Array.prototype.reduce() 将每个叶节点转换为扁平化路径节点。
  4. 如果键的值是一个对象,则使用适当的 prefix 递归调用该函数,通过 Object.assign() 创建路径。
  5. 否则,将适当的带前缀的键值对添加到累加器对象中。
  6. 省略第二个参数 prefix,除非你希望每个键都有一个前缀。

以下是一个示例实现:

const flattenObject = (obj, prefix = "") =>
  Object.keys(obj).reduce((acc, k) => {
    const pre = prefix.length ? `${prefix}.` : "";
    if (
      typeof obj[k] === "object" &&
      obj[k] !== null &&
      Object.keys(obj[k]).length > 0
    ) {
      Object.assign(acc, flattenObject(obj[k], pre + k));
    } else {
      acc[pre + k] = obj[k];
    }
    return acc;
  }, {});

你可以像这样使用 flattenObject 函数:

flattenObject({ a: { b: { c: 1 } }, d: 1 }); // { 'a.b.c': 1, d: 1 }

总结

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

您可能感兴趣的其他 JavaScript 教程