blocks|key|1687447|text|这里有一个更简单的方法来实现它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1687448|let+result+=+objArray.map(a+=>+a.foo);|code-block|syntax|javascript|1687449|或|1687450|let+result+=+objArray.map(({+foo+})+=>+foo)|1687451|您还可以查看Array.prototype.map()。|offset|length|style|CODE|1687452|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map^0|0|0|0|0|6|L|6|L|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|12|8|@$M|13|N|14|O|P]]|9|@$M|15|N|16|1|17]]|A|$]]|$1|Q|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

Here is a shorter way of achieving it:

<pre><code>let result = objArray.map(a =&gt; a.foo);
</code></pre>

OR

<pre><code>let result = objArray.map(({ foo }) =&gt; foo)
</code></pre>

You can also check <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" rel="noreferrer"><code>Array.prototype.map()</code></a>.

blocks|key|1899925|text|是的，但它依赖于JavaScript的ES5特性。这意味着它不能在IE8或更早的版本中工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1899926|var+result+=+objArray.map(function(a)+{return+a.foo;});|code-block|syntax|javascript|1899927|在ES6兼容的JS解释器上，为了简洁起见，可以使用：|1899928|var+result+=+objArray.map(a+=>+a.foo);|1899929|Array.prototype.map+documentation|offset|length|1899930|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map^0|0|0|0|0|0|X|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

Yes, but it relies on an ES5 feature of JavaScript. This means it will not work in IE8 or older.

<pre><code>var result = objArray.map(function(a) {return a.foo;});
</code></pre>

On ES6 compatible JS interpreters you can use an <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions" rel="noreferrer">arrow function</a> for brevity:

<pre><code>var result = objArray.map(a =&gt; a.foo);
</code></pre>

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" rel="noreferrer">Array.prototype.map documentation</a>

blocks|key|1900700|text|最好使用某种类型的库来实现跨浏览器的保证。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1900701|在Lodash中，您可以通过以下方法获取数组中属性的值|1900702|_.map(objArray,"foo")|code-block|syntax|javascript|1900703|在下划线中|1900704|_.pluck(objArray,"foo")|1900705|两个都会回来|1900706|[1,+2,+3]|1900707|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

It is better to use some sort of libraries like lodash or underscore for cross browser assurance.

In Lodash you can get values of a property in array by following method

<pre><code>_.map(objArray,"foo")
</code></pre>

and in Underscore 

<pre><code>_.pluck(objArray,"foo")
</code></pre>

Both will return 

<pre><code>[1, 2, 3]
</code></pre>

blocks|key|1686583|text|使用Array.prototype.map|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1686584|function+getFields(input,+field)+{
++++return+input.map(function(o)+{
++++++++return+o[field];
++++});
}|code-block|syntax|javascript|1686585|有关ES5之前版本的浏览器的填充程序，请参阅上面的链接。|1686586|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map^0|2|J|2|J|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|11|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

Using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" rel="noreferrer"><code>Array.prototype.map</code></a>:

<pre><code>function getFields(input, field) {
 return input.map(function(o) {
 return o[field];
 });
}
</code></pre>

See the above link for a shim for pre-ES5 browsers.

blocks|key|1687953|text|map()方法创建一个新数组，其中填充了对调用数组中的每个元素调用所提供函数的结果。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1687954|let+kvArray+=+[{key:+1,+value:+10},
+++++++++++++++{key:+2,+value:+20},
+++++++++++++++{key:+3,+value:+30}]

let+reformattedArray+=+kvArray.map(obj+=>+{
+++return+obj.value
})|code-block|syntax|javascript|1687955|或|1687956|const+kvArray+=+[['key1',+'value1'],+['key2',+'value2']]

//+Use+the+regular+Map+constructor+to+transform+a+2D+key-value+Array+into+a+map
const+myMap+=+new+Map(kvArray)

myMap.get('key1')+//+returns+"value1"

