JavaScript 中的数组过滤

news2024/11/28 4:27:32

在构建动态和交互式程序时,您可能需要添加一些交互式功能。例如,用户单击按钮以筛选一长串项目。

您可能还需要处理大量数据,以仅返回与指定条件匹配的项目。

在本文中,您将学习如何使用两种主要方法在 JavaScript 中过滤数组。您还将学习如何过滤对象数组并返回过滤元素的新数组。

使用for loop过滤

推出 ES6 之前,许多开发人员依靠 for 循环方法来处理几乎所有的数组操作。但是代码可能会变得很长并且不容易理解,这导致了许多单独的 JavaScript 方法的发布,例如filter()该方法(您很快就会了解)。

但首先,为了完整起见,我们将看看如何使用 for 循环来做到这一点。

假设您有一个对象数组,其中包含用户的详细信息,例如姓名、年龄和职业。您可以决定筛选年龄与特定条件匹配的用户。

let users = [
    { name: 'John', age: 25, occupation: 'gardener' },
    { name: 'Lenny', age: 51, occupation: 'programmer' },
    { name: 'Andrew', age: 43, occupation: 'teacher' },
    { name: 'Peter', age: 81, occupation: 'teacher' },
    { name: 'Anna', age: 47, occupation: 'programmer' },
    { name: 'Albert', age: 76, occupation: 'programmer' },
]

现在,您可以使用年龄过滤对象数组,以返回一个age大于40且occupation等于programmer:

let filteredUsers = [];
for (let i= 0; i<users.length; i++) {
    if (users[i].age > 40 && users[i].occupation === 'programmer' ) {
        filteredUsers = [...filteredUsers, users[i]];
    }
}
console.log(filteredUsers);

这将返回一个包含三个满足指定条件的用户的数组。

s_A2A56A7C05733A13745945CF4C6950EBC758CD93042A33CBFFD44710AB9E7883_1676527392206_image

完美输出。但是过滤数组的更好方法是使用 ES6 filter() 方法。

如何使用filter()方法筛选数组

该方法是一种 ES6 方法,它提供了一种更简洁的语法来筛选数组。它返回新数组中的新元素,而不更改原始数组。filter()

// Syntax
myArray.filter(callbackFn)

在回调函数中,您可以访问每个元素、 和原始数组本身:index

myArray.filter((element, index, array) => { /* ... */ })

现在,让我们执行相同的示例,通过按用户的ageoccupation过滤用户:

let filteredUsers = users.filter((user) => {
    return user.age > 40 && user.occupation === 'programmer';
});

console.log(filteredUsers);

这将返回确切的输出,但您会注意到您的代码非常干净。同样重要的是要知道,你可以用一行代码重写上面的代码,并去掉return语句:

let filteredUsers = users.filter(user => user.age > 40 && user.occupation === 'programmer');
console.log(filteredUsers);

两个代码块都将输出过滤后的用户:

s_A2A56A7C05733A13745945CF4C6950EBC758CD93042A33CBFFD44710AB9E7883_1676527392206_image

filter 方法可以很容易地直接执行更多操作,而无需创建尽可能多的变量,因为它非常适合与其他函数方法链接。

例如,您可以对过滤后的数组进行排序,并返回仅包含其名称的数组:

let filteredUserNames = users.filter(user => user.age > 40 && user.occupation === 'programmer')
    .sort((a, b) => a.age - b.age)
    .map(user => user.name);

console.log(filteredUserNames); // ['Anna', 'Lenny', 'Albert'

使用 JavaScript filter() 方法在 JavaScript 中过滤数组还有更多功能。

如何在 JavaScript 中过滤对象

JavaScript 的对象不像数组或字符串那样可迭代(你不能遍历它们)。这意味着您不能直接在对象上使用 for 循环方法或任何迭代方法。那么如何在 JavaScript 中过滤对象呢?filter()

为此,可以使用任何对象静态方法(如Object.keys()Object.values())将对象转换为数组。然后,您可以使用 filter() 方法过滤数组并返回过滤元素的新数组。​​​​​​​Object.entries()

假设您有一个对象,其中包含用户的详细信息,例如姓名、年龄和职业。这些对象静态方法可以将键、值或每个键值对作为数组返回。

const userDetails = {
    firstName: "Jane",
    lastName: "Daniels",
    userName: "jane.daniels",
    email: "jane.daniels@example.com",
    comapny: "Example Inc.",
    address: "1234 Example Street",
    age : 25,
    hobby: "Singing"
};

let keysArray = Object.keys(userDetails);

console.log(keysArray);

这将返回一个对象键数组:

['firstName', 'lastName', 'userName', 'email', 'comapny', 'address', 'age', 'hobby']

您现在可以使用 filter() 方法过滤数组并返回一个新的过滤元素数组:

let filteredKeys = keysArray.filter(key => key.length > 5);

