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

鸿蒙app 开发中 对于数组方法 filter 的理解

这段代码是 TypeScript 中数组 filter 方法的类型定义,下面将详细解释其各个部分的含义、作用及使用场景。

整体功能概述

filter 方法是 JavaScript 和 TypeScript 中数组对象的一个内置方法,它的主要功能是创建一个新数组,新数组中的元素是原数组中满足指定条件的所有元素。也就是说,它会遍历原数组,对每个元素执行你提供的测试函数,将通过测试的元素收集起来组成新数组并返回,而原数组不会被修改。

详细参数解释

1. predicate: (value: T, index: number, array: T[]) => unknown

  • predicate:这是一个必需的参数,它是一个回调函数,用于定义过滤元素的条件。在调用 filter 方法时,你需要传入这个回调函数,数组中的每个元素都会依次作为参数传递给这个回调函数进行条件判断。
    • value: T:表示当前正在处理的数组元素。T 是一个泛型类型,它代表数组中元素的类型。在实际使用时,TypeScript 会根据调用 filter 方法的数组的元素类型自动推断 T 的具体类型。例如,如果数组是 number[] 类型,那么 T 就是 number;如果数组是 string[] 类型,T 就是 string
    • index: number:表示当前元素在数组中的索引,索引从 0 开始计数。这个参数可以让你在回调函数中根据元素的位置进行一些额外的逻辑判断。例如,你可以只保留索引为偶数的元素。
    • array: T[]:表示调用 filter 方法的原始数组。通过这个参数,你可以在回调函数中访问整个数组,比如你可以根据数组的长度、其他元素的值等来判断当前元素是否满足条件。
    • => unknown:表示回调函数的返回值类型为 unknown。在实际使用中,这个回调函数通常会返回一个布尔值,true 表示该元素通过测试,会被包含在新数组中;false 则表示该元素不通过测试,会被过滤掉。这里使用 unknown 类型是为了让类型定义更加灵活,允许你返回其他类型的值,但在正常的 filter 操作中,应返回布尔值。
2. thisArg?: any

  • 这是一个可选参数,类型为 any。它的作用是指定回调函数内部 this 的值。在 JavaScript 中,函数内部的 this 指向会根据函数的调用方式而变化。使用 thisArg 参数可以明确指定回调函数内部 this 的指向。如果不提供这个参数,this 在回调函数内部通常会指向全局对象(在浏览器环境中是 window 对象),或者在严格模式下是 undefined。不过在实际使用中,由于箭头函数没有自己的 this,使用箭头函数作为回调时一般不需要使用 thisArg 参数。

返回值

filter 方法的返回值类型是 T[],表示返回一个元素类型为 T 的数组。这个新数组中的元素是原数组中所有通过 predicate 回调函数测试的元素。如果原数组中没有元素通过测试,返回的新数组将是一个空数组。

使用示例

基本使用:过滤数字数组

收起

typescript

const numbers: number[] = [1, 2, 3, 4, 5];
// 过滤出大于 3 的数字
const filteredNumbers = numbers.filter((value) => value > 3);
console.log(filteredNumbers); // 输出: [4, 5]
使用索引参数:过滤偶数索引的元素

收起

typescript

const letters: string[] = ['a', 'b', 'c', 'd', 'e'];
// 过滤出偶数索引的元素
const filteredLetters = letters.filter((_, index) => index % 2 === 0);
console.log(filteredLetters); // 输出: ['a', 'c', 'e']
使用 thisArg 参数

收起

typescript

const context = {threshold: 10
};
const values: number[] = [5, 12, 8, 15];
// 使用普通函数作为回调,并传入 thisArg
const filteredValues = values.filter(function (value) {return value > this.threshold;
}, context);
console.log(filteredValues); // 输出: [12, 15]

总结