//+Use+Array.from()+to+transform+a+map+into+a+2D+key-value+Array
console.log(Array.from(myMap))+//+Will+show+you+exactly+the+same+Array+as+kvArray

//+A+succinct+way+to+do+the+same,+using+the+spread+syntax
console.log([...myMap])

//+Or+use+the+keys()+or+values()+iterators,+and+convert+them+to+an+array
console.log(Array.from(myMap.keys()))+//+["key1",+"key2"]|1687957|entityMap^0|0|5|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|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

The <code>map()</code> method creates a new array populated with the results of calling a provided function on every element in the calling array.
<pre><code>let kvArray = [{key: 1, value: 10},
 {key: 2, value: 20},
 {key: 3, value: 30}]

let reformattedArray = kvArray.map(obj =&gt; {
 return obj.value
})
</code></pre>
Or
<pre><code>const kvArray = [['key1', 'value1'], ['key2', 'value2']]

// Use the regular Map constructor to transform a 2D key-value Array into a map
const myMap = new Map(kvArray)

myMap.get('key1') // returns &quot;value1&quot;

// Use Array.from() to transform a map into a 2D key-value Array
console.log(Array.from(myMap)) // Will show you exactly the same Array as kvArray

// A succinct way to do the same, using the spread syntax
console.log([...myMap])

// Or use the keys() or values() iterators, and convert them to an array
console.log(Array.from(myMap.keys())) // [&quot;key1&quot;, &quot;key2&quot;]
</code></pre>

blocks|key|1901101|text|在ES6中，您可以执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1901102|const+objArray+=+[{foo:+1,+bar:+2},+{foo:+3,+bar:+4},+{foo:+5,+bar:+6}]
objArray.map(({+foo+})+=>+foo)|code-block|syntax|javascript|1901103|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

In ES6, you can do:

<pre><code>const objArray = [{foo: 1, bar: 2}, {foo: 3, bar: 4}, {foo: 5, bar: 6}]
objArray.map(({ foo }) =&gt; foo)
</code></pre>

blocks|key|1687758|text|从对象数组中收集不同字段的示例|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1687759|​|1687760|let+inputArray+=+[
++{+id:+1,+name:+"name1",+value:+"value1"+},
++{+id:+2,+name:+"name2",+value:+"value2"+},
];

let+ids+=+inputArray.map(+(item)+=>+item.id);
let+names+=+inputArray.map((item)+=>+item.name);
let+values+=+inputArray.map((item)+=>+item.value);

console.log(ids);
console.log(names);
console.log(values);|code-block|syntax|javascript|1687761|1687762|结果：|1687763|[+1,+2+]
[+'name1',+'name2'+]
[+'value1',+'value2'+]|1687764|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|T|8|@]|9|@]|A|$]]|$1|L|3|M|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

Example to collect the different fields from the object array
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let inputArray = [
 { id: 1, name: "name1", value: "value1" },
 { id: 2, name: "name2", value: "value2" },
];

let ids = inputArray.map( (item) =&gt; item.id);
let names = inputArray.map((item) =&gt; item.name);
let values = inputArray.map((item) =&gt; item.value);

console.log(ids);
console.log(names);
console.log(values);</code></pre>
</div>
</div>

Result :
<pre><code>[ 1, 2 ]
[ 'name1', 'name2' ]
[ 'value1', 'value2' ]
</code></pre>

