blocks|key|1776504|text|使用jQuery名称函数，您可以遍历每个元素，获取当前元素的索引，并使用该索引将名称属性添加到list_of_names数组中……|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1776505|var+list_of_names+=+new+Array();

$('input').each(function(index){
++list_of_names[index]+=+$(this).attr('name');
});|code-block|syntax|javascript|1776506|虽然这本质上是一个循环方法，您指定了您不想要的，但它是循环的一个令人难以置信的整洁实现，并允许您在特定的选择器上运行循环。|1776507|希望这能有所帮助:)|1776508|entityMap^0|1B|D|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|V|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

Using jQuery <code>.each()</code> function, you can loop through each element, get the index of the current element and using that index, you can add the name attribute to the <code>list_of_names</code> array...

<pre><code>var list_of_names = new Array();

$('input').each(function(index){
 list_of_names[index] = $(this).attr('name');
});
</code></pre>

While this is essentially a looping method, which you specified you did not want, it is an incredibly neat implementation of looping and allows you to run the loop on specific selectors.

Hope that helps :)

blocks|key|1776555|text|一种可重用的方法是创建一个小型jQuery插件，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1776556|jQuery.fn.getArrayOfNames+=+function()+{
++++var+arr+=+[];
++++this.each(+function()+{+arr.push(this.name+%7C%7C+'');+}+);
++++return+arr;
};|code-block|syntax|javascript|1776557|然后你可以像这样使用它：|1776558|var+list_of_names+=+$('input').getArrayOfNames();|1776559|它不是列表理解，但在javascript中是不存在的。你所能做的就是使用javascript和jquery来发挥它的作用。|1776560|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

A re-usable way of doing this is to create a tiny jQuery plugin like this:

<pre><code>jQuery.fn.getArrayOfNames = function() {
 var arr = [];
 this.each( function() { arr.push(this.name || ''); } );
 return arr;
};
</code></pre>

Then you could use it like this:

<pre><code>var list_of_names = $('input').getArrayOfNames();
</code></pre>

It's not list comprehension, but that doesn't exist in javascript. All you can do is use javascript and jquery for what it's good for.

blocks|key|1990406|text|所以，python的列表理解实际上同时做了两件事:映射和过滤。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1990407|list_of_names+=+[x.name+for+x+in+list_of_object+if+x.enabled]|code-block|syntax|javascript|1990408|如果只需要映射部分，如示例所示，可以使用jQuery的映射特性。如果您还需要过滤，可以使用jQuery的"grep“特性。|1990409|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

So, python's list comprehensions actually do two things at once: mapping and filtering. For example:

<pre><code>list_of_names = [x.name for x in list_of_object if x.enabled]
</code></pre>

If you just want the mapping part, as your example shows, you can use jQuery's map feature. If you also need filtering you can use jQuery's "grep" feature.

blocks|key|1776778|text|2020年实现这一目标|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1776779|const+names+=+collection.map(x+=>+x.name);|code-block|syntax|javascript|1776780|MDN+%7C+Array.prototype.map()|offset|length|1776781|2012年的老答案|1776782|是的，我也很怀念列表的理解。|1776783|这是一个比@gonchuki的答案稍微简单一点的答案，并将其转换为实际的数组，而不是对象类型。|1776784|var+list_of_names+=+$('input').map(function()+{
++++return+$(this).attr('name');
}).toArray();|1776785|这样做的一个用例是将所有选中的复选框连接到URL的散列中，如下所示：|1776786|window.location.hash+=+$('input:checked').map(function()+{
++++return+$(this).attr('id');
}).toArray().join(',');|1776787|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map^0|0|0|0|R|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|16|8|@]|9|@$I|17|J|18|1|19]]|A|$]]|$1|K|3|L|5|6|7|1A|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1B|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1C|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|1D|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|1E|8|@]|9|@]|A|$]]|$1|U|3|V|5|D|7|1F|8|@]|9|@]|A|$E|F]]|$1|W|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]]]

<h3>Do this in 2020</h3>
<pre><code>const names = collection.map(x =&gt; x.name);
</code></pre>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" rel="nofollow noreferrer">MDN | Array.prototype.map()</a>
<h3>Old Answer from 2012</h3>
Yeah—I miss list comprehensions too.
Here's an answer that's slightly less verbose than @gonchuki's answer and converts it into an actual array, instead of an object type.
<pre><code>var list_of_names = $('input').map(function() {
 return $(this).attr('name');
}).toArray();
</code></pre>
A use case of this is taking all checked checkboxes and joining them into the hash of the URL, like so:
<pre><code>window.location.hash = $('input:checked').map(function() {
 return $(this).attr('id');
}).toArray().join(',');
</code></pre>

