让 Javascript 做列表理解

Question

使 Javascript 执行 类似于 Python 的列表理解的最干净的方法是什么？

在 Python 中，如果我有一个对象列表，我想将其名称“拉出”，我会这样做……

 list_of_names = [x.name for x in list_of_objects]

在 javascript 中，除了使用 for 循环结构之外，我真的没有看到更“漂亮”的方法。

仅供参考：我正在使用 jQuery；也许它有一些漂亮的功能使这成为可能？

更具体地说，假设我使用像 $('input') 这样的 jQuery 选择器来获取所有 input 元素，我将如何 最干净地 为每个 name 属性创建一个数组这些 input 元素—即数组中的所有 $('input').attr('name') 字符串？

原文由 Chris W. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 Array.map 的一般情况，需要 javascript 1.6（这意味着，适用于所有浏览器，但 IE < 9） 或 使用像 MooTools 这样的对象增强框架适用于所有浏览器：

 var list_of_names = document.getElementsByTagName('input').map(
  function(element) { return element.getAttribute('name'); }
);

如果处理不提供 map 的迭代器（例如 generators ），可以使用 扩展语法 首先创建一个数组：

 [...Array(10).keys()].map(x => x * 2 + 3)

传播语法也适用于数组，因此如果您需要将 map 应用于任何可迭代对象，最安全的做法是先将其传播到列表中。

（请注意，此示例还使用了 arrow function ，它需要 ES6 支持。大多数浏览器版本都支持或都不支持。IE 不支持两者，如果它本身需要支持的话，尽管 IE 已经被 Edge 取代了一段时间。）

jQuery 具体示例，适用于所有浏览器：

 var list_of_names = jQuery.map(jQuery('input'), function(element) { return jQuery(element).attr('name'); });

使用 .each 其他答案是错误的；不是代码本身，而是实现是次优的。

编辑： Javascript 1.7 中还引入了 数组推导，但这完全取决于语法，无法在原生缺乏它的浏览器上进行模拟。这是您可以在 Javascript 中获得的与您发布的 Python 片段最接近的东西。然而，这 已从语言中删除

原文由 gonchuki 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

列表理解有几个部分。

1. 选择一组东西
2. 来自一组 Something
3. 被某物过滤

在 JavaScript 中，从 ES5 开始（所以我认为 IE9+、Chrome 和 FF 都支持）您可以在数组上使用 map 和 filter 函数。

您可以使用 map 和 filter 执行此操作：

 var list = [1,2,3,4,5].filter(function(x){ return x < 4; })
               .map(function(x) { return 'foo ' + x; });

console.log(list); //["foo 1", "foo 2", "foo 3"]

这与在不设置额外方法或使用其他框架的情况下所能达到的效果差不多。

至于具体问题……

使用 jQuery：

 $('input').map(function(i, x) { return x.name; });

没有 jQuery：

 var inputs = [].slice.call(document.getElementsByTagName('input'), 0),
    names = inputs.map(function(x) { return x.name; });

[].slice.call() 只是将 NodeList 转换为 Array 。

原文由 Ben Lesh 发布，翻译遵循 CC BY-SA 3.0 许可协议