filter 方法是一个非常实用的数组操作方法,通过泛型和回调函数,它可以灵活地处理各种类型的数组,根据你定义的条件过滤出符合要求的元素,同时可以通过 thisArg 参数控制回调函数内部 this 的指向。在实际开发中,常用于数据筛选、数据清洗等场景。

相关文章:

鸿蒙app 开发中 对于数组方法 filter 的理解

这段代码是 TypeScript 中数组 filter 方法的类型定义,下面将详细解释其各个部分的含义、作用及使用场景。 整体功能概述 filter 方法是 JavaScript 和 TypeScript 中数组对象的一个内置方法,它的主要功能是创建一个新数组,新数组中的元素是…...

黄金市场现状与驱动因素分析

一、当前市场现状:挤兑、运力与供应链危机 全球金库告急与运输瓶颈 伦敦商业银行金库的黄金存量告急,纽约和伦敦市场出现“史诗级挤兑”。提取英格兰银行金库的黄金需等待4-8周,远高于常规的几天时间[citation:用户描述]。专业运输车辆超负荷…...

Scrum方法论指导下的Deepseek R1医疗AI部署开发

一、引言 1.1 研究背景与意义 在当今数智化时代,软件开发方法论对于项目的成功实施起着举足轻重的作用。Scrum 作为一种广泛应用的敏捷开发方法论,以其迭代式开发、快速反馈和高效协作的特点,在软件开发领域占据了重要地位。自 20 世纪 90 …...

大学本科教务系统设计方案,涵盖需求分析、架构设计、核心模块和技术实现要点

以下是大学本科教务系统的设计方案,涵盖需求分析、架构设计、核心模块和技术实现要点: 大学本科教务系统设计方案 一、需求分析 1. 核心用户角色 角色功能需求学生选课/退课、成绩查询、课表查看、学分统计、考试报名、学业预警教师成绩录入、课程大纲上传、教学进度管理、…...

个人环境配置--安装记录

根据显卡下载对应的cuda和cudnn 我使用的是docker,首先拉取镜像,我用的是ubuntu20.04 加速:pull hub.1panel.dev/ devel是开发版本 sudo docker pull hub.1panel.dev/nvidia/cuda:11.6.1-devel-ubuntu20.04先测试一下cuda有没有安装好 nvcc -V更新,安装…...

win10把c盘docker虚拟硬盘映射迁移到别的磁盘

c盘空间本身就比较小、如果安装了docker服务后,安装的时候没选择其他硬盘,虚拟磁盘也在c盘会占用很大的空间,像我的就三十多个G,把它迁移到其他磁盘一下子节约几十G 1、先输入下面命令查看 docker 状态 wsl -l -v 2、如果没有停止…...

开源的 LLM 应用开发平台-Dify 部署和使用

加粗样式 Dify 简介 官网 http://difyai.com/ 生成式 AI 应用创新引擎 开源的 LLM 应用开发平台 Dify 为开发者提供了健全的应用模版和编排框架,你可以基于它们快速构建大型语言模型驱动的生成式 AI 应用,将创意变为现实,也可以随时按需无…...

PHP Libxml:深入解析XML解析库及其在PHP中的应用

PHP Libxml:深入解析XML解析库及其在PHP中的应用 引言 XML(可扩展标记语言)是一种用于存储和传输数据的标记语言,广泛应用于Web服务、数据交换等领域。PHP作为一种流行的服务器端脚本语言,提供了强大的XML处理能力。Libxml是PHP中用于处理XML数据的核心库,本文将深入解…...

libxls库的编译以及基于Visual studio的配置

最近有一个需求在windows处理xls,所以就需要libxls这个库,调查了一下,基于C的库的解析情况如下: 所以最理想的就是Libxlsd个开源的方案 基于历史整理的 libxls 在 MinGW 下的编译步骤 前提条件 系统:Windows&#…...

抗辐照加固CAN FD芯片的商业航天与车规级应用解析