blocks|key|1990698|text|那些对“漂亮的”Javascript感兴趣的人应该看看CoffeeScript，这是一种编译成Javascript的语言。它的存在本质上是因为Javascript缺少诸如列表理解之类的东西。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1990699|特别是，Coffeescript的列表理解甚至比Python的更灵活。参见list+comprehension+docs+here。|1990700|例如，这段代码将产生一个input元素的name属性数组。|style|CODE|1990701|[$(inp).attr('name')+for+inp+in+$('input')]|code-block|syntax|javascript|1990702|然而，一个潜在的缺点是生成的Javascript是冗长的(并且令人困惑)：|1990703|var+inp;
[
++(function()+{
++++var+_i,+_len,+_ref,+_results;
++++_ref+=+$('input');
++++_results+=+[];
++++for+(_i+=+0,+_len+=+_ref.length;+_i+<+_len;+_i%2B%2B)+{
++++++inp+=+_ref[_i];
++++++_results.push($(inp).attr('name'));
++++}
++++return+_results;
++})()
];|1990704|entityMap|0|LINK|mutability|MUTABLE|url|http://coffeescript.org/|1|http://coffeescript.org/#loops^0|R|C|0|0|11|S|1|0|C|5|K|4|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]]|C|$]]|$1|F|3|G|5|6|7|1A|8|@$A|1B|B|1C|H|I]|$A|1D|B|1E|H|I]]|9|@]|C|$]]|$1|J|3|K|5|L|7|1F|8|@]|9|@]|C|$M|N]]|$1|O|3|P|5|6|7|1G|8|@]|9|@]|C|$]]|$1|Q|3|R|5|L|7|1H|8|@]|9|@]|C|$M|N]]|$1|S|3|-4|5|6|7|1I|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]|10|$5|V|W|X|C|$Y|11]]]]

Those interested in "beautiful" Javascript should probably check out <a href="http://coffeescript.org/" rel="noreferrer">CoffeeScript</a>, a language which compiles to Javascript. It essentially exists because Javascript is missing things like list comprehension.

In particular, Coffeescript's list comprehension is even more flexible than Python's. See the <a href="http://coffeescript.org/#loops" rel="noreferrer">list comprehension docs here</a>.

For instance this code would result in an array of <code>name</code> attributes of <code>input</code> elements.

<pre><code>[$(inp).attr('name') for inp in $('input')]
</code></pre>

A potential downside however is the resulting Javascript is verbose (and IMHO confusing):

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

blocks|key|1777131|text|有一种单行方法，它涉及到在列表的构造函数中使用嵌套闭包函数。和一个长函数，用来生成序列。其定义如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1777132|var+__+=+generate+=+function(initial,+max,+list,+comparision)+{
++if+(comparision(initial))
++++list.push(initial);
++return+(initial+%2B=+1)+==+max+%2B+1+?+list+:+__(initial,+max,+list,+comparision);
};

[(function(l){+return+l;+})(__(0,+30,+[],+function(x)+{+return+x+>+10;+}))];
//+returns+Array[20]
var+val+=+16;
[(function(l){+return+l;+})(__(0,+30,+[],+function(x)+{+return+x+%25+val+==+4;+}))];
//+returns+Array[2]|code-block|syntax|javascript|1777133|这是一个基于范围的实现，类似于Python的range(min，max)。此外，列表理解遵循以下形式：|1777134|[{closure+function}({generator+function})];|1777135|一些测试：|1777136|var+alist+=+[(function(l){+return+l;+})(__(0,+30,+[],+function(x)+{+return+x+>+10;+}))];
var+alist2+=+[(function(l){+return+l;+})(__(0,+1000,+[],+function(x)+{+return+x+>+10;+}))];
//+returns+Array[990]
var+alist3+=+[(function(l){+return+l;+})(__(40,+1000,+[],+function(x)+{+return+x+>+10;+}))];
var+threshold+=+30*2;
var+alist3+=+[(function(l){+return+l;+})(__(0,+65,+[],+function(x)+{+return+x+>+threshold;+}))];
//+returns+Array[5]|1777137|虽然这个解决方案不是最干净的，但它可以完成工作。在生产中，我可能会建议不要使用它。|1777138|最后，可以选择不对我的"generate“方法使用递归，因为它可以更快地完成工作。或者更好地使用许多流行的Javascript库中的内置函数。下面是一个重载的实现，它也可以容纳对象属性|1777139|//+A+list+generator+overload+implementation+for
//+objects+and+ranges+based+on+the+arity+of+the+function.
//+For+example+[(function(l){+return+l;+})(__(0,+30,+[],+function(x)+{+return+x+>+10;+}))]+
//+will+use+the+first+implementation,+while
//+[(function(l){+return+l;+})(__(objects,+'name',+[],+function(x,+y)+{+var+x+=+x+%7C%7C+{};+return+x[y]+}))];
//+will+use+the+second.

