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

news2025/2/23 13:12:10

这段代码是 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 的指向。在实际开发中,常用于数据筛选、数据清洗等场景。

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

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

相关文章

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

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

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

根据显卡下载对应的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 应用,将创意变为现实,也可以随时按需无…

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

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

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

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

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

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

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

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

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

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

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

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

Mysql-------事务

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

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

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

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

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

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

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

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

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

【Akashic Records】THE EGG

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

从零开始用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的点击事件是什么? 解答: 也是个按钮Button,也有自己的onClick事件 const onMenuClick (e) > {console.log(click, e); }; const otherClick (e) > {console.log(其他操作主按钮…

SAP on Microsoft Azure Architecture and Administration (Ravi Kashyap)

SAP on Microsoft Azure Architecture and Administration (Ravi Kashyap)

Missing required prop: “maxlength“

背景&#xff1a; 封装一个使用功能相同使用频率较高的input公共组件作为子组件&#xff0c;大多数长度要求为200&#xff0c;且实时显示统计子数&#xff0c;部分input有输入提示。 代码实现如下&#xff1a; <template><el-input v-model"inputValue" t…