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 公约发布

 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