基于 JavaScript 中的属性过滤对象数组

JavaScript 9月前 44

filter() 方法是获取偏好结果的最简单方法。

除此之外，你可以遍历整个对象数组并显式声明条件。从技术上讲，较少代码和易于访问的技术是通过 filter 方法。

在这里，我们将重点介绍在对象数组上使用过滤器的两种方法。我们将一个回调函数指向一个变量或对象来存储过滤后的结果。

这个回调函数将具有函数的一般结构。稍后，我们也会尝试用箭头函数解决这个问题，并检查结果是否相似。

基于 JavaScript 中的属性过滤对象数组的通用回调函数

该演示将初始化一个具有多个属性的数组，也就是键值对。策略是先访问对象，然后访问数组。

接下来，我们将获取一个属性并对其应用条件。当我们使用 filter 方法时，条件的完全匹配将被过滤。

让我们跳到代码行。

代码片段：

var feature = {
    'models': [{
        "name": "Raven",
        "age": "22",
        "height": "176",
        "gender": "Female",
        "hair": "Brown",
    },
    {
        "name": "Alex",
        "age": "23",
        "height": "185",
        "gender": "Male",
        "hair": "Black",
    },
    {
        "name": "Eden",
        "age": "25",
        "height": "169",
        "gender": "Female",
        "hair": "Black",
    }
  ]
}
var extract = feature.models.filter(function(el){
    return el.age<25 &&
    el.height>=170 ;
});
console.log(extract);

输出：

基于 JavaScript 中的属性过滤对象数组

在这里，feature.models.filter 相应地访问对象和数组。此外，filter 方法被触发以将约束放入其中。

正如我们所见，age<25 && height>170 提取了可能匹配的模型细节。

使用箭头函数根据 JavaScript 中的属性过滤对象数组

箭头函数是普通函数结构约定的简写方式。我们将看看是否可以使用箭头函数来过滤对象数组。

代码片段：

var feature = {
    'models': [{
        "name": "Raven",
        "age": "22",
        "height": "176",
        "gender": "Female",
        "hair": "Brown",
    },
    {
        "name": "Alex",
        "age": "23",
        "height": "185",
        "gender": "Male",
        "hair": "Black",
    },
    {
        "name": "Eden",
        "age": "25",
        "height": "169",
        "gender": "Female",
        "hair": "Black",
    }
  ]
}
var extract = feature.models.filter(x => x.age<25 && x.hair == "Black");
console.log(extract);