根据函数对数组元素进行解组

JavaScriptJavaScriptBeginner
立即练习

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

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

简介

在本实验中,我们将探索如何根据提供的函数对数组元素进行解组。我们将使用 unzipWith() 函数,该函数接受 zip() 函数生成的数组,并应用提供的函数来解组元素。完成本实验后,你将更好地理解如何操作数组并对其元素执行自定义操作。


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-28680{{"`根据函数对数组元素进行解组`"}} javascript/data_types -.-> lab-28680{{"`根据函数对数组元素进行解组`"}} javascript/arith_ops -.-> lab-28680{{"`根据函数对数组元素进行解组`"}} javascript/comp_ops -.-> lab-28680{{"`根据函数对数组元素进行解组`"}} javascript/array_methods -.-> lab-28680{{"`根据函数对数组元素进行解组`"}} javascript/higher_funcs -.-> lab-28680{{"`根据函数对数组元素进行解组`"}} javascript/spread_rest -.-> lab-28680{{"`根据函数对数组元素进行解组`"}} end

如何根据函数对数组元素进行解组

如果你需要对 zip 生成的数组中的元素进行解组并应用一个函数,可以使用 unzipWith。以下是实现方法:

  1. 使用 Math.max() 和展开运算符 (...) 获取数组中最长的子数组,并使用 Array.prototype.map() 使每个元素成为一个数组。
  2. 使用 Array.prototype.reduce()Array.prototype.forEach() 将分组的值映射到各个数组。
  3. 使用 Array.prototype.map() 和展开运算符 (...) 对每个单独的元素组应用 fn
const unzipWith = (arr, fn) =>
  arr
    .reduce(
      (acc, val) => (val.forEach((v, i) => acc[i].push(v)), acc),
      Array.from({
        length: Math.max(...arr.map((x) => x.length))
      }).map((x) => [])
    )
    .map((val) => fn(...val));

要使用 unzipWith,打开终端/SSH 并输入 node。然后,你可以运行以下示例:

unzipWith(
  [
    [1, 10, 100],
    [2, 20, 200]
  ],
  (...args) => args.reduce((acc, v) => acc + v, 0)
);
// [3, 30, 300]

这将通过对 zip 生成的输入数组中的元素进行解组并应用提供的函数来创建一个元素数组。

总结

恭喜你!你已经完成了“根据函数对数组元素进行解组”实验。你可以在 LabEx 中练习更多实验来提升你的技能。

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