在一个JavaScript对象的数组中通过ID查找对象

我有一个数组。

myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}, etc.]

我无法改变这个数组的结构。我被传递了一个45'的id，我想在数组中获得该对象的'bar''。

我如何在JavaScript中或使用jQuery来做这个？

Valeriu
56173
已编辑的问题 5日 十月 2021 в 9:08
thugsb
已编辑的问题 17日 五月 2016 в 10:44
编程
arrays javascript jquery object javascript-objects
9日 九月 2011 в 3:42
102 种观点

由于你已经在使用jQuery，你可以使用grep函数，它是用来搜索一个数组的。

var result = $.grep(myArray, function(e){ return e.id == id; });

其结果是一个包含所找到的项目的数组。如果你知道这个对象一直在那里，而且只出现一次，你可以直接使用result[0].foo来获取值。否则你应该检查结果数组的长度。例子。

if (result.length === 0) {
  // no result found
} else if (result.length === 1) {
  // property found, access the foo property using result[0].foo
} else {
  // multiple items found
}
Valeriu
56173
编辑本段答案5日 十月 2021 в 9:08
CodeJunkie
编辑本段答案19日 七月 2019 в 8:17
评论(14)
解决办法

使用find()方法。

myArray.find(x => x.id === '45').foo;

来自MDN。

find()方法返回数组中的第一个值，如果数组中的一个元素满足所提供的测试函数。否则就返回undefined。

如果你想找到它的index，请使用findIndex()。

myArray.findIndex(x => x.id === '45');

来自MDN。

findIndex()方法返回数组中满足所提供测试函数的第一个元素的索引。否则返回-1。

如果你想得到一个匹配元素的数组，请使用filter()方法代替。

myArray.filter(x => x.id === '45');

这将返回一个对象的数组。如果你想获得一个foo'属性的数组，你可以用[map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)方法来实现。

myArray.filter(x => x.id === '45').map(x => x.foo);

题外话：像find()或filter()这样的方法，以及箭头函数不被旧的浏览器支持（如IE），所以如果你想支持这些浏览器，你应该用Babel转译你的代码（用polyfill）。

Valeriu
56173
编辑本段答案5日 十月 2021 в 9:08
Ramesh Maharjan
编辑本段答案17日 六月 2019 в 10:15
评论(8)

另一种解决方案是创建一个查找对象。

var lookup = {};
for (var i = 0, len = array.length; i < len; i++) {
    lookup[array[i].id] = array[i];
}

... now you can use lookup[id]...

如果你需要做许多查找，这一点尤其有趣。

这不会需要更多的内存，因为ID和对象将被共享。

评论(13)

ECMAScript 2015提供了关于数组的[find()][1]方法。

<！--开始片段。 js hide: false console: true babel: false -->

var myArray = [
 {id:1, name:"bob"},
 {id:2, name:"dan"},
 {id:3, name:"barb"},
]

// grab the Array item which matchs the id "2"
var item = myArray.find(item => item.id === 2);

// print
console.log(item.name);

<！--结束片段--&gt。

它可以在没有外部库的情况下工作。 但如果你想要[旧版浏览器支持][2]，你可能需要包含[这个polyfill][3]。

[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find [2]: http://kangax.github.io/compat-table/es6/#Array.prototype_methods [3]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find#Polyfill

vsync
编辑本段答案10日 九月 2017 в 3:10
评论(7)

[Underscore.js][1]有一个不错的方法。

myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'},etc.]
obj = _.find(myArray, function(obj) { return obj.id == '45' })

[1]: http://underscorejs.org/#find

评论(3)

我认为最简单的方法是下面的方法，但它在Internet Explorer 8（或更早）上无法工作。

var result = myArray.filter(function(v) {
    return v.id === '45'; // Filter out the appropriate one
})[0].foo; // Get result and access the foo property
评论(5)

试试下面的方法

function findById(source, id) {
  for (var i = 0; i < source.length; i++) {
    if (source[i].id === id) {
      return source[i];
    }
  }
  throw "Couldn't find object with id: " + id;
}
评论(5)
myArray.filter(function(a){ return a.id == some_id_you_want })[0]
评论(3)

上面的findById函数的一个通用且更灵活的版本。

// array = [{key:value},{key:value}]
function objectFindByKey(array, key, value) {
    for (var i = 0; i < array.length; i++) {
        if (array[i][key] === value) {
            return array[i];
        }
    }
    return null;
}

var array = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}];
var result_obj = objectFindByKey(array, 'id', '45');
评论(0)

