ts-万能过滤器

周末懒惰了两天,滚回来继续做笔记。
今天更新的是ts的万能过滤器。 (注:师父说理解了ts的类型之后,可以更好的理解js,所以一些基础练习都用ts来做。)
上一篇笔记里提到了单数选择器、双数选择器、单双数选择器以及倍数选择器。

那么,是不是有一种选择器可以万能选择呢?
也就是说,可以通过用户自定义的条件,来筛选想要的内容呢?

引入一段TypeScript 泛型 的概念:

我们需要一种方法使返回值的类型与传入参数的类型是相同的。 这里,我们使用了 类型变量,它是一种特殊的变量,只用于表示类型而不是值。

function identity<T>(arg: T): T {
   return arg;
}

我们给identity添加了类型变量T。 T帮助我们捕获用户传入的类型(比如:number),之后我们就可以使用这个类型。 之后我们再次使用了 T当做返回值类型。现在我们可以知道参数类型与返回值类型是相同的了。 这允许我们跟踪函数里使用的类型的信息。

我们把这个版本的identity函数叫做泛型,因为它可以适用于多个类型。 不同于使用 any,它不会丢失信息,像第一个例子那像保持准确性,传入数值类型并返回数值类型。

大概的意思,想传入什么类型就可以输出什么类型。(可能有误,欢迎更正。)
于是,万能选择器就是这样子的:

const arr = [1, 2, 3, 4, 5, 6, 7, 8];

function superFilter<T>(condition: (i: T) => boolean, arr: T[]): T[] {
    const filterArr = [] as T[];
    for (const i of arr) {
        if (condition(i)) {
            filterArr.push(i);
        }
    }
    return filterArr;
}

console.log(superFilter(i=>i%3==0,arr));
//条件为3的倍数,所以输出[3,6]

我们可以传入一个自己定义的condition,然后转换为一个布尔值。

(i: any) => boolean

这个就是函数签名里的类型。


js自带的过滤器filter可以直接实现这个功能。

console.log(arr.filter(i=>i%3==0));

待续内容:
  • 多属性排序
posted @ 2018-07-15 22:59  DebraJohn  阅读(325)  评论(0编辑  收藏  举报