当前位置: 首页 > news >正文

JavaScript 中的数组过滤

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

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

在本文中,您将学习如何使用两种主要方法在 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() 方法来过滤对象。

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

相关文章:

JavaScript 中的数组过滤

在构建动态和交互式程序时&#xff0c;您可能需要添加一些交互式功能。例如&#xff0c;用户单击按钮以筛选一长串项目。 您可能还需要处理大量数据&#xff0c;以仅返回与指定条件匹配的项目。 在本文中&#xff0c;您将学习如何使用两种主要方法在 JavaScript 中过滤数组。…...

随机森林(Random Forest)

随机森林&#xff08;Random Forest&#xff09;是一种集成学习方法&#xff0c;通过组合多个决策树来提高模型的性能和鲁棒性。随机森林在每个决策树的训练过程中引入了随机性&#xff0c;包括对样本和特征的随机选择&#xff0c;以提高模型的泛化能力。以下是随机森林的基本原…...

本地引入Element UI后导致图标显示异常

引入方式 npm 安装 推荐使用 npm 的方式安装&#xff0c;它能更好地和 webpack 打包工具配合使用。 npm i element-ui -SCDN 目前可以通过 unpkg.com/element-ui 获取到最新版本的资源&#xff0c;在页面上引入 js 和 css 文件即可开始使用。 <!-- 引入样式 --> <…...

UE5.1_UMG序列帧动画制作

UE5.1_UMG序列帧动画制作 UMG序列帧动画制作相对比较简单&#xff0c;不像视频帧需要创建媒体播放器那么复杂&#xff0c;以下简要说明&#xff1a; 1. 事件函数 2. 准备序列帧装入数组 3. 构造调用事件函数 4. 预览 序列帧UMG0105 5. 完成&#xff01;按需配置即可。...

总结HarmonyOS的技术特点

HarmonyOS是华为自主研发的面向全场景的分布式操作系统。它的技术特点主要体现在以下几个方面&#xff1a; 分布式架构&#xff1a;HarmonyOS采用了分布式架构设计&#xff0c;通过组件化和小型化等方法&#xff0c;支持多种终端设备按需弹性部署&#xff0c;能够适配不同类别的…...

从0到1入门C++编程——04 类和对象之封装、构造函数、析构函数、this指针、友元

文章目录 一、封装二、项目文件拆分三、构造函数和析构函数1.构造函数的分类及调用2.拷贝函数调用时机3.构造函数调用规则4.深拷贝与浅拷贝5.初始化列表6.类对象作为类成员7.静态成员 四、C对象模型和this指针1.类的对象大小计算2.this指针3.空指针访问成员函数4.const修饰成员…...

Robot Operating System 2: Design, Architecture, and Uses In The Wild