console.log(filteredKeys);

这将返回一个长度大于 5 的键数组:

['firstName', 'lastName', 'userName', 'comapny', 'address', 'hobby']

但可以肯定的是,您将需要执行更有用的过滤器操作。例如reduce(),您可以筛选包含大型对象名称的对象键值对。然后,您可以首先获取键,筛选它们,并使用该方法将筛选的键添加到具有筛选键及其值的对象:​​​​​​​

const userDetails = {
    firstName: "Jane",
    lastName: "Daniels",
    userName: "jane.daniels",
    email: "jane.daniels@example.com",
    comapny: "Example Inc.",
    address: "1234 Example Street",
    age : 25,
    hobby: "Singing"
};

const userNames = Object.keys(userDetails)
    .filter((key) => key.includes("Name"))
    .reduce((object, key) => {
        return Object.assign(object, {
          [key]: userDetails[key]
        });
  }, {});

console.log(userNames);

这将返回一个对象,其中包含筛选的键及其值:

{
    firstName: "Jane",
    lastName: "Daniels",
    userName: "jane.daniels"
}

结束语

在本文中,您学习了如何使用for循环和filter()方法在 JavaScript 中过滤数组。 ​​​​​​​​​​​​​​filter()为在 JavaScript 中过滤数组提供了更好的语法。

您还学习了如何在 JavaScript 中通过将对象转换为数组并使用 filter() 方法来过滤对象。

感谢您的阅读!实际中还有许多其他的用法,等待你探索!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1365528.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

4.2V线性500mA充电管理芯片WT4054

4.2V线性500mA充电管理芯片WT4054 WT4054&#xff0c;一款强大而小巧的锂电池充电IC&#xff0c;为你的便携式设备提供无忧充电。其SOT-23-5L封装小巧轻便&#xff0c;所占空间极小&#xff0c;而其强大的功能将为你的设备提供稳定、高效的电量供应。 这款充电器拥有众多令人惊…

第二证券:交易商协会优化 债券持有人集体行动机制

1月2日&#xff0c;交易商协会称&#xff0c;为更好发挥持有人集体行动机制在债券风险及违约处置中的重要作用&#xff0c;交易商协会组织商场成员修订了《银行间债券商场非金融企业债务融资东西持有人会议规程》《银行间债券商场非金融企业债务融资东西附和收集操作指引》&…

汪林望教授将于每周三以互动问答直播形式教您如何用龙讯旷腾计算软件PWmat计算不同材料性质

打开VX→搜索“汪林望计算讲座”&#xff0c;关注汪老师的频道&#xff0c;每周三下午16:00我们准时直播&#xff01; 大家提前准备好问题&#xff0c;可直接提问讨论&#xff0c;当面请教 汪林望教授 中科院半导体所首席科学家 北京龙讯旷腾科技有限公司创始人 美国劳伦斯…

Linux下配置静态ip地址

问题&#xff1a;虚拟机重启后ip地址动态更新&#xff0c;导致连shell十分麻烦 解决&#xff1a; 1. 进入配置文件 vi /etc/sysconfig/network-scripts/ifcfg-ens33 2.1 修改配置 BOOTPROTOstatic ONBOOTyes2.2 新增配置 #ip地址(自定义) IPADDR192.168.149.131 #子网掩码 …

C++入门教程,C++基础教程(第一部分:从C到C++)七

由C语言发展而来的一种面向对象的编程语言。 第一部分、从C语言到C 本章讲述 C 语言的简史&#xff0c;以及 C 语言中与面向对象关系不大、C语言中没有的特性。这些特性能够增加编程的便利性&#xff0c;提高程序的可扩充性。 十三、如何规范地使用C内联函数 inline 关键字…

Marching Cubes算法再回顾

1,确定包含等值面的体元 首先介绍一下 体元的概念&#xff0c;体元是三维图像中由相邻的八个体素点组成的正方体方格&#xff0c;英语也叫 Cube&#xff0c;体元中角点函数值分为两种情况&#xff0c;一种是大于等于给定等值面的值 C0 ,则将角点设为 1 称该角点在等值面内部&a…

在线数字文档签名平台DocuSeal

什么是 DocuSeal &#xff1f; DocuSeal 是一个开源平台&#xff0c;提供安全高效的数字文档签名和处理。允许你创建、填写和签署数字文档✍️&#xff0c;易于使用、并针对移动设备做了优化&#xff0c;是 DocuSign 的开源替代方案。可以将 DocuSeal 与您的产品无缝集成&#…

芯课堂 | LVGL基础知识(四)

概述 LVGL按钮是简单的矩形对象。它们源自容器&#xff0c;因此也可以提供布局和配合。此外&#xff0c;可以启用它以在单击时自动进入检查状态。 LVGL按钮讲解 零件和样式 这些按钮仅具有一种主要样式&#xff0c;称为 LV_BTN_PART_MAIN &#xff0c;并且可以使用以下组中的…