在工业自动化、智能汽车、航空航天及国防装备等关键领域,数据传输的安全性、可靠性与极端环境适应能力是技术升级的核心挑战。国科安芯推出全新一代CANFD(Controller Area Network Flexible Data Rate)芯片,以高安全、高可靠、断电…...

Python教学-最常用的标准库之一——OS库

os 库是 Python 标准库中的一个模块,它提供了一种方便的方式来使用操作系统相关的功能。os 模块提供了很多函数,可以用来处理文件和目录、访问环境变量、执行系统命令等。以下是一些常用的 os 模块的功能和示例: 1. 文件和目录操作 1.1 当前…...

Ollama+Deepseek+AnythingLLM搭建本地知识库

OllamaDeepseek的配置可以参考OllamaDeepseekopen-webui搭建本地知识库-CSDN博客 一,AnythingLLM安装 AnythingLLM官网地址AnythingLLM | The all-in-one AI application for everyone 下载 win64 下载完毕后安装。 二,AnythingLLM 配置 新建工作区 …...

合并区间(56)

56. 合并区间 - 力扣&#xff08;LeetCode&#xff09; 解法&#xff1a; class Solution { public:vector<vector<int>> merge(vector<vector<int>>& intervals) {if (intervals.size() 1) {return intervals;}//现根据每一项的第一个值&#…...

再探动态规划--背包问题

背包问题常见类型&#xff1a; 动态规划问题核心就两个&#xff1a;状态转移方程和遍历顺序 如果求组合数就是外层for循环遍历物品&#xff0c;内层for遍历背包。如果求排列数就是外层for遍历背包&#xff0c;内层for循环遍历物品。 状态转移方程是动态规划问题中的核心&…...

Javascript使用Sodium库实现 aead_xchacha20poly1305_ietf加密解密,以及与后端的密文交互