blocks|key|1900924|text|虽然map是从对象列表中选择“列”的合适解决方案，但它也有缺点。如果不显式检查列是否存在，它将抛出一个错误，并(充其量)为您提供undefined。我会选择reduce解决方案，它可以简单地忽略该属性，甚至为您设置一个默认值。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1900925|function+getFields(list,+field)+{
++++//++reduce+the+provided+list+to+an+array+only+containing+the+requested+field
++++return+list.reduce(function(carry,+item)+{
++++++++//++check+if+the+item+is+actually+an+object+and+does+contain+the+field
++++++++if+(typeof+item+===+'object'+&&+field+in+item)+{
++++++++++++carry.push(item[field]);
++++++++}

++++++++//++return+the+'carry'+(which+is+the+list+of+matched+field+values)
++++++++return+carry;
++++},+[]);
}|code-block|syntax|javascript|1900926|jsbin+example|1900927|即使所提供的列表中的某一项不是对象或不包含该字段，也可以这样做。|1900928|它甚至可以通过协商一个默认值来使其更加灵活，该默认值应该不是一个对象或不包含该字段。|1900929|function+getFields(list,+field,+otherwise)+{
++++//++reduce+the+provided+list+to+an+array+containing+either+the+requested+field+or+the+alternative+value
++++return+list.reduce(function(carry,+item)+{
++++++++//++If+item+is+an+object+and+contains+the+field,+add+its+value+and+the+value+of+otherwise+if+not
++++++++carry.push(typeof+item+===+'object'+&&+field+in+item+?+item[field]+:+otherwise);

++++++++//++return+the+'carry'+(which+is+the+list+of+matched+field+values)
++++++++return+carry;
++++},+[]);
}|1900930|jsbin+example|1900931|这与map相同，因为返回的数组的长度与提供的数组的长度相同。(在这种情况下，map比reduce稍微便宜一点)：|1900932|function+getFields(list,+field,+otherwise)+{
++++//++map+the+provided+list+to+an+array+containing+either+the+requested+field+or+the+alternative+value
++++return+list.map(function(item)+{
++++++++//++If+item+is+an+object+and+contains+the+field,+add+its+value+and+the+value+of+otherwise+if+not
++++++++return+typeof+item+===+'object'+&&+field+in+item+?+item[field]+:+otherwise;
++++},+[]);
}|1900933|jsbin+example|1900934|然后是最灵活的解决方案，它允许您简单地通过提供一个替代值在这两种行为之间切换。|1900935|function+getFields(list,+field,+otherwise)+{
++++//++determine+once+whether+or+not+to+use+the+'otherwise'
++++var+alt+=+typeof+otherwise+!==+'undefined';

++++//++reduce+the+provided+list+to+an+array+only+containing+the+requested+field
++++return+list.reduce(function(carry,+item)+{
++++++++//++If+item+is+an+object+and+contains+the+field,+add+its+value+and+the+value+of+'otherwise'+if+it+was+provided
++++++++if+(typeof+item+===+'object'+&&+field+in+item)+{
++++++++++++carry.push(item[field]);
++++++++}
++++++++else+if+(alt)+{
++++++++++++carry.push(otherwise);
++++++++}

++++++++//++return+the+'carry'+(which+is+the+list+of+matched+field+values)
++++++++return+carry;
++++},+[]);
}|1900936|jsbin+example|1900937|由于上面的例子(希望)阐明了它的工作方式，让我们通过利用Array.concat函数来缩短该函数。|1900938|function+getFields(list,+field,+otherwise)+{
++++var+alt+=+typeof+otherwise+!==+'undefined';

++++return+list.reduce(function(carry,+item)+{
++++++++return+carry.concat(typeof+item+===+'object'+&&+field+in+item+?+item[field]+:+(alt+?+otherwise+:+[]));
++++},+[]);
}|1900939|jsbin+example|1900940|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/miyiweyese/1/edit?js,console|1|http://jsbin.com/yaxajikore/edit?js,console|2|http://jsbin.com/gulukorigi/1/edit?js,console|3|http://jsbin.com/fipuwosiji/edit?js,console|4|http://jsbin.com/cahecibajo/edit?js,console^0|2|3|1S|9|26|6|0|0|0|D|0|0|0|0|0|0|D|1|0|12|3|16|6|0|0|0|D|2|0|0|0|0|D|3|0|S|C|0|0|0|D|4|0^^$0|@$1|2|3|4|5|6|7|1S|8|@$9|1T|A|1U|B|C]|$9|1V|A|1W|B|C]|$9|1X|A|1Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|20|8|@]|D|@$9|21|A|22|1|23]]|E|$]]|$1|M|3|N|5|6|7|24|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|25|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|26|8|@]|D|@]|E|$I|J]]|$1|S|3|T|5|6|7|27|8|@]|D|@$9|28|A|29|1|2A]]|E|$]]|$1|U|3|V|5|6|7|2B|8|@$9|2C|A|2D|B|C]|$9|2E|A|2F|B|C]]|D|@]|E|$]]|$1|W|3|X|5|H|7|2G|8|@]|D|@]|E|$I|J]]|$1|Y|3|Z|5|6|7|2H|8|@]|D|@$9|2I|A|2J|1|2K]]|E|$]]|$1|10|3|11|5|6|7|2L|8|@]|D|@]|E|$]]|$1|12|3|13|5|H|7|2M|8|@]|D|@]|E|$I|J]]|$1|14|3|15|5|6|7|2N|8|@]|D|@$9|2O|A|2P|1|2Q]]|E|$]]|$1|16|3|17|5|6|7|2R|8|@$9|2S|A|2T|B|C]]|D|@]|E|$]]|$1|18|3|19|5|H|7|2U|8|@]|D|@]|E|$I|J]]|$1|1A|3|1B|5|6|7|2V|8|@]|D|@$9|2W|A|2X|1|2Y]]|E|$]]|$1|1C|3|-4|5|6|7|2Z|8|@]|D|@]|E|$]]]|1D|$1E|$5|1F|1G|1H|E|$1I|1J]]|1K|$5|1F|1G|1H|E|$1I|1L]]|1M|$5|1F|1G|1H|E|$1I|1N]]|1O|$5|1F|1G|1H|E|$1I|1P]]|1Q|$5|1F|1G|1H|E|$1I|1R]]]]

