ts:数组的常用方法(filter)
- 一、主要内容说明
- 二、例子
- filter方法(过滤)
- 1.源码1 (push方法)
- 2.源码1运行效果
- 三、结语
- 四、定位日期
一、主要内容说明
ts中数组的filter方法,是筛选数组中符合我们设置条件的元素,筛选出来的元素组成一个新数组,原数组结构未发生改变。和map方法和forEach方法不同的是,filter方法为筛选出符合我们设置要求的元素,而map方法和forEach方法是遍历数组元素对元素进行函数改变。当然map和forEach方法也可以做到和filter一样的筛选效果,如在forEeach方法函数逻辑里添加if逻辑,便可输出指定范围条件的元素,呈现过滤筛选的效果,上篇博文便有此例,可以按需求往回查看学习。
filter方法也可接受三个参数,如下
let strs:string[]=["元素1","元素2","元素3","元素4"];
let str_2=str.filter(A,B,C);A----数组元素内容B----数组的索引(可不设置)C----数组的命名(可不设置)
我们通常是选择数组的A具体元素进行函数变化。B索引和C命名按需求创建便可。
filter()方法扩号里添加箭头函数,若为对象需要return返回。如
nums.filter((nums_id) => {return nums_id > 700; });
----对象一类
等同于
nums.filter((nums_id) => nums_id > 700;)
-----逻辑一类
二、例子
filter方法(过滤)
源码1,举有两例。例1是筛选大于700的数字。例2是筛选年龄在 20 到 30 岁之间且身高超过 160 cm 的人员。interface接口,可创建一个自定义类,然后使用这个自定义的类,对数组进行过滤和筛选。
1.源码1 (push方法)
// 定义一个数字数组
let nums: number[] = [764, 3, 765, 7, 766, 9, 767, 768];// 使用 filter 筛选大于 700 的数字
let num_1 = nums.filter((nums_id) => {return nums_id > 700; // 返回每个元素是否大于 700 的布尔值
});console.log(num_1); // 输出筛选结果:大于 700 的数字
console.log("原数组:\n" + nums); // 输出原数组console.log("\n分隔行-------------------------\n")// 定义一个消息接口
interface Message {name: string; // 姓名age: number; // 年龄height: number; // 身高
}// 定义一个消息对象数组
let peoples: Message[] = [{ name: "小黄", age: 28, height: 168 },{ name: "小八", age: 20, height: 155 },{ name: "月儿", age: 25, height: 140 },{ name: "小红", age: 22, height: 162 },{ name: "小蓝", age: 30, height: 170 }
];// 筛选年龄在 20 到 30 岁之间且身高超过 160 cm 的人员
let mes = peoples.filter(person => {return person.age >= 20 && person.age <= 30 && person.height > 160; // 返回符合条件的人员
});// 输出筛选后的人员信息
console.log(mes);
2.源码1运行效果
三、结语
数组的方法还有许多,若能融会贯通,可以在某一种方法的基础上添加一些条件,便能够达到其他方法的效果。通过几个方法的学习,其实数组方法可选择的参数都是类似的,极个别不同而已。如前面的这几个数组方法,都接受三个参数,元素、索引、数组本身命名。
后面需要更改一下编写内容,一直编写数组的方法个人有点受不了了。更换点其他ts内容,如什么是重载啊,for循环嵌套啊,字符索引啊都行。至于数组的其他方法,等缓过劲来再编写。^ . ^
由于笔者的能力有限,创作的内容有所不足在所难免,也敬请读者包涵和指出,万分感谢!
四、定位日期
2024-10-27;
18:03;