var+__+=+generator+=+function(options)+{
++return+arguments.length+==+4+?
//+A+range+based+implemention,+modeled+after+pythons+range(0,+100)
++(function+(initial,+max,+list,+comparision)+{
++++var+initial+=+arguments[0],+max+=+arguments[1],+list+=+arguments[2],+comparision+=+arguments[3];
++++if+(comparision(initial))
++++++list.push(initial);
++++return+(initial+%2B=+1)+==+max+%2B+1+?+list+:+__(initial,+max,+list,+comparision);
++})(arguments[0],+arguments[1],+arguments[2],+arguments[3]):
//+An+object+based+based+implementation.+
++(function+(object,+key,+list,+check,+acc)+{
++++var+object+=+arguments[0],+key+=+arguments[1],+list+=+arguments[2],+check+=+arguments[3],+acc+=+arguments[4];
++++acc+=+acc+%7C%7C+0;
++++if+(check(object[acc],+key))
++++++list.push(object[acc][key]);
++++return+(acc+%2B=+1)+==+list.length+%2B+1+?+list+:+__(object,+key,+list,+check,+acc);+
++})(arguments[0],+arguments[1],+arguments[2],+arguments[3],+arguments[4]);
};|1777140|用法：|1777141|var+threshold+=+10;
[(function(l){+return+l;+})(__(0,+65,+[],+function(x)+{+return+x+>+threshold;+}))];
//+returns+Array[5]+->+60,+61,+62,+63,+64,+65
var+objects+=+[{'name':+'joe'},+{'name':+'jack'}];
[(function(l){+return+l;+})(__(objects,+'name',+[],+function(x,+y)+{+var+x+=+x+%7C%7C+{};+return+x[y]+}))];
//+returns+Array[1]+->+['Joe',+'Jack']
[(function(l){+return+l;+})(__(0,+300,+[],+function(x)+{+return+x+>+10;+}))];|1777142|语法烂透了，我知道！|1777143|祝你好运。|1777144|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|16|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|18|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|19|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@]|A|$]]|$1|S|3|T|5|D|7|1C|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|1D|8|@]|9|@]|A|$]]|$1|W|3|X|5|D|7|1E|8|@]|9|@]|A|$E|F]]|$1|Y|3|Z|5|6|7|1F|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|1G|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|13|$]]

There is a one line approach, it involves using a nested closure function in the
constructor of the list. And a function that goes a long with it to generate the sequence.
Its defined below:

<pre><code>var __ = generate = function(initial, max, list, comparision) {
 if (comparision(initial))
 list.push(initial);
 return (initial += 1) == max + 1 ? list : __(initial, max, list, comparision);
};

[(function(l){ return l; })(__(0, 30, [], function(x) { return x &gt; 10; }))];
// returns Array[20]
var val = 16;
[(function(l){ return l; })(__(0, 30, [], function(x) { return x % val == 4; }))];
// returns Array[2]
</code></pre>

This is a range based implementation like Python's range(min, max)
In addition the list comprehension follows this form:

<pre><code>[{closure function}({generator function})];
</code></pre>

some tests:

<pre><code>var alist = [(function(l){ return l; })(__(0, 30, [], function(x) { return x &gt; 10; }))];
var alist2 = [(function(l){ return l; })(__(0, 1000, [], function(x) { return x &gt; 10; }))];
// returns Array[990]
var alist3 = [(function(l){ return l; })(__(40, 1000, [], function(x) { return x &gt; 10; }))];
var threshold = 30*2;
var alist3 = [(function(l){ return l; })(__(0, 65, [], function(x) { return x &gt; threshold; }))];
// returns Array[5]
</code></pre>

While this solution is not the cleanest it gets the job done. And in production i'd probably advise against it.

Lastly one can choose not to use recursion for my "generate" method as it would do the job quicker. Or even better use a built in function from of the many popular Javascript libraries. Here is an overloaded implementation that would also accommodate for object properties

<pre><code>// A list generator overload implementation for
// objects and ranges based on the arity of the function.
// For example [(function(l){ return l; })(__(0, 30, [], function(x) { return x &gt; 10; }))] 
// will use the first implementation, while
// [(function(l){ return l; })(__(objects, 'name', [], function(x, y) { var x = x || {}; return x[y] }))];
// will use the second.