Node.js环境安装 sodium-native (其他库可能会出现加密解密失败&#xff0c;如果要使用不一样的库&#xff0c;请自行验证) npm install sodium-native 示例代码&#xff0c;使用的是 sodium-native v4.3.2 (其他版本可能会有变化&#xff0c;如果要使用&#xff0c;请自行验…...

力扣-贪心-376 摆动序列

思路 记录前一个差值和后一个差值&#xff0c;需要分析很多情况 只有在发生波动的时候才更新差值——单调中有平坡前一个差值0时也更新差值——平坡留下最左边元素最后一个元素不记录.默认从最后一个有坡度 代码 class Solution { public:int wiggleMaxLength(vector<in…...

什么是“可迭代”

在 Python 中&#xff0c;“可迭代”&#xff08;Iterable&#xff09;是一个非常重要的概念&#xff0c;它指的是任何可以被逐个访问其元素的对象。换句话说&#xff0c;如果一个对象支持迭代操作&#xff08;比如可以通过 for 循环逐个访问其元素&#xff09;&#xff0c;那么…...

【算法与数据结构】单调队列

目录 单调队列 使用单调队列维护滑动窗口 具体过程&#xff1a; 代码实现&#xff1a; 复杂度分析&#xff1a; 使用单调队列优化动态规划 例题 单调队列 单调队列(deque)是一种特殊的队列&#xff0c;队列中的元素始终按严格递增或者递减排列。这样就可以保证队头元素…...

Mysql-------事务

事务 一、事务 &#xff08;一&#xff09;什么是事务&#xff1a; MySQL数据库事务&#xff1a;&#xff08;database transaction&#xff09;: 事务是由一组SQL语句组成的逻辑处理单元&#xff0c;这些操作要么全做要么全不做&#xff0c;是一个不可分割的工作单位。 ※…...

【Java进阶学习 第五篇】JDK8、9中的接口新特性

接口新特性 可以提升代码的复用性&#xff0c;减少冗余 JDK8中接口的新特性主要可以允许调用默认方法和静态方法&#xff1b;JDK9中接口的新特性为可以运行调用私有方法供本类方法使用 JDK8新特性 接口中可以定义有方法体的方法&#xff08;默认或静态&#xff09; 允许调用…...

TypeScript学习:初学

安装等配置指令 安装TypeScript npm i typescript -g 检查版本 tsc -v npx tsc -v 运行ts文件及js文件 npx tsc 文件名.ts node 文件名.js 安装ts-node脚手架 npm i ts-node -g 检查脚手架版本 npx ts-node -v 初始化ts状态 npx tsc -- init 使用脚手架运行ts文件…...

基于Martin的全国基础底图实现

概述 前面有文章基于Martin实现MapboxGL自定义底图分享了Martin的使用&#xff0c;本文使用网络收集的数据实现了全国基础数据的收集和基础底图。 实现后效果 实现 1. 数据准备 实例中包含如下数据&#xff1a; 边界线和九段线数据省边界面数据省会城市点数据市边界面数据…...

网络安全:防范NetBIOS漏洞的攻击

稍微懂点电脑知识的朋友都知道&#xff0c;NetBIOS 是计算机局域网领域流行的一种传输方式&#xff0c;但你是否还知道&#xff0c;对于连接互联网的机器来讲&#xff0c;NetBIOS是一大隐患。 漏洞描述 NetBIOS(Network Basic Input Output System&#xff0c;网络基本输入输…...

一周学会Flask3 Python Web开发-客户端状态信息Cookie以及加密

锋哥原创的Flask3 Python Web开发 Flask3视频教程&#xff1a; 2025版 Flask3 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili HTTP是无状态&#xff08;stateless)协议。也就是说&#xff0c;在一次请求响应结束后&#xff0c;服务器不会留下任何关于对…...

机器学习面试八股文——决战金三银四

大家好&#xff0c;这里是好评笔记&#xff0c;公主 号&#xff1a;Goodnote&#xff0c;专栏文章私信限时Free。本笔记的任务是解读机器学习实践/面试过程中可能会用到的知识点&#xff0c;内容通俗易懂&#xff0c;入门、实习和校招轻松搞定。 公主号合集地址 点击进入优惠地…...

Visual studio 2022 将打开文件的方式由单击改为双击

1. 打开vs2022&#xff0c;选择Tools -> Options打开Options设置页面 2. 在左侧依次展开Environment, 选择Tabs and Windows 3. 在右侧面板往下拖拽滚动条&#xff0c;找到Preview Tab section, unchecked "Preview selected files in Solution Explorer (Altclick t…...

【Akashic Records】THE EGG

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: Akashic Records 文章目录 &#x1f4af;观后感一、宇宙的孤寂与个人成长&#xff1a;二、选择与责任&#xff1a;三、灵性与世界的连接&#xff1a;四、选择如何改变命运&#xff1a;结语&#xff1a; &#x1f4af;…...

Tio-Boot 集成 Spring Boot 实现即时通讯功能全解析

Tio-Boot 集成 Spring Boot 实现即时通讯功能全解析&#xff08;详细版&#xff09; 一、Tio-Boot 简介 Tio-Boot 是基于 Tio 框架的 Spring Boot Starter 扩展&#xff0c;提供高性能、低延迟的网络通信能力&#xff0c;支持 TCP/UDP 协议及 WebSocket 协议&#xff0c;适用…...

从零开始用react + tailwindcs + express + mongodb实现一个聊天程序(一)

项目包含5个模块 1.首页 (聊天主页) 2.注册 3.登录 4.个人资料 5.设置主题 一、配置开发环境 建立项目文件夹 mkdir chat-project cd chat-project mkdir server && mkdir webcd server npm init cd web npm create vitelatest 创建前端项目时我们选择javascrip…...

ant design 疑惑记录 Dropdown.Button

onMenuClick是点击展开的 子项的点击事件 Actions的点击事件是什么&#xff1f; 解答&#xff1a; 也是个按钮Button&#xff0c;也有自己的onClick事件 const onMenuClick (e) > {console.log(click, e); }; const otherClick (e) > {console.log(其他操作主按钮…...