While <code>map</code> is a proper solution to select 'columns' from a list of objects, it has a downside. If not explicitly checked whether or not the columns exists, it'll throw an error and (at best) provide you with <code>undefined</code>. 
I'd opt for a <code>reduce</code> solution, which can simply ignore the property or even set you up with a default value.

<pre><code>function getFields(list, field) {
 // reduce the provided list to an array only containing the requested field
 return list.reduce(function(carry, item) {
 // check if the item is actually an object and does contain the field
 if (typeof item === 'object' &amp;&amp; field in item) {
 carry.push(item[field]);
 }

 // return the 'carry' (which is the list of matched field values)
 return carry;
 }, []);
}
</code></pre>

<a href="http://jsbin.com/miyiweyese/1/edit?js,console" rel="noreferrer">jsbin example</a>

This would work even if one of the items in the provided list is not an object or does not contain the field.

It can even be made more flexible by negotiating a default value should an item not be an object or not contain the field.

<pre><code>function getFields(list, field, otherwise) {
 // reduce the provided list to an array containing either the requested field or the alternative value
 return list.reduce(function(carry, item) {
 // If item is an object and contains the field, add its value and the value of otherwise if not
 carry.push(typeof item === 'object' &amp;&amp; field in item ? item[field] : otherwise);

 // return the 'carry' (which is the list of matched field values)
 return carry;
 }, []);
}
</code></pre>

<a href="http://jsbin.com/yaxajikore/edit?js,console" rel="noreferrer">jsbin example</a>

This would be the same with map, as the length of the returned array would be the same as the provided array. (In which case a <code>map</code> is slightly cheaper than a <code>reduce</code>):

<pre><code>function getFields(list, field, otherwise) {
 // map the provided list to an array containing either the requested field or the alternative value
 return list.map(function(item) {
 // If item is an object and contains the field, add its value and the value of otherwise if not
 return typeof item === 'object' &amp;&amp; field in item ? item[field] : otherwise;
 }, []);
}
</code></pre>

<a href="http://jsbin.com/gulukorigi/1/edit?js,console" rel="noreferrer">jsbin example</a>

And then there is the most flexible solution, one which lets you switch between both behaviours simply by providing an alternative value.