var __ = generator = function(options) {
 return arguments.length == 4 ?
// A range based implemention, modeled after pythons range(0, 100)
 (function (initial, max, list, comparision) {
 var initial = arguments[0], max = arguments[1], list = arguments[2], comparision = arguments[3];
 if (comparision(initial))
 list.push(initial);
 return (initial += 1) == max + 1 ? list : __(initial, max, list, comparision);
 })(arguments[0], arguments[1], arguments[2], arguments[3]):
// An object based based implementation. 
 (function (object, key, list, check, acc) {
 var object = arguments[0], key = arguments[1], list = arguments[2], check = arguments[3], acc = arguments[4];
 acc = acc || 0;
 if (check(object[acc], key))
 list.push(object[acc][key]);
 return (acc += 1) == list.length + 1 ? list : __(object, key, list, check, acc); 
 })(arguments[0], arguments[1], arguments[2], arguments[3], arguments[4]);
};
</code></pre>

Usage:

<pre><code>var threshold = 10;
[(function(l){ return l; })(__(0, 65, [], function(x) { return x &gt; threshold; }))];
// returns Array[5] -&gt; 60, 61, 62, 63, 64, 65
var objects = [{'name': 'joe'}, {'name': 'jack'}];
[(function(l){ return l; })(__(objects, 'name', [], function(x, y) { var x = x || {}; return x[y] }))];
// returns Array[1] -&gt; ['Joe', 'Jack']
[(function(l){ return l; })(__(0, 300, [], function(x) { return x &gt; 10; }))];
</code></pre>

The syntax sucks I know!

Best of luck.

blocks|key|1990891|text|这是一个Coffeescript真正闪耀的地方的例子|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1990892|pows+=+[x**2+for+x+in+foo_arr]
list_of_names+=+[x.name+for+x+in+list_of_objects]|code-block|syntax|javascript|1990893|等效的Javascript将是：|1990894|var+list_of_names,+pows,+x;

pows+=+[
++(function()+{
++++var+_i,+_len,+_results;
++++_results+=+[];
++++for+(_i+=+0,+_len+=+foo_arr.length;+_i+<+_len;+_i%2B%2B)+{
++++++x+=+foo_arr[_i];
++++++_results.push(Math.pow(x,+2));
++++}
++++return+_results;
++})()
];

list_of_names+=+[
++(function()+{
++++var+_i,+_len,+_results;
++++_results+=+[];
++++for+(_i+=+0,+_len+=+list_of_objects.length;+_i+<+_len;+_i%2B%2B)+{
++++++x+=+list_of_objects[_i];
++++++_results.push(x.name);
++++}
++++return+_results;
++})()
];|1990895|entityMap|0|LINK|mutability|MUTABLE|url|http://coffeescript.org/^0|4|C|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

This is an example of a place where <a href="http://coffeescript.org/" rel="nofollow">Coffeescript</a> really shines

<pre><code>pows = [x**2 for x in foo_arr]
list_of_names = [x.name for x in list_of_objects]
</code></pre>

The equivalent Javascript would be:

<pre class="lang-js prettyprint-override"><code>var list_of_names, pows, x;

pows = [
 (function() {
 var _i, _len, _results;
 _results = [];
 for (_i = 0, _len = foo_arr.length; _i &lt; _len; _i++) {
 x = foo_arr[_i];
 _results.push(Math.pow(x, 2));
 }
 return _results;
 })()
];

list_of_names = [
 (function() {
 var _i, _len, _results;
 _results = [];
 for (_i = 0, _len = list_of_objects.length; _i &lt; _len; _i++) {
 x = list_of_objects[_i];
 _results.push(x.name);
 }
 return _results;
 })()
];
</code></pre>

What is the cleanest way to make Javascript do something like Python's list comprehension?

In Python if I have a list of objects whose name's I want to 'pull out' I would do this...

<pre><code>list_of_names = [x.name for x in list_of_objects]
</code></pre>

In javascript I don't really see a more 'beautiful' way of doing that other than just using a for loop construct.

FYI: I'm using jQuery; maybe it has some nifty feature that makes this possible? 

More specifically, say I use a jQuery selector like <code>$('input')</code> to get all <code>input</code> elements, how would I most cleanly create an array of all the <code>name</code> attributes for each of these <code>input</code> elements--i.e., all of the <code>$('input').attr('name')</code> strings in an array?

Make Javascript do List Comprehension

jQuery

Python

让Javascript做一些类似Python的列表理解的事情，最干净的方法是什么？在Python中，如果我有一个对象列表，我想“拉出”它的名称，我会这样做……list_of_names = [x.name for x in list_of_objects]在javascript中，除了使用for循环构造之外，我并没有真...

问使Javascript执行列表理解
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使Javascript执行列表理解EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使Javascript执行列表理解
EN