javascript过滤对象数组

Posted 2023-05-09

【中文标题】javascript过滤对象数组

【英文标题】：javascript filter array of objects

【发布时间】：2012-11-15 16:43:47

【问题描述】：

我有一个对象数组，我想知道搜索它的最佳方法。鉴于以下示例，我如何搜索 name = "Joe" 和 age < 30？ jQuery 有什么可以帮助的吗？还是我必须自己强制执行此搜索？

var names = new Array();

var object =  name : "Joe", age:20, email: "[e-mail]";
names.push(object);

object =  name : "Mike", age:50, email: "[e-mail]";
names.push(object);

object =  name : "Joe", age:45, email: "[e-mail]";
names.push(object);

【问题讨论】：

搜索是指过滤吗？

搜索 != 过滤器。你要哪个？

【参考方案1】：

Array.prototype.filter() 的现代解决方案：

const found_names = names.filter(v => v.name === "Joe" && v.age < 30);

或者如果你还在使用 jQuery，你可以使用jQuery.grep():

var found_names = $.grep(names, function(v) 
    return v.name === "Joe" && v.age < 30;
);

【参考方案2】：

您可以使用[].filter 方法非常轻松地做到这一点：

var filterednames = names.filter(function(obj) 
    return (obj.name === "Joe") && (obj.age < 30);
);

您可以通过this MDN page了解更多信息。

【参考方案3】：

您可以利用jQuery.filter() 函数从匹配元素的子集中返回元素。

var names = [
     name : "Joe", age:20, email: "[e-mail]",
     name : "Mike", age:50, email: "[e-mail]",
     name : "Joe", age:45, email: "[e-mail]"
   ];
   
   
var filteredNames = $(names).filter(function( idx ) 
    return names[idx].name === "Joe" && names[idx].age < 30;
); 

$(filteredNames).each(function()
     $('#output').append(this.name);
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="output"/>

【参考方案4】：

var nameList = [
name:'x', age:20, email:'[e-mail]',
name:'y', age:60, email:'[e-mail]',
name:'Joe', age:22, email:'[e-mail]',
name:'Abc', age:40, email:'[e-mail]'
];

var filteredValue = nameList.filter(function (item) 
      return item.name == "Joe" && item.age < 30;
);

//To See Output Result as Array
console.log(JSON.stringify(filteredValue));

你可以简单地使用 javascript :)

【参考方案5】：

对于那些想要使用任意键从对象数组中过滤的人：

function filterItems(items, searchVal) 
  return items.filter((item) => Object.values(item).includes(searchVal));

let data = [
   "name": "apple", "type": "fruit", "id": 123234 ,
   "name": "cat", "type": "animal", "id": 98989 ,
   "name": "something", "type": "other", "id": 656565 ]


console.log("Filtered by name: ", filterItems(data, "apple"));
console.log("Filtered by type: ", filterItems(data, "animal"));
console.log("Filtered by id: ", filterItems(data, 656565));

从 JSON 对象数组中过滤：**

【参考方案6】：

var names = [
        name: "Joe",
        age: 20,
        email: "[e-mail]"
    ,
    
        name: "Mike",
        age: 50,
        email: "[e-mail]"
    ,
    
        name: "Joe",
        age: 45,
        email: "[e-mail]"
    
];
const res = _.filter(names, (name) => 
    return name.name == "Joe" && name.age < 30;

);
console.log(res);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.js"></script>

【参考方案7】：

这么快的问题。如果您有两个对象数组，并且您想“对齐”这些对象数组，以确保每个数组的对象与另一个数组的顺序相同，该怎么办？如果您不知道数组中的任何对象包含哪些键和值怎么办...更不用说它们的顺序了？

因此，您需要为[].filter、[].map 等提供“通配符表达式”。如何获得通配符表达式？

var jux = (function()
    'use strict';

    function wildExp(obj)
        var keysCrude = Object.keys(obj),
            keysA = ('a["' + keysCrude.join('"], a["') + '"]').split(', '),
            keysB = ('b["' + keysCrude.join('"], b["') + '"]').split(', '),
            keys = [].concat(keysA, keysB)
                .sort(function(a, b)  return a.substring(1, a.length) > b.substring(1, b.length); );
        var exp = keys.join('').split(']b').join('] > b').split(']a').join('] || a');
        return exp;
    

    return 
        sort: wildExp
    ;

)();

var sortKeys = 
    k: 'v',
    key: 'val',
    n: 'p',
    name: 'param'
;
var objArray = [
    
        k: 'z',
        key: 'g',
        n: 'a',
        name: 'b'
    ,
    
        k: 'y',
        key: 'h',
        n: 'b',
        name: 't'
    ,
    
        k: 'x',
        key: 'o',
        n: 'a',
        name: 'c'
    
];
var exp = jux.sort(sortKeys);

console.log('@juxSort Expression:', exp);
console.log('@juxSort:', objArray.sort(function(a, b)
    return eval(exp);
));

您还可以在每个对象的迭代中使用此函数，以便为每个对象中的所有键创建更好的集体表达式，然后以这种方式过滤您的数组。

这是我几乎完成的 API Juxtapose 中的一个小 sn-p，它可以做到这一点，对象相等与豁免、对象统一和数组压缩。如果这些是您的项目需要或想要的东西，请发表评论，我会尽快使该库可访问。

希望这会有所帮助！快乐编码:)

【参考方案8】：

最直接和易读的方法是使用原生 javascript 过滤方法。

原生 JavaScript 过滤器采用声明式方法过滤数组元素。由于它是在 Array.prototype 上定义的方法，因此它在提供的数组上进行迭代并在其上调用回调。这个回调函数，作为我们的过滤函数，接受三个参数：

element — 正在迭代的数组中的当前项

index — 正在迭代的数组中当前元素的索引或位置

array — 应用过滤器方法的原始数组 让我们在一个例子中使用这个过滤方法。请注意，过滤器可以应用于任何类型的数组。在此示例中，我们将根据对象属性过滤对象数组。

根据对象属性过滤对象数组的示例如下所示：

// Please do not hate me for bashing on pizza and burgers.
// and FYI, I totally made up the healthMetric param :)
let foods = [
   type: "pizza", healthMetric: 25 ,
   type: "burger", healthMetric: 10 ,
   type: "salad", healthMetric: 60 ,
   type: "apple", healthMetric: 82 
];
let isHealthy = food => food.healthMetric >= 50;

const result = foods.filter(isHealthy);

console.log(result.map(food => food.type));
// Result: ['salad', 'apple']

要了解有关在函数中过滤数组并构建自己的过滤的更多信息，请查看这篇文章： https://medium.com/better-programming/build-your-own-filter-e88ba0dcbfae