从路径字符串获取嵌套对象属性

JavaScriptJavaScriptBeginner
立即练习

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

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

简介

在本实验中,我们将探索如何在JavaScript中使用给定的路径字符串来检索嵌套对象的属性。我们将学习如何使用各种数组方法,如 map()filter()reduce(),从复杂对象中提取特定值。这项技能对于处理大型数据集和返回嵌套JSON对象的API至关重要。


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/spread_rest("`Spread and Rest Operators`") subgraph Lab Skills javascript/variables -.-> lab-28356{{"`从路径字符串获取嵌套对象属性`"}} javascript/data_types -.-> lab-28356{{"`从路径字符串获取嵌套对象属性`"}} javascript/arith_ops -.-> lab-28356{{"`从路径字符串获取嵌套对象属性`"}} javascript/comp_ops -.-> lab-28356{{"`从路径字符串获取嵌套对象属性`"}} javascript/array_methods -.-> lab-28356{{"`从路径字符串获取嵌套对象属性`"}} javascript/higher_funcs -.-> lab-28356{{"`从路径字符串获取嵌套对象属性`"}} javascript/spread_rest -.-> lab-28356{{"`从路径字符串获取嵌套对象属性`"}} end

如何从路径字符串中检索嵌套对象属性

要进行编码练习,请打开终端/SSH并输入 node

以下函数通过使用路径字符串中指定的选择器从对象中检索一组属性。要实现这一点,请执行以下步骤:

  1. 使用 Array.prototype.map() 遍历每个选择器,并应用 String.prototype.replace() 将方括号替换为点号。
  2. 使用 String.prototype.split() 将每个选择器拆分为字符串数组。
  3. 使用 Array.prototype.filter() 移除任何空值。
  4. 使用 Array.prototype.reduce() 检索每个选择器指示的值。

以下是该函数:

const get = (from, ...selectors) =>
  [...selectors].map((s) =>
    s
      .replace(/\[([^\[\]]*)\]/g, ".$1.")
      .split(".")
      .filter((t) => t !== "")
      .reduce((prev, cur) => prev && prev[cur], from)
  );

你可以使用此函数通过路径字符串从嵌套对象中检索值。以下是一个示例:

const obj = {
  selector: { to: { val: "val to select" } },
  target: [1, 2, { a: "test" }]
};
get(obj, "selector.to.val", "target[0]", "target[2].a");
// ['val to select', 1, 'test']

总结

恭喜你!你已经完成了“从路径字符串获取嵌套对象属性”实验。你可以在LabEx中练习更多实验来提升你的技能。

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