你可以使用[map()][1]函数轻松获得。

myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}];

var found = $.map(myArray, function(val) {
    return val.id == 45 ? val.foo : null;
});

//found[0] == "bar";

工作实例。 http://jsfiddle.net/hunter/Pxaua/

[1]: http://api.jquery.com/jQuery.map/

评论(1)

你可以使用过滤器。

  function getById(id, myArray) {
    return myArray.filter(function(obj) {
      if(obj.id == id) {
        return obj 
      }
    })[0]
  }

get_my_obj = getById(73, myArray);
评论(1)

虽然这里有许多正确的答案，但其中许多答案并没有解决这样一个事实，即如果不止一次这样做，这是一个不必要的昂贵操作。 在一个极端的情况下，这可能是真正的性能问题的原因。

在现实世界中，如果你要处理大量的项目，并且考虑到性能问题，那么最初建立一个查找就会快得多。

var items = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}];

var lookup = items.reduce((o,i)=>o[i.id]=o,{});

然后你可以在固定的时间内得到像这样的项目。

var bar = o[id];

你也可以考虑使用一个地图而不是一个对象作为查找对象。 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Map

评论(0)

使用本地Array.reduce

var array = [ {'id':'73' ,'foo':'bar'} , {'id':'45' ,'foo':'bar'} , ];
var id = 73;

<！-->

var found = array.reduce(function(a, b){
    return (a.id==id && a) || (b.id == id && b)
});

如果找到，则返回对象元素，否则返回false。

评论(1)

如果你多次这样做，你可能会设置一个地图（ES6）。

const map = new Map( myArray.map(el => [el.id, el]) );

那么你就可以简单的做。

map.get(27).foo
Jonas Wilms
编辑本段答案20日 七月 2018 в 8:33
评论(0)

下面是我如何在纯JavaScript中，以我能想到的最简陋的方式，在ECMAScript 3或更高版本中工作。 一旦发现匹配，它就会返回。

var getKeyValueById = function(array, key, id) {
    var testArray = array.slice(), test;
    while(test = testArray.pop()) {
        if (test.id === id) {
            return test[key];
        }
    }
    // return undefined if no matching id is found in array
    return;
}

var myArray = [{'id':'73', 'foo':'bar'}, {'id':'45', 'foo':'bar'}]
var result = getKeyValueById(myArray, 'foo', '45');

// result is 'bar', obtained from object with id of '45'
评论(0)

更加通用和简短

function findFromArray(array,key,value) {
        return array.filter(function (element) {
            return element[key] == value;
        }).shift();
}

在你的例子中，Ex.Implement = findFromArray(myArray,'id',45)将得到整个元素。 var element = findFromArray(myArray,'id',45)` 这将给你整个元素。

评论(0)

在公认的答案的基础上。

jQuery。

var foo = $.grep(myArray, function(e){ return e.id === foo_id})
myArray.pop(foo)

或者CoffeeScript。

foo = $.grep myArray, (e) -> e.id == foo_id
myArray.pop foo
评论(0)

你可以试试http://sugarjs.com/ 的 Sugarjs。

它在数组上有一个很好的方法，.find。 所以你可以像这样找到一个元素。

array.find( {id: 75} );

你也可以通过一个有更多属性的对象来增加另一个"where-clause"。

注意，Sugarjs扩展了原生对象，有些人认为这是非常邪恶的...。

评论(3)

只要浏览器支持[ECMA-262][1]，第5版（2009年12月），应该就可以了，几乎是一言九鼎。

var bFound = myArray.some(function (obj) {
    return obj.id === 45;
});

[1]: https://en.wikipedia.org/wiki/ECMAScript#Versions

评论(1)

你甚至可以通过使用内置的"filter&quot.函数在纯JavaScript中实现这一点。 函数来处理数组。

Array.prototype.filterObjects = function(key, value) {
    return this.filter(function(x) { return x[key] === value; })
}

因此，现在只需通过"id&quot.来代替key和"45"。 代替key和"45" 代替value，你将得到与id为45相匹配的完整对象。 所以，这将是。

myArr.filterObjects("id", "45");
评论(1)