<pre><code>function getFields(list, field, otherwise) {
 // determine once whether or not to use the 'otherwise'
 var alt = typeof otherwise !== 'undefined';

 // reduce the provided list to an array only containing the requested field
 return list.reduce(function(carry, item) {
 // If item is an object and contains the field, add its value and the value of 'otherwise' if it was provided
 if (typeof item === 'object' &amp;&amp; field in item) {
 carry.push(item[field]);
 }
 else if (alt) {
 carry.push(otherwise);
 }

 // return the 'carry' (which is the list of matched field values)
 return carry;
 }, []);
}
</code></pre>

<a href="http://jsbin.com/fipuwosiji/edit?js,console" rel="noreferrer">jsbin example</a>

As the examples above (hopefully) shed some light on the way this works, lets shorten the function a bit by utilising the <code>Array.concat</code> function.

<pre><code>function getFields(list, field, otherwise) {
 var alt = typeof otherwise !== 'undefined';

 return list.reduce(function(carry, item) {
 return carry.concat(typeof item === 'object' &amp;&amp; field in item ? item[field] : (alt ? otherwise : []));
 }, []);
}
</code></pre>

<a href="http://jsbin.com/cahecibajo/edit?js,console" rel="noreferrer">jsbin example</a>

blocks|key|1901084|text|如果还希望支持类似数组的对象，请使用Array.from+(ES2015)：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1901085|Array.from(arrayLike,+x+=>+x.foo);|code-block|syntax|javascript|1901086|1901087|与Array.prototype.map()方法相比，它的优点是输入也可以是一个集合|1901088|let+arrayLike+=+new+Set([{foo:+1},+{foo:+2},+{foo:+3}]);|1901089|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from^0|I|A|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|10|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|11|8|@]|9|@]|C|$]]|$1|L|3|M|5|F|7|12|8|@]|9|@]|C|$G|H]]|$1|N|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]]]

If you want to also support array-like objects, use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from" rel="noreferrer">Array.from</a> (ES2015):

<pre><code>Array.from(arrayLike, x =&gt; x.foo);
</code></pre>

<hr>

The advantage it has over Array.prototype.map() method is the input can also be a Set:

<pre><code>let arrayLike = new Set([{foo: 1}, {foo: 2}, {foo: 3}]);
</code></pre>

blocks|key|1901218|text|如果您想在ES6%2B中使用多个值，则可以使用以下方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1901219|objArray+=+[+{+foo:+1,+bar:+2,+baz:+9},+{+foo:+3,+bar:+4,+baz:+10},+{+foo:+5,+bar:+6,+baz:+20}+];

let+result+=+objArray.map(({+foo,+baz+})+=>+({+foo,+baz+}))|code-block|syntax|javascript|1901220|这是因为左侧的{foo,+baz}使用的是object+destructoring，而右侧的箭头由于使用了ES6's+enhanced+object+literals，因此相当于{foo:+foo,+baz:+baz}。|offset|length|style|CODE|1901221|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment|1|https://dev.to/sarah_chima/enhanced-object-literals-in-es6-a9d^0|0|0|7|A|2H|K|L|K|0|1H|U|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]|$I|11|J|12|K|L]]|9|@$I|13|J|14|1|15]|$I|16|J|17|1|18]]|A|$]]|$1|M|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

If you want multiple values in ES6+ the following will work

<pre><code>objArray = [ { foo: 1, bar: 2, baz: 9}, { foo: 3, bar: 4, baz: 10}, { foo: 5, bar: 6, baz: 20} ];

let result = objArray.map(({ foo, baz }) =&gt; ({ foo, baz }))
</code></pre>

This works as <code>{foo, baz}</code> on the left is using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" rel="noreferrer">object destructoring</a> and on the right side of the arrow is equivalent to <code>{foo: foo, baz: baz}</code> due to <a href="https://dev.to/sarah_chima/enhanced-object-literals-in-es6-a9d" rel="noreferrer">ES6's enhanced object literals</a>.

