使Javascript做列表理解

Question

使Javascript做类似 Python的列表理解的最简洁方法是什么？

在Python中,如果我有一个对象列表,其名称我想"拉出"我会这样做...

list_of_names = [x.name for x in list_of_objects]

在javascript中,除了使用for循环结构之外,我并没有真正看到一种更"漂亮"的方式.

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

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

Answer 1

使用Array.map的通用案例,需要javascript 1.6(这意味着,适用于每个浏览器但IE <9)或者像MooTools这样的对象扩充框架适用于每个浏览器:

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

jQuery的具体示例,适用于每个浏览器:

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

使用的其他答案.each是错误的; 不是代码本身,但实现是次优的.

编辑: Javascript 1.7中还引入了数组理解,但这纯粹依赖于语法,无法在本机缺少它的浏览器上进行模拟.这是您在Javascript中可以获得的最接近您发布的Python代码段的内容.

Answer 2

列表理解有几个部分.

1. 选择一组东西
2. 从一套东西
3. 过滤了Something

在JavaScript中,从ES5开始(所以我认为在IE9 +,Chrome和FF中支持),您可以使用数组上的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.

Answer 3

那些对"漂亮"的Javascript感兴趣的人应该查看CoffeeScript,这是一种编译成Javascript的语言.它本质上是存在的,因为Javascript缺少列表理解之类的东西.

特别是,Coffeescript的列表理解比Python更灵活.请参阅此处的列表理解文档.

例如,此代码将name生成input元素的属性数组.

[$(inp).attr('name') for inp in $('input')]

然而,一个潜在的缺点是结果Javascript很冗长(和IMHO混淆):

var inp;
[
  (function() {
    var _i, _len, _ref, _results;
    _ref = $('input');
    _results = [];
    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
      inp = _ref[_i];
      _results.push($(inp).attr('name'));
    }
    return _results;
  })()
];