在JavaScript 中根据属性过滤对象数组

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

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

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

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

目录

1.JavaScript中基于过滤对象数的通用返回调函数

2.在JavaScript中使用箭头数据根据属性过滤对象数据组

---

1.JavaScript中基于过滤对象数的通用返回调函数

该演示将初始化一个具有多个属性（也称为key-value对）的数组。策略是先访问对象，再访问数组。

接下来，我们将获取一个属性并对其应用条件。当我们使用该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);

 输出：

 

 

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

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

2.在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);

输出： 

 

 

根据上面的代码，用箭头函数的filter方式过滤出需要的结果，就更加清晰了。

这个过程只需要一个变量（这里x）来指出属性。此外，这种编码风格用于缩短代码并由最新的 ES6 公约发布