在Javascript中获取数组元素的特定属性值

Question

我有关于Javascript的以下问题 假设我们有 srcArr - 对象数组，每个对象定义如下

var srcElement = {id:id_val , prop1:value1, prop2:value2}

我需要获取数组元素的id-s数组。即。像{id;：id_val}这样的元素数组 最简单的方法是这样的

var arrayLength = srcArr.length;
for (var index=0; index<arrayLength;index++) {
  idsArr.push(srcArr[index].id);     
}

问题是：是否有更有效的方法来获取数组元素的ID？ 提前致谢

Answer 1

一种常见的可重用功能方法：

var collec = [
  {num:1, str:'a'},
  {num:2, str:'b'}
];

var dot = function(prop) {
  return function(obj) {
    return obj[prop];
  }
};

collec.map(dot('num')); //=> [1,2]
collec.map(dot('str')); //=> ['a','b']

Answer 2

使用underscore.js的地图功能

srcArr = [{id:1}, {id:2}]
var result = _.map(srcArr, function(el){
    return el.id
});
//result = [1,2]

map将对每个元素执行相同的功能，并将结果添加到新数组

编辑： 这不如原生for循环那么快。

http://jsperf.com/javascript-map-vs-jquery-map-vs-jquery-each

Answer 3

map方法可以用作迭代器，但实际上是用来操作提供的数组并返回一个新数组。

最后：

For loop map比Jquery map快得多。 Test the performance of the same here

你走了：

var srcArray = [{
    id: 1,
    prop1: 'a',
    prop2: 'b'
}, {
    id: 2,
    prop1: 'c',
    prop2: 'd'
}];
map = function (array, mapFunction) {
    var newArray = new Array(array.length);
    for (var i = 0; i < array.length; i++) {
        newArray[i] = mapFunction(array[i]);
    }

    return newArray;
}
var newItems = map(srcArray, function (i) {
    return i.id;
});

输出

newItems: [1,2]

Live Demo

Answer 4

如果有效意味着简短易读，您可以使用Lodash pluck函数：

var idsArr = _.pluck(srcArr, 'id');

http://lodash.com/docs#pluck

以下是源代码：https://github.com/lodash/lodash/blob/2.4.1/dist/lodash.compat.js#L3848。我怀疑它比一个好的旧循环慢，但如果你真的关心它，你应该运行一些性能测试：google "jsperf map"。

也就是说，编写自己的pluck函数非常容易：

function pluck(src, key) {
    var i = 0, l = src.length, result = [];
    while (i < l) result.push(src[i++][key]);
    return result;
}