通过值或属性从对象数组中获取JavaScript对象

比方说,我有一个四个对象的数组:

var jsObjects = [ {a: 1, b: 2}, {a: 3, b: 4}, {a: 5, b: 6}, {a: 7, b: 8} ]; 

有没有办法,我可以得到第三个对象( {a: 5, b: 6} )的属性b的值,例如没有for...in循环?

 var result = jsObjects.filter(function( obj ) { return obj.b == 6; }); 

查看Array.prototype.filter()上的MDN Docs

我不知道你为什么反对for循环(大概你是一个for循环,不是专门用于..in),它们是快速和容易阅读。 无论如何,这里有一些select。

For循环:

 function getByValue(arr, value) { for (var i=0, iLen=arr.length; i<iLen; i++) { if (arr[i].b == value) return arr[i]; } } 

。过滤

 function getByValue2(arr, value) { var result = arr.filter(function(o){return ob == value;} ); return result? result[0] : null; // or undefined } 

.forEach

 function getByValue3(arr, value) { var result = []; arr.forEach(function(o){if (ob == value) result.push(o);} ); return result? result[0] : null; // or undefined } 

另一方面,如果你确实意味着for..in并且想要find一个值为6的属性的对象,那么除非你传递名字来检查,否则你必须使用for..in。 例如

 function getByValue4(arr, value) { var o; for (var i=0, iLen=arr.length; i<iLen; i++) { o = arr[i]; for (var p in o) { if (o.hasOwnProperty(p) && o[p] == value) { return o; } } } } 
 jsObjects.find(x => xb === 6) 

来自MDN:

如果数组中的元素满足提供的testing函数,则find()方法将返回数组中的值。 否则返回undefined


注意:所有浏览器都不支持find()和arrow函数等方法,但这并不意味着您现在不能使用这些function。 只需使用Babel- it将ES6代码转换成ES5。

使用underscore.js:

 var foundObject = _.findWhere(jsObjects, {b: 6}); 

如果我理解正确,你想在数组中find它的b属性为6

 var found; jsObjects.some(function (obj) { if (obj.b === 6) { found = obj; return true; } }); 

或者如果您使用下划线:

 var found = _.select(jsObjects, function (obj) { return obj.b === 6; }); 

它看起来像ECMAScript 6提议中有Array方法find()findIndex() 。 MDN还提供了可以包含在所有浏览器中的这些function的polyfills。

find()

 function isPrime(element, index, array) { var start = 2; while (start <= Math.sqrt(element)) { if (element % start++ < 1) return false; } return (element > 1); } console.log( [4, 6, 8, 12].find(isPrime) ); // undefined, not found console.log( [4, 5, 8, 12].find(isPrime) ); // 5 

findIndex()

 function isPrime(element, index, array) { var start = 2; while (start <= Math.sqrt(element)) { if (element % start++ < 1) return false; } return (element > 1); } console.log( [4, 6, 8, 12].findIndex(isPrime) ); // -1, not found console.log( [4, 6, 7, 12].findIndex(isPrime) ); // 2 

尝试使用数组filter方法过滤具有property array of objects

 var jsObjects = [ {a: 1, b: 2}, {a: 3, b: 4}, {a: 5, b: 6}, {a: 7, b: 8} ]; 

使用数组filter方法:

 var filterObj = jsObjects.filter(function(e) { return eb == 6; }); 

在循环中使用:

 for (var i in jsObjects) { if (jsObjects[i].b == 6) { console.log(jsObjects[i]); // {a: 5, b: 6} } } 

工作小提琴: https //jsfiddle.net/uq9n9g77/

如何使用lo-dash的 _.find(collection, [predicate=_.identity], [fromIndex=0])通过对象属性值从对象数组中获取对象。 你可以做这样的事情:

 var o = _.find(jsObjects, {'b': 6}); 

参数:

 collection (Array|Object): The collection to inspect. [predicate=_.identity] (Function): The function invoked per iteration. [fromIndex=0] (number): The index to search from. 

返回

 (*): Returns the matched element (in your case, {a: 5, b: 6}), else undefined. 

在性能方面, _.find()的速度更快,因为它只是拉第一个对象的属性{'b': 6} ,另一方面,如果假设你的数组包含多个匹配的属性集(键:值),那么你应该考虑使用_.filter()方法。 所以在你的情况下,因为你的数组有一个单一的对象与这个属性,我会使用_.find()

如果你正在寻找一个单一的结果,而不是arrays,我可以build议减less?

这里是一个简单的'ole JavaScript的解决scheme,返回一个匹配的对象,如果存在,否则返回null。

 var result = arr.reduce(function(prev, curr) { return (curr.b === 6) ? curr : prev; }, null); 

您可以使用Array.filter方法: https : //developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/filter

请参阅此文档https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values
例如:

 var inventory = [ {name: 'apples', quantity: 2}, {name: 'bananas', quantity: 0}, {name: 'cherries', quantity: 5} ]; function findCherries(fruit) { return fruit.name === 'cherries'; } console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 } 

通过特定的属性值从对象数组中获取第一个对象:

 function getObjectFromObjectsArrayByPropertyValue(objectsArray, propertyName, propertyValue) { return objectsArray.find(function (objectsArrayElement) { return objectsArrayElement[propertyName] == propertyValue; }); } function findObject () { var arrayOfObjectsString = document.getElementById("arrayOfObjects").value, arrayOfObjects, propertyName = document.getElementById("propertyName").value, propertyValue = document.getElementById("propertyValue").value, preview = document.getElementById("preview"), searchingObject; arrayOfObjects = JSON.parse(arrayOfObjectsString); console.debug(arrayOfObjects); if(arrayOfObjects && propertyName && propertyValue) { searchingObject = getObjectFromObjectsArrayByPropertyValue(arrayOfObjects, propertyName, propertyValue); if(searchingObject) { preview.innerHTML = JSON.stringify(searchingObject, false, 2); } else { preview.innerHTML = "there is no object with property " + propertyName + " = " + propertyValue + " in your array of objects"; } } } 
 pre { padding: 5px; border-radius: 4px; background: #f3f2f2; } textarea, button { width: 100% } 
 <fieldset> <legend>Input Data:</legend> <label>Put here your array of objects</label> <textarea rows="7" id="arrayOfObjects"> [ {"a": 1, "b": 2}, {"a": 3, "b": 4}, {"a": 5, "b": 6}, {"a": 7, "b": 8, "c": 157} ] </textarea> <hr> <label>property name: </label> <input type="text" id="propertyName" value="b"/> <label>property value: </label> <input type="text" id="propertyValue" value=6 /> </fieldset> <hr> <button onclick="findObject()">find object in array!</button> <hr> <fieldset> <legend>Searching Result:</legend> <pre id="preview">click find</pre> </fieldset> 

使用find和bind将特定的键值传递给callback函数。

  function byValue(o) { return oa === this.a && ob === this.b; }; var result = jsObjects.find(byValue.bind({ a: 5, b: 6 })); 
 var jsObjects = [{a: 1, b: 2}, {a: 3, b: 4}, {a: 5, b: 6}, {a: 7, b: 8}]; 

要访问第三个对象,请使用: jsObjects[2];
要访问第三个对象的b值,请使用: jsObjects[2].b;