javascript - 遍历函数调用

Question

在多年以乏味的方式用 C++ 编写循环之后

for(int i=0; i<N; ++i) {
    ...
}

使用迭代器变得非常好

for(it i=v.begin(); i<v.end(); ++i) {
    ...
}

并最终转向范围迭代器

for(auto i:v) {
    ...
}

在 JavaScript 中也可以使用 for，风格几乎相同(减去类型声明和前/后增量运算符)到上面第一个。

不过，在所有这些中，for 都在那里。 D3.js图书馆展示了一个替代方案。可以通过编写来迭代一个数组

d3.select("body")
  .selectAll("p")
  .data([4, 8, 15, 16, 23, 42])
  .enter().append("p")
  .text(function(d) { return "I’m number " + d + "!"; });

此处 enter 变为 for 循环。 documentation很好地解释了连接的客户端 View 。我缺少的是(函数式编程？)风格的独立示例将函数调用转换为迭代。

毫无疑问，这不是 D3.js 独有的。这正是我遇到成语的地方。

你能推荐几行独立的 JavaScript 代码吗？通过函数调用演示迭代？

Answer 1

我至少想到了几个内置函数。

map ()

这个很明显。

[1, 2, 3]
  .map(someNumber => someNumber * someNumber)
  .map((powered, index) => index + "::" + powered);

  // --> [ "1::1", "2::4", "3::9" ]

链接很好，对吧？获取一些输入并生成由通过按元素应用函数计算的元素组成的结果。

建议尽可能使用纯函数(对相同的输入产生相同的结果，如果可能不要改变原始集合，也不要产生任何副作用)。

forEach()

这个函数也遍历数组的所有元素，并应用一个函数，没有返回任何东西。因此，它只能结束一个调用链，而不能用于进一步的链。

[1, 2, 3, 4]
  .forEach(number => console.info(number));

建议 forEach() 在我们想要编写一些代码时很有用，这些代码会导致迭代集合中每个条目的副作用。

过滤器()

Filter 函数使用一个谓词来从谷壳中筛出小麦。谓词为您要在下一个“阶段”处理的项目定义标准。

[null, undefined, 0, 1, 2, 3, NaN, "", "You get the idea"]
  .filter(Boolean)
  .map(filteredElement => filteredElement + "!")

  // --> [ "1!", "2!", "3!", "You get the idea!" ]

建议尽可能使用纯函数。 IE。除了与过滤逻辑本身直接相关的事情外，不要在 filter 中做任何其他事情。

Object.keys() 和 Object.entries()

当我们需要遍历对象的键或键值对而不是数组的元素时，这两个函数很有用。

const targetObject = { a: 1, b: 2, c: 3 };
Object
  .keys(targetObject)
  .map(key => key + "=" + targetObject[key])

  // --> [ "a=1", "b=2", "c=3" ]

这样可以达到同样的效果

Object
  .entries({ a: 1, b: 2, c: 3 })
  .map((key, value) => key + "=" + value)

  // --> [ "a=1", "b=2", "c=3" ]

建议在使用 Object.keys(...) 时，您可能希望使用 Object.hasOwnProperty(...) >。查看documentation了解详情。

查找()

其中一个几乎是微不足道的。让我们搜索与谓词匹配的项目。搜索是“从左到右”的，只要找到第一个“匹配”就停止。

[1, 5, 10, 15]
  .find(number >= 7)

  // --> 10

findIndex() 函数可以在我们寻找与谓词匹配的元素位置时使用。

some() 和 every()

这些函数检查是否

a) 至少有一个元素匹配一个谓词；或者b) 每个元素都匹配一个谓词。

const arrayOfNumbers = [2, 4, 6, 8, 10];

arrayOfNumbers.every(number => number % 2 === 0); // --> true
arrayOfNumbers.every(number => number % 2 === 1); // --> false

arrayOfNumbers.some(number => number > 1);        // --> true
arrayOfNumbers.some(number => number <= 1);       // --> false

reduce() 和 `reduceRight()`

本快速回顾中最后要提到的是获取事物列表并将其聚合为单个结果的函数。

[-1, 0, 1, 2, 3]
  .filter(value => value >= 0) // [0, 1, 2, 3]
  .map(value => value + 1)     // [1, 2, 3, 4]
  .reduce((subTotal, currentValue) => subTotal + currentValue, 5);

  // --> 15

建议:尽可能使用纯函数。

---

关于性能的普遍适用说明。在我的基准测试中(手头没有)，手写的 for 循环总是比 forEach、map 和其他循环更快迭代函数。除非性能受到严重影响，否则我仍然更喜欢这些功能。主要有两个原因:1)更容易避免差一错误； 2) 代码更具可读性，因为每个函数都在数据处理流程中定义了一个独立的步骤，从而使代码更简单，更易于维护。

---

我希望这是对一些内置的可链接 JavaScript 函数的一个不错的概述。更多是described here .看看 concat()、sort()、fill()、join()、slice()、reverse() -- 我也经常使用它们。

如果您需要类似first() 或last() 的东西，您将不会在 native 函数中找到它们。要么自己编写，要么使用第三方库(例如 lodash 、 rambda.js )。