blocks|key|1686838|text|这取决于你对“更好”的定义。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1686839|其他答案指出了map的使用，这是自然的(特别是对于习惯于函数式风格的人)和简洁。我强烈建议您使用它(如果您不想为少数IE8-+it人员所困扰)。因此，如果“更好”意味着“更简洁”、“可维护”、“可理解”，那么是的，它就更好了。|1686840|另一方面，这种美丽并不是没有额外的成本就能实现的。我不是microbench的狂热粉丝，但我放了一个小的test+here。结果是可以预测的，旧的丑陋的方法似乎比map函数更快。因此，如果“更好”意味着“更快”，那么不，继续沿用传统的时尚。|offset|length|1686841|同样，这只是一个微型工作台，并不是反对使用map，这只是我的两点意见:)。|style|CODE|1686842|entityMap|0|LINK|mutability|MUTABLE|url|http://jsperf.com/pluck-map-vs-loop^0|0|0|1G|9|0|0|L|3|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@$F|W|G|X|1|Y]]|A|$]]|$1|H|3|I|5|6|7|Z|8|@$F|10|G|11|J|K]]|9|@]|A|$]]|$1|L|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]]]

It depends on your definition of &quot;better&quot;.
The other answers point out the use of map, which is natural (especially for guys used to functional style) and concise. I strongly recommend using it (if you don't bother with the few IE8- IT guys). So if &quot;better&quot; means &quot;more concise&quot;, &quot;maintainable&quot;, &quot;understandable&quot; then yes, it's way better.
On the other hand, this beauty doesn't come without additional costs. I'm not a big fan of microbench, but I've put up a small <a href="http://jsperf.com/pluck-map-vs-loop" rel="nofollow noreferrer">test here</a>. The results are predictable, the old ugly way seems to be faster than the map function. So if &quot;better&quot; means &quot;faster&quot;, then no, stay with the old school fashion.
Again this is just a microbench and in no way advocating against the use of <code>map</code>, it's just my two cents :).

blocks|key|1687842|text|上述答案适用于单个属性，但当从数组中选择多个属性时，请使用以下内容|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1687843|var+arrayObj=[{Name,'A',Age:20,Email:'a.gmail.com'},{Name,'B',Age:30,Email:'b.gmail.com'},{Name,'C',Age:40,Email:'c.gmail.com'}]|code-block|syntax|javascript|1687844|现在我只选择两个字段|1687845|+var+outPutArray=arrayObj.map((+{Name,Email}+)+=>++({Name,Email})+)
+console.log(outPutArray)|1687846|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

The above answer is good for a single property but when select multiple properties from an array use this
<pre><code>var arrayObj=[{Name,'A',Age:20,Email:'a.gmail.com'},{Name,'B',Age:30,Email:'b.gmail.com'},{Name,'C',Age:40,Email:'c.gmail.com'}]
</code></pre>
now I select only two fields
<pre><code> var outPutArray=arrayObj.map(( {Name,Email} ) =&gt; ({Name,Email}) )
 console.log(outPutArray)
</code></pre>

blocks|key|1901364|text|在ES6中，如果您希望将字段作为字符串动态传递：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1901365|function+getFields(array,+field)+{
++++return+array.map(a+=>+a[field]);
}

let+result+=+getFields(array,+'foo');|code-block|syntax|javascript|1901366|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

In ES6, in case you want to dynamically pass the field as a string:
<pre><code>function getFields(array, field) {
 return array.map(a =&gt; a[field]);
}

let result = getFields(array, 'foo');
</code></pre>

blocks|key|1901458|text|创建一个空数组，然后从列表中创建forEach元素，将该对象中需要的内容推送到空数组中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1901459|+let+objArray2+=+[];
+objArray.forEach(arr+=>+objArray2.push(arr.foo));|code-block|syntax|javascript|1901460|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

create an empty array then forEach element from your list, push what you want from that object into your empty array.
<pre><code> let objArray2 = [];
 objArray.forEach(arr =&gt; objArray2.push(arr.foo));
</code></pre>

blocks|key|1900544|text|在处理对象数组时，函数映射是一个很好的选择。尽管已经发布了一些很好的答案，但结合使用map和filter的示例可能会有所帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1900545|如果要排除值未定义的属性或仅排除特定属性，可以执行以下操作：|1900546|++++var+obj+=+{value1:+"val1",+value2:+"val2",+Ndb_No:+"testing",+myVal:+undefined};
++++var+keysFiltered+=+Object.keys(obj).filter(function(item){return+!(item+==+"Ndb_No"+%7C%7C+obj[item]+==+undefined)});
++++var+valuesFiltered+=+keysFiltered.map(function(item)+{return+obj[item]});|code-block|syntax|javascript|1900547|https://jsfiddle.net/ohea7mgk/|offset|length|1900548|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|U|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|W|8|@]|9|@$K|X|L|Y|1|Z]]|A|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|J]]]]

Function map is a good choice when dealing with object arrays. Although there have been a number of good answers posted already, the example of using map with combination with filter might be helpful.

In case you want to exclude the properties which values are undefined or exclude just a specific property, you could do the following:

<pre><code> var obj = {value1: "val1", value2: "val2", Ndb_No: "testing", myVal: undefined};
 var keysFiltered = Object.keys(obj).filter(function(item){return !(item == "Ndb_No" || obj[item] == undefined)});
 var valuesFiltered = keysFiltered.map(function(item) {return obj[item]});
</code></pre>

<a href="https://jsfiddle.net/ohea7mgk/" rel="nofollow">https://jsfiddle.net/ohea7mgk/</a>

blocks|key|1901584|text|下面是在对象数组上使用map方法以获取特定属性的另一种形式：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1901585|​|1901586|const+objArray+=+[+{+foo:+1,+bar:+2},+{+foo:+3,+bar:+4},+{+foo:+5,+bar:+6}+];

const+getProp+=+prop+=>+obj+=>+obj[prop];
const+getFoo+=+getProp('foo');
const+fooes+=+objArray.map(getFoo);
console.log(fooes);|code-block|syntax|javascript|1901587|1901588|entityMap^0|B|3|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|T|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|O|$]]

