Jquery如何通过数组中的属性查找对象

Question

假设我有一组“目的”对象：（

//array of purpose objects:
var purposeObjects = [
    {purpose: "daily"},
    {purpose: "weekly"},
    {purpose: "monthly"}
];

为了简单起见，我省略了其他属性）

现在我想要一种方法，如果找到匹配的目的名称，则返回特定的对象之一。

这不起作用：

function findPurpose(purposeName){
    return $.grep(purposeObjects, function(){
      return this.purpose == purposeName;
    });
};

findPurpose("daily");

但它实际上返回一个空数组：

[]

我正在使用 JQuery 1.5.2。我也尝试过 $.each() 但没有运气。 显然，大多数 JQuery 方法都是为与 DOM 元素一起使用而设计的（例如 filter()）。

关于如何实现这一点有什么想法吗？

Answer 1

如果您的数组实际上是一组 JQuery 对象，那么简单地使用 .filter() 方法怎么样？

purposeObjects.filter('[purpose="daily"]')

Answer 2

另一种解决方案：

function firstOrNull(array, expr) {
  for (var i = 0; i < array.length; i++) {
    if (expr(array[i]))
      return array[i];
    }
  return null;
}

使用： firstOrNull([{ a: 1, b: 2 }, { a: 3, b: 3 }], function(item) { return item.a === 3; });

该函数不会对数组中的每个元素执行（这对于大型数组很有价值）

Answer 3

我为我的角度应用程序创建了一个 util 服务。它有两个经常使用的功能。

例如你有对象。

首先递归地从对象获取值而不抛出未定义的错误。

{prop：{nestedProp1：{nestedProp2：某个值}}}；
获得没有未定义检查的nestedProp2 2。

基于

[{prop: {nestedProp1: {nestedProp2: somevalue1}}}, {prop: {nestedProp1: {nestedProp2: somevalue2}}}] 的第二个过滤器数组；

使用nestedProp2=somevalue2 从数组中查找对象

app.service('UtilService', function(httpService) {
this.mapStringKeyVal = function(map, field) {
    var lastIdentifiedVal = null;
    var parentVal = map;
    field.split('.').forEach(function(val){
        if(parentVal[val]){
            lastIdentifiedVal = parentVal[val]; 
            parentVal = parentVal[val]; 
        }
    });
    return lastIdentifiedVal;
}


this.arrayPropFilter = function(array, field,value) {
    var lastIdentifiedVal = null;
    var mapStringKeyVal = this.mapStringKeyVal;
    array.forEach(function(arrayItem){
        var valueFound = mapStringKeyVal(arrayItem,field);
        if(!lastIdentifiedVal  && valueFound && valueFound==value){
            lastIdentifiedVal = arrayItem;
        }
    });
    return lastIdentifiedVal;
}});

用于当前问题的解决方案。注入UtilService并调用，

UtilService.arrayPropFilter(purposeArray,'purpose','daily');

或者更高级

UtilService.arrayPropFilter(purposeArray,'purpose.nestedProp1.nestedProp2','daily');

Answer 4

Javascript 有一个专门用于此目的的函数： Array。原型.find。例如，

function isBigEnough(element) {
  return element >= 15;
}

[12, 5, 8, 130, 44].find(isBigEnough); // 130

将回调扩展到函数并不困难。然而，这与 IE 不兼容（部分与 Edge 兼容）。有关完整列表，请查看浏览器兼容性

Answer 5

从 Array.find 的 polyfill Array.prototype.find 代码复制，并将数组添加为第一个参数。

您可以将搜索词作为谓词函数传递

// Example
var listOfObjects = [{key: "1", value: "one"}, {key: "2", value: "two"}]
var result = findInArray(listOfObjects, function(element) {
  return element.key == "1";
});
console.log(result);

// the function you want
function findInArray(listOfObjects, predicate) {
      if (listOfObjects == null) {
        throw new TypeError('listOfObjects is null or not defined');
      }

      var o = Object(listOfObjects);

      var len = o.length >>> 0;

      if (typeof predicate !== 'function') {
        throw new TypeError('predicate must be a function');
      }

      var thisArg = arguments[1];

      var k = 0;

      while (k < len) {
        var kValue = o[k];
        if (predicate.call(thisArg, kValue, k, o)) {
          return kValue;
        }
        k++;
      }

      return undefined;
}

Answer 6

不需要 jQuery。

JavaScript 数组有一个 find 方法，这样你就可以在一行中实现这一点：

array.find((o) => { return o[propertyName] === propertyValue })

示例

const purposeObjects = [
    {purpose: "daily"},
    {purpose: "weekly"},
    {purpose: "monthly"}
];

purposeObjects.find((o) => { return o["purpose"] === "weekly" })      

// output -> {purpose: "weekly"}

如果你需要 IE 兼容性，请导入此 polyfill 在您的代码中。

Answer 7

您应该在 grep 函数中传递对项目的引用：

function findPurpose(purposeName){
    return $.grep(purposeObjects, function(item){
      return item.purpose == purposeName;
    });
};

示例

Answer 8

我个人使用一个更通用的函数，适用于任何数组的任何属性：

function lookup(array, prop, value) {
    for (var i = 0, len = array.length; i < len; i++)
        if (array[i] && array[i][prop] === value) return array[i];
}

您只需这样调用它：

lookup(purposeObjects, "purpose", "daily");

Answer 9

错误是您不能在 grep 中使用 this，但必须使用对该元素的引用。这有效：

function findPurpose(purposeName){
    return $.grep(purposeObjects, function(n, i){
      return n.purpose == purposeName;
    });
};

findPurpose("daily");

返回：

[Object { purpose="daily"}]

Answer 10

使用 Underscore.js findWhere 函数 (http://underscorejs.org/#findWhere)：

var purposeObjects = [
    {purpose: "daily"},
    {purpose: "weekly"},
    {purpose: "monthly"}
];

var daily = _.findWhere(purposeObjects, {purpose: 'daily'});

每日 等于：

{"purpose":"daily"}

这是一个小提琴： http://jsfiddle.net/spencerw/oqbgc21x/

要返回多个（如果您的数组中有更多），您可以使用 _.where(...)

Answer 11

最好、最快的方法是

function arrayLookup(array, prop, val) {
    for (var i = 0, len = array.length; i < len; i++) {
        if (array[i].hasOwnProperty(prop) && array[i][prop] === val) {
            return array[i];
        }
    }
    return null;
}