映射数组差异

JavaScriptJavaScriptBeginner
立即练习

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

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

简介

在本实验中,我们将探索 JavaScript 中 differenceBy 函数的实现。该函数使我们能够通过对两个数组中的每个元素应用一个提供的函数来找出它们之间的差异。我们将学习如何使用 SetArray.prototype.map()Array.prototype.filter() 来根据特定标准有效地比较和过滤数组。


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/AdvancedConceptsGroup -.-> javascript/higher_funcs("`Higher-Order Functions`") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("`Destructuring Assignment`") subgraph Lab Skills javascript/variables -.-> lab-28484{{"`映射数组差异`"}} javascript/data_types -.-> lab-28484{{"`映射数组差异`"}} javascript/arith_ops -.-> lab-28484{{"`映射数组差异`"}} javascript/comp_ops -.-> lab-28484{{"`映射数组差异`"}} javascript/higher_funcs -.-> lab-28484{{"`映射数组差异`"}} javascript/destr_assign -.-> lab-28484{{"`映射数组差异`"}} end

通过映射返回两个数组差异的函数

要开始编码,请打开你的终端/SSH 并输入 node

此函数接受两个数组,并对两个数组中的每个元素应用提供的函数,以返回它们的差异。

具体做法如下:

  • 通过对第二个数组(b)中的每个元素应用函数(fn)来创建一个 Set
  • 使用 Array.prototype.map() 对第一个数组(a)中的每个元素应用函数(fn)。
  • 在第一个数组(a)上结合使用 Array.prototype.filter() 和函数(fn),使用 Set.prototype.has() 仅保留第二个数组(b)中不包含的值。

以下是该函数的代码:

const differenceBy = (a, b, fn) => {
  const s = new Set(b.map(fn));
  return a.map(fn).filter((el) => !s.has(el));
};

以下是一些使用该函数的示例:

differenceBy([2.1, 1.2], [2.3, 3.4], Math.floor); // [1]
differenceBy([{ x: 2 }, { x: 1 }], [{ x: 1 }], (v) => v.x); // [2]

总结

恭喜你!你已经完成了“映射数组差异”实验。你可以在 LabEx 中练习更多实验来提升你的技能。

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