在JavaScript中展开对象数组

JavaScriptJavaScriptBeginner
立即练习

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

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

简介

在本实验中,我们将探索 JavaScript 中的 unwind 函数。此函数的目的是从一个对象及其一个数组值属性生成一个对象数组。通过使用对象解构和 Array.prototype.map(),我们可以创建一个对象数组,其中每个对象都包含原始对象的值,但指定的键除外,该键被映射到其各个值。通过本实验,我们将更深入地了解如何在 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/array_methods("`Array Methods`") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("`Higher-Order Functions`") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("`Destructuring Assignment`") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("`Spread and Rest Operators`") subgraph Lab Skills javascript/variables -.-> lab-28684{{"`在JavaScript中展开对象数组`"}} javascript/data_types -.-> lab-28684{{"`在JavaScript中展开对象数组`"}} javascript/arith_ops -.-> lab-28684{{"`在JavaScript中展开对象数组`"}} javascript/comp_ops -.-> lab-28684{{"`在JavaScript中展开对象数组`"}} javascript/array_methods -.-> lab-28684{{"`在JavaScript中展开对象数组`"}} javascript/higher_funcs -.-> lab-28684{{"`在JavaScript中展开对象数组`"}} javascript/destr_assign -.-> lab-28684{{"`在JavaScript中展开对象数组`"}} javascript/spread_rest -.-> lab-28684{{"`在JavaScript中展开对象数组`"}} end

展开对象函数

要通过对象的数组值属性展开对象,请使用 unwind 函数。

  • 要开始编码,请打开终端/SSH 并输入 node
  • 该函数使用对象解构来从对象中排除指定 key 的键值对。
  • 然后,它对给定 key 的值使用 Array.prototype.map() 来创建一个对象数组。
  • 每个对象都包含原始对象的值,但 key 被映射到其各个值。
const unwind = (key, obj) => {
  const { [key]: _, ...rest } = obj;
  return obj[key].map((val) => ({ ...rest, [key]: val }));
};

示例用法:

unwind("b", { a: true, b: [1, 2] }); // [{ a: true, b: 1 }, { a: true, b: 2 }]

总结

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

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