Here is another shape of using <code>map</code> method on array of objects to get back specific property:
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const objArray = [ { foo: 1, bar: 2}, { foo: 3, bar: 4}, { foo: 5, bar: 6} ];

const getProp = prop =&gt; obj =&gt; obj[prop];
const getFoo = getProp('foo');
const fooes = objArray.map(getFoo);
console.log(fooes);</code></pre>
</div>
</div>

I have JavaScript object array with the following structure:

<pre><code>objArray = [ { foo: 1, bar: 2}, { foo: 3, bar: 4}, { foo: 5, bar: 6} ];
</code></pre>

I want to extract a field from each object, and get an array containing the values, for example field <code>foo</code> would give array <code>[ 1, 3, 5 ]</code>.

I can do this with this trivial approach:

<pre><code>function getFields(input, field) {
 var output = [];
 for (var i=0; i &lt; input.length ; ++i)
 output.push(input[i][field]);
 return output;
}

var result = getFields(objArray, "foo"); // returns [ 1, 3, 5 ]
</code></pre>

Is there a more elegant or idiomatic way to do this, so that a custom utility function would be unnecessary?

<hr>

Note about <a href="https://stackoverflow.com/questions/6857468">suggested duplicate</a>, it covers how to convert a single object to an array.

From an array of objects, extract value of a property as array

我有一个具有以下结构的JavaScript对象数组：objArray = [ { foo: 1, bar: 2}, { foo: 3, bar: 4}, { foo: 5, bar: 6} ];我想从每个对象中提取一个字段，并获得一个包含这些值的数组，例如，字段foo将提供数组[ 1, 3, 5 ]。我可以用这个简单的方法做到这一点：function getFields(input, field)

问从对象数组中提取属性值作为数组
EN

回答 16

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从对象数组中提取属性值作为数组EN

回答 16

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从对象数组中提取属性值作为数组
EN