通过property的值从对象数组中获取JavaScript对象

Question

假设我有一个包含四个对象的数组:

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循环？

Answer 1

Filter 对象数组,其属性与value匹配,返回数组:

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

请参阅Array.prototype.filter上的MDN Docs()

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

let result = jsObjects.filter(obj => {
  return obj.b === 6
})

console.log(result)

Find数组中第一个元素/对象的值,否则undefined返回.

var result = jsObjects.find(obj => {
  return obj.b === 6
})

请参阅Array.prototype.find()上的MDN Docs

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

let result = jsObjects.find(obj => {
  return obj.b === 6
})

console.log(result)

Answer 2

jsObjects.find(x => x.b === 6)

来自MDN:

find()如果数组中的元素满足提供的测试函数,则该方法返回数组中的值.否则undefined返回.

旁注:find()旧浏览器(如IE)不支持类似和箭头功能的方法,因此如果您想支持这些浏览器,则应使用Babel来转换代码.

Answer 3

我不知道为什么你反对for循环(大概你的意思是for循环,而不是专门用于..in),它们快速且易于阅读.无论如何,这里有一些选择.

对于循环:

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 o.b == value;} );

  return result? result[0] : null; // or undefined

}

.forEach

function getByValue3(arr, value) {

  var result = [];

  arr.forEach(function(o){if (o.b == value) result.push(o);} );

  return result? result[0] : null; // or undefined

}

另一方面,如果您确实想要...而想要查找具有值为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;
      }
    }
  }
}

Answer 4

尝试使用Array过滤方法过滤array of objects使用property.

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

使用数组过滤方法:

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

用于循环:

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

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

Answer 5

好吧,有几种方法可以做到这一点,但让我们从最简单的方法和最新的方法开始,这个函数被调用find().

使用时要小心find,因为即使IE11也不支持它,所以需要进行转换...

所以你有这个对象,如你所说:

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

你可以编写一个函数并得到它:

function filterValue(obj, key, value) {
  return obj.find(function(v){ return v[key] === value});
}

并使用这样的功能:

filterValue(jsObjects, "b", 6); //{a: 5, b: 6}

在ES6中甚至缩短版本:

const filterValue = (obj, key, value)=> obj.find(v => v[key] === value);

此方法仅返回匹配...的第一个值,为了获得更好的结果和浏览器支持,您可以使用filter:

const filterValue = (obj, key, value)=> obj.filter(v => v[key] === value);

我们会回来[{a: 5, b: 6}]......

这个方法将返回一个数组而不是......

你也可以简单地使用for循环,创建一个这样的函数:

function filteredArray(arr, key, value) {
  const newArray = [];
  for(i=0, l=arr.length; i<l; i++) {
    if(arr[i][key] === value) {
      newArray.push(arr[i]);
    }
  }
 return newArray;
}

并称之为:

filteredArray(jsObjects, "b", 6); //[{a: 5, b: 6}]

Answer 6

使用underscore.js:

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

Answer 7

看起来在ECMAScript 6提案中有Array方法find()和findIndex().MDN还提供了polyfill,您可以包含这些polyfill以在所有浏览器中获得这些功能.

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

Answer 8

如果我理解正确,你想在数组中找到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;
});

Answer 9

如果您正在寻找单个结果,而不是数组,我可以建议减少吗？

这是一个简单的'ole javascript中的解决方案,如果存在匹配对象,则返回匹配对象,否则返回null.

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

Answer 10

您可以将它与箭头功能一起使用,如下所示:

var demoArray = [
   {name: 'apples', quantity: 2},
   {name: 'bananas', quantity: 0},
   {name: 'cherries', quantity: 5}
];

var result = demoArray.filter( obj => obj.name === 'apples')[0];
console.log(result);
// {name: 'apples', quantity: 2}

Answer 11

如何使用_.find(collection, [predicate=_.identity], [fromIndex=0])的LO-冲刺获得由对象的属性值数组对象的对象.你可以这样做:

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}另一方面,如果假设你的数组包含多个具有匹配属性集(key:value)的对象,那么你应该考虑使用_.filter()方法.所以在你的情况下,因为你的数组有一个具有此属性的对象,我会使用_.find().

Answer 12

请参阅此文档https://developer.mozilla.org/zh-CN/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 }

Answer 13

var result = jsObjects.filter(x=> x.b === 6);

会更好，在过滤器中使用 return 有时你不能得到结果（我不知道为什么）

Answer 14

刚刚改进了此答案中最快/最好的部分，使其更加可重用/清晰：

function getElByPropVal(arr, prop, val){
    for (var i = 0, length = arr.length; i < length; i++) {
        if (arr[i][prop] == val){
            return arr[i];
        }
    }
}