Robot Operating System 2: Design, Architecture, and Uses In The Wild (机器人操作系统 2&#xff1a;设计、架构和实际应用) 摘要&#xff1a;随着机器人在广泛的商业用例中的部署&#xff0c;机器人革命的下一章正在顺利进行。即使在无数的应用程序和环境中&#xff0c;也…...

TinyEngine 服务端正式开源啦!!!

背景介绍 TinyEngine 低代码引擎介绍 随着企业对于低代码开发平台的需求日益增长&#xff0c;急需一个通用的解决方案来满足各种低代码平台的开发需求。正是在这种情况下&#xff0c;低代码引擎应运而生。它是一种通用的开发框架&#xff0c;通过对低代码平台系统常用的功能进…...

网页设计与制作web前端设计html+css+js成品。电脑网站制作代开发。vscodeDrea 【企业公司宣传网站(HTML静态网页项目实战)附源码】

网页设计与制作web前端设计htmlcssjs成品。电脑网站制作代开发。vscodeDrea 【企业公司宣传网站&#xff08;HTML静态网页项目实战&#xff09;附源码】 https://www.bilibili.com/video/BV1Hp4y1o7RY/?share_sourcecopy_web&vd_sourced43766e8ddfffd1f1a1165a3e72d7605...

Avalonia学习(二十)-登录界面演示

今天开始继续Avalonia练习。 本节&#xff1a;演示实现登录界面 在网上看见一个博客&#xff0c;展示Avalonia实现&#xff0c;仿照GGTalk&#xff0c;我实现了一下&#xff0c;感觉是可以的。将测试的数据代码效果写下来。主要是样式使用&#xff0c;图片加载方式。 只有前…...

Spring依赖注入的魔法:深入DI的实现原理【beans 五】

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 Spring依赖注入的魔法&#xff1a;深入DI的实现原理【beans 五】 前言DI的基本概念基本概念&#xff1a;为什么使用依赖注入&#xff1a; 构造器注入构造器注入的基本概念&#xff1a;示例&#xff1a…...

【学习笔记】1、数字逻辑概论

1.1 数字信号 数字信号&#xff0c;在时间和数值上均是离散的。数字信号的表达方式&#xff1a;二值数字逻辑和逻辑电平描述的数字波形。 &#xff08;1&#xff09; 数字波形的两种类型 数值信号又称为“二值信号”。数字波形又称为“二值位形图”。 什么是一拍 一定的时…...

设置代理IP地址对网络有什么影响?爬虫代理IP主要有哪些作用?

在互联网的广泛应用下&#xff0c;代理IP地址成为了一种常见的网络技术。代理IP地址可以改变用户的上网行为&#xff0c;进而影响网络访问的速度和安全性。本篇文章将探讨设置代理IP地址对网络的影响&#xff0c;以及爬虫代理IP的主要作用。 首先&#xff0c;让我们来了解一下代…...

聊聊jvm的mapped buffer的统计

序 本文主要研究一下jvm的mapped buffer的统计 示例 private void writeDirectBuffer() {// 分配一个256MB的直接缓冲区ByteBuffer buffer ByteBuffer.allocateDirect(256 * 1024 * 1024);// 填充数据Random random new Random();while (buffer.remaining() > 4) {buff…...

matrix-breakout-2-morpheus 靶场 练习思路

arp-scan -l 获取目标机器的IP nmap -sV -A IP 查看目标机器开放的端口 gobuster dir -u http://192.168.29.130 -x php,txt,jsp,asp -w /usr/share/wordlists/dirbuster/directory-list-2.3-medium.txt 爆破目标机器的文件目录,找到可以访问的文件路径 http://192.168…...

【Flutter 开发实战】Dart 基础篇:从了解背景开始

想要学会用 Flutter 开发 App&#xff0c;就不可避免的要学习另一门很有意思的编程语言 —— Dart。很多小伙伴可能在学习 Flutter 之前可能都没听说过这门编程语言&#xff0c;我也是一样&#xff0c;还以为 Dart 是为了 Flutter 而诞生的&#xff1b;然而&#xff0c;当我们去…...

西电期末1017.有序序列插值

一.题目 二.分析与思路 简单题。主要考察简单的排序&#xff0c;最后的插入数据同样不用具体实现&#xff0c;只需在输出时多输出一下即可&#xff0c;注意顺序&#xff01;&#xff01; 三.代码实现 #include<bits/stdc.h>//万能头 int main() {int n;scanf("%d…...

day10 用栈实现队列 用队列实现栈

题目1&#xff1a;232 用栈实现队列 题目链接&#xff1a;232 用栈实现队列 题意 用两个栈实现先入先出队列&#xff08;一个入栈&#xff0c;一个出栈&#xff09;&#xff0c;实现如下功能&#xff1a; 1&#xff09;push&#xff1a;将元素x推到队列末尾 2&#xff09;…...

解决跨域问题(SpringBoot)

“什么是跨域&#xff1f;” 跨域 &#xff08;Cross-Origin&#xff09; 是指在浏览器的同源策略&#xff08;Same-Origin Policy&#xff09;下&#xff0c;一个网页的源&#xff08;指协议、域名、端口号的组合&#xff09;与另一个网页的源不同。因此&#xff0c;不同源的…...

LeetCode——2487. 从链表中移除节点

通过万岁&#xff01;&#xff01;&#xff01; 题目&#xff1a;给你一个链表&#xff0c;然后让你从链表中移除一些节点&#xff0c;移除的规则就是我们选择的这个节点在原链表中往右不能有比这个节点大的值。思路&#xff1a;这个题我最开始以为是双指针&#xff0c;然后找…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

HashMap中的put方法执行流程(流程图)

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

MinIO Docker 部署:仅开放一个端口

MinIO Docker 部署:仅开放一个端口 在实际的服务器部署中,出于安全和管理的考虑,我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务,支持 Docker 部署,但默认情况下它需要两个端口:一个是 API 端口(用于存储和访问数据),另一个是控制台端口(用于管理界面…...

elementUI点击浏览table所选行数据查看文档

项目场景&#xff1a; table按照要求特定的数据变成按钮可以点击 解决方案&#xff1a; <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...

从零手写Java版本的LSM Tree (一):LSM Tree 概述

&#x1f525; 推荐一个高质量的Java LSM Tree开源项目&#xff01; https://github.com/brianxiadong/java-lsm-tree java-lsm-tree 是一个从零实现的Log-Structured Merge Tree&#xff0c;专为高并发写入场景设计。 核心亮点&#xff1a; ⚡ 极致性能&#xff1a;写入速度超…...

GeoServer发布PostgreSQL图层后WFS查询无主键字段

在使用 GeoServer&#xff08;版本 2.22.2&#xff09; 发布 PostgreSQL&#xff08;PostGIS&#xff09;中的表为地图服务时&#xff0c;常常会遇到一个小问题&#xff1a; WFS 查询中&#xff0c;主键字段&#xff08;如 id&#xff09;莫名其妙地消失了&#xff01; 即使你在…...

基于Uniapp的HarmonyOS 5.0体育应用开发攻略

一、技术架构设计 1.混合开发框架选型 &#xff08;1&#xff09;使用Uniapp 3.8版本支持ArkTS编译 &#xff08;2&#xff09;通过uni-harmony插件调用原生能力 &#xff08;3&#xff09;分层架构设计&#xff1a; graph TDA[UI层] -->|Vue语法| B(Uniapp框架)B --&g…...