通过属性值从对象数组中获取JavaScript对象\[重复\]

JavaScript

乐米亚

2020-03-11

假设我有四个对象组成的数组:

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

第598篇《通过属性值从对象数组中获取JavaScript对象\[重复\]》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

14个回答
A小卤蛋Pro 2020.03.11

使用find with bind将特定的键值传递给回调函数。

   function byValue(o) { 
       return o.a === this.a && o.b === this.b; 
   };   

   var result = jsObjects.find(byValue.bind({ a: 5, b: 6 }));
小小Stafan宝儿 2020.03.11

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

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>

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

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

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

会更好,有时在过滤器中使用return可能无法获得结果(我不知道为什么)

伽罗卡卡西 2020.03.11

使此答案的最佳/最快部分更加可重用和清晰:

function getElByPropVal(myArray, prop, val){
    for (var i = 0, length = myArray.length; i < length; i++) {
        if (myArray[i][prop] == val){
            return myArray[i];
        }
    }
}
Sam凯卡卡西 2020.03.11

如果您正在寻找一个单一的结果,而不是数组,我建议减少吗?

这是普通的ole javascript解决方案,如果存在则返回匹配对象,否则返回null。

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

看起来ECMAScript 6提案中有Array方法find()findIndex()MDN还提供了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
伽罗Mandy 2020.03.11

如果我理解正确,则想在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;
});
HarryL梅 2020.03.11

尝试使用Array filter方法来过滤array of objectswith 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/

A村村 2020.03.11

使用underscore.js:

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

我不知道您为什么反对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

}

.for每个

function getByValue3(arr, value) {

  var result = [];

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

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

}

另一方面,如果您确实确实想使用..in,并希望找到具有任何属性值为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;
      }
    }
  }
}
LEYJim 2020.03.11

好的,有几种方法可以做到这一点,但让我们从最简单的一种最新方法开始,此函数称为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}]
2020.03.11

Filter 属性与值匹配的对象数组返回数组:

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

请参阅Array.prototype.filter()上MDN文档

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文档

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)

理查德猪猪伽罗 2020.03.11
jsObjects.find(x => x.b === 6)

从MDN:

The find() method returns a value in the array, if an element in the array satisfies the provided testing function. Otherwise undefined is returned.


Side note: methods like find() and arrow functions are not supported by older browsers (like IE), so if you want to support these browsers, you should transpile your code using Babel.

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android