centos 8.0 安装sysbench 1.0.17

序号步骤说明执行命令执行结果备注1 下载并解压sysbench-1.0.17.zip sysbench-1.0.17.zip2安装依赖文件 yum install automake libtool -y yum install /usr/include/libpq-fe.h 3安装sysbench cd sysbench-1.0.17 ./autogen.sh ./configure \ --prefix/sysbench \ --with-pgsq…

【骨灰级玩家】MySQL高手过招

MySQL自带数据库 自带数据库介绍 mysql 有四个自带的数据库&#xff1a;mysql、information_schema、performance_schema、sys mysql 创建数据库 要在MySQL中创建数据库&#xff0c;可以使用CREATE DATABASE语句。 示例查询如下所示&#xff1a; CREATE DATABASE database…

vue权限管理详解(如果控制到按钮级别的权限怎么做)

文章目录 一、是什么二、如何做接口权限路由权限控制方案一方案二 菜单权限方案一方案二 按钮权限方案一方案二 小结 一、是什么 权限是对特定资源的访问许可&#xff0c;所谓权限控制&#xff0c;也就是确保用户只能访问到被分配的资源 而前端权限归根结底是请求的发起权&am…

Flutter 监听前台和后台切换的状态

一 前后台的切换状态监听 混入 WidgetsBindingObserver 这个类&#xff0c;这里提供提供了程序状态的一些监听 二 添加监听和销毁监听 overridevoid initState() {super.initState();//2.页面初始化的时候&#xff0c;添加一个状态的监听者WidgetsBinding.instance.addObserver…

学生备考护眼灯哪个牌子好性价比高?2024最新台灯分享

现在越来越多90后家长有了孩子&#xff0c;而年轻家长也更加重视孩子们的成长健康&#xff0c;特别是小孩子的近视率越来越高&#xff0c;家长们就会选择护眼台灯来为孩子的视力保驾护航。但很多家长在选购时&#xff0c;面对各式各样的台灯却又陷入迷茫&#xff0c;究竟该怎么…

<软考高项备考>《论文专题 - 53 进度管理(4) 》

6 过程5-制定进度计划 6.1 问题 4W1H过程做什么分析活动顺序、持续时间、资源需求和进度制约因素&#xff0c;创建进度模型&#xff0c;从而落实项目执行和监控的过程作用&#xff1a;为完成项目活动而制定具有计划日期的进度模型为什么做为项目制定衡量项目的进度标尺谁来做…

加工制造EUV极紫外光刻机的钼/硅反射镜的方法与技术

EUV光刻机使用的反射镜材质是具有极高精度的钼/硅反射镜。这是因为几乎所有材料对13.5nm的EUV都强烈吸收&#xff0c;故EUV光刻机不能采用DUV那样的透镜&#xff0c;只能采用反射式光学系统。又因为EUV波长与晶格参数接近&#xff0c;很容易发生衍射&#xff0c;反射率也很低&a…

Qt优秀开源项目之二十:RedPanda-CPP(小熊猫C++)

小熊猫C是跨平台、轻量易用的开源C/C集成开发环境。 官网&#xff1a;http://royqh.net/redpandacpp github&#xff1a;https://github.com/royqh1979/RedPanda-CPP 小熊猫C&#xff08;原名小熊猫Dev-C 7)是基于Qt开发的Dev-C替代版本。和经典的Dev-C 5.11、新的Embarcadero …

自定义监听,注册动态接口

1. 背景 前文&#xff08; SpringBoot中动态注册接口-CSDN博客&#xff09;已经示例说明了如何动态向springboot中注册接口&#xff0c;并将接口信息入库。但是&#xff0c;当服务重启后&#xff0c;这些接口便不存在了。此时我们需要在容器启动后重新注册。因而&#xff0c;我…

Windows下中文字符的UTF和GBK之间的转换,插入和读取MySQL

1、创建数据表 //测试UTF-8格式 指定字段name的字符集为utf8 COLLATE字符集的排序方式sql "CREATE TABLE IF NOT EXISTS t_utf8 \(id INT AUTO_INCREMENT , \name VARCHAR(1024) CHARACTER SET utf8 COLLATE utf8_bin,\PRIMARY KEY(id))"; 2、 指定与mysql处理的…

多级缓存、OpenResty缓存、Redis分布式缓存、进程缓存

目录标题 一、预期表现二、环境配置1、nginx环境2、OpenResty环境3、redis环境3.1 安装redis3.2 配置启动命令3.3 配置主从3.4 哨兵 4、进程缓存环境 三 、主要编码工作3.1、缓存主要问题解决3.1.1 缓存穿透3.1.2 缓存雪崩3.1.3 缓存击穿 3.2、OpenResty编码3.2.1 openresty/ng…

【算法Hot100系列】下一个排列

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…