查看原文
其他

请用 TS 写出 20 个数组方法的声明

作者:蚂小蚁

https://juejin.cn/post/7216994437246844985

前言

前段时间看直播驳斥”前端已死论“,前端死没死不知道,反正前端是拿不到以前那么多工资了;好,进入正题,在直播间提到要求前端写出20个数组上的方法,这确实不太简单,但是只写出方法没有什么意义,我们今天来写20个数组方法的声明;这要求我们对于每一个方法的每一个参数用法都了解透彻;

第一步:分门别类

一口气写出20个数组方法有点难度,我们可以在脑海里对数组方法进行分类,同一类操作归为一类,这样写是不是更加简单了呢?

  1. 添加元素类:push、unshift
  2. 删除元素类:pop、shift、splice
  3. 数组转字符串类:toString、join
  4. 遍历类:forEach、reduce、reduceRight、map、filter、some、every
  5. 排序:sort
  6. 拼接:concat
  7. 索引:indexOf、lastIndexOf

一口气写了整整19个,就是不够那20个,看来我不够资格说”前端已死“,来查一查差哪些:

  1. 翻转:reverse
  2. 浅拷贝:slice

为什么写这些?因为这些是vscode中lib.es5.d.ts中定义的数组方法

第二步:实现数组接口

数组需要接收一个泛型参数,用来动态获取数组中元素类型

interface MyArray<T> {
    
}

第三步:方法定义

首先是元素添加类方法:push、unshift,千万不要忘了他们有返回值,返回值是新数组的length

  push(...args: T[]): number;
  unshift(...args: T[]): number;

删除元素类方法,前两个比较好写,它们的返回值都是删除的那个元素,但是需要注意的是空数组调用后返回undefined;

 pop(): T | undefined;
 shift(): T | undefined;
 /**错误的写法:splice(start: number, deleteNum: number, ...args: T[]): T[];**/

splice这样写还有问题,因为splice只有第一个参数是必传,这样就需要写多个声明了

 splice(start: number, deleteNum?: number): T[];
 splice(start: number, deleteNum: number, ...args: T[]): T[];

然后是数组转字符串类:toString、join,没有难度直接写

 join(param?: string): string;
 toString(): string;

遍历类:forEach、reduce、reduceRight、map、filter、some、every 我们一个一个地来写,首先是forEach方法,这个方法我们常用的就只有回调函数,但是其实还有一个参数可以指定回调函数的this

forEach(callbackFn: (value: T, index: number, array: T[]) => void, thisArg?: any): void;

reduce这个方法可以实现累加器,也是我们最常用的方法之一,reduceRight与reduce的区别就在于它是从右往左遍历

 reduce(callbackFn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;

map方法遍历数组并且会返回一个新的数组,它是一个纯函数

  map(callbackFn: (value: T, index: number, array: T[]) => T, thisArg?: any): T[];

后面的一些遍历方法我们就不再赘述,基本上都遵从回调函数,this绑定参数,这种固定模式

后面的一些方法都比较简单,最后把写好的方法定义都汇总起来:

interface MyArray<T> {
  length: number;
  // 数组添加元素
  push(...args: T[]): number;
  unshift(...args: T[]): number;

  // 数组删除元素
  pop(): T | undefined;
  shift(): T | undefined;
  splice(start?: number, deleteNum?: number): T[];
  splice(start: number, deleteNum?: number): T[];
  splice(start: number, deleteNum: number, ...args: T[]): T[];

  // 数组索引
  indexOf(item: T): number;
  lastIndexOf(item: T): number;

  // 数组遍历
  forEach(callbackFn: (value: T, index: number, array: T[]) => void, thisArg?: any): void;
  reduce(callbackFn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;
  reduceRight(callbackFn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;
  some(callbackFn: (value: T, index: number, array: T[]) => boolean, thisArg?: any): boolean;
  every(callbackFn: (value: T, index: number, array: T[]) => boolean, thisArg?: any): boolean;
  map(callbackFn: (value: T, index: number, array: T[]) => T, thisArg?: any): T[];

  //   数组与字符串
  join(param?: string): string;
  toString(): string;
  toLocalString(): string;

  //   数组排序
  sort(callbackFn: (a: T, b: T) => number): T[];

  // 数组扁平化
  flat(deepSize: number): T[];

  //   数组的拼接
  concat(...args: T[]): T[];

  //   数组的拷贝
  slice(start?: number, end?: number): T[];

  //   数组翻转
  reverse(): T[];
}

前面都是前奏,现在开始今天的正题,手写数组的这些方法。

第四步 实现这些方法

首先我们修改一下接口定义的名称:IMyArray,然后定义MyArray类实现该接口,编辑器会自动将上面的方法注入

class MyArray<T> implements IMyArray<T> {

}

先实现push方法:

push(...args: T[]): number {
    const len = args.length;
    for (let i = 0; i < len; i++) {
      this[this.length++] = args[i];
    }
    return this.length;
}

其实我们实现的是一个类数组,只不过含有数组的所有方法,这里经常会使用类数组来考察对push的理解,比如这道题:

const obj = {  
    0:1,  
    3:2,  
    length:2,  
    push:[].push  
}  
obj.push(3);

然后实现一个splice,注意splice是一个原地修改数组的方法,所以我们不能借助额外的空间实现,这里我们还是使用Array.prototype.splice的方式来实现,类数组不能通过length属性删除元素

Array.prototype.splice = function splice(start: number, deleteNum = 1, ...rest: any[]) {
  if (start === undefined) {
    return [];
  }

  const that = this;
  let returnValue: any[] = [];
  // 将begin到end的元素全部往前移动
  function moveAhead(begin: number, end: number, step: number) {
    const deleteArr: any[] = [];
    // 可以从前往后遍历
    for (let i = begin; i < end && i + step < end; i++) {
      if (i < begin + step) {
        deleteArr.push(that[i]);
      }
      that[i] = that[i + step];
    }
    return deleteArr;
  }
  function pushAtIdx(idx: number, ...items: any[]) {
    const len = items.length;
    const lenAfter = that.length;
    // 在idx处添加len个元素,首先需要把所有元素后移len位,然后替换中间那些元素
    for (let i = idx; i < idx + len; i++) {
      if (i < lenAfter) {
        that[i + len] = that[i];
      }

      if (i - idx < len) {
        that[i] = items[i - idx];
      }
    }
  }
  if (deleteNum >= 1) {
    returnValue = moveAhead(Math.max(start, 0), that.length, deleteNum);
    that.length -= deleteNum;
  }

  pushAtIdx(start, ...rest);
  return returnValue;
};

后面的实现我们都是用数组来实现,比如实现其中某一个遍历的方法,我们就实现比较复杂的比如reduce,reduce的实现比较简单

Array.prototype.reduce = function <T>(
  callbackFn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T,
  initialValue?: T
): T 
{
  // reduce如果有初始值那么以初始值开始计算,如果没有初始值那么用数组第一项作为初始值
  let startIndex = 0;
  const len = this.length;
  let ans = initialValue;
  if (initialValue === undefined) {
    ans = this[0];
    startIndex = 1;
  }

  for (let i = startIndex; i < len; i++) {
    ans = callbackFn(ans, this[i], i, this);
  }
  return ans;
};

然后再实现一个reverse数组翻转方法,我们可以遍历前一半的数据,然后分别与后面一半进行交换,这样就完成了原地翻转:

Array.prototype.reverse = function () {
  const len = this.length;
  const that = this;
  function swap(a, b) {
    const tmp = that[a];
    that[a] = that[b];
    that[b] = tmp;
  }
  for (let i = 0; i < len >> 1; i++) {
    swap(i, len - i - 1);
  }
  return this;
};

至于sort和flat方法这些都有很多实现方式,我们可以参考一下V8官方的文档;从文档中我们可以发现:


之前的sort方法是基于快排,并且是一种不稳定的排序算法,后来V8将sort迁移到了Torque,tq是一种特殊的DSL,利用Timsort算法实现了稳定的排序,Timsort可以看成一种稳定的归并排序

总结

我们先从数组的20个方法为切入点,研究了这些方法的ts定义,用法,顺便手写模拟了一下它们,然后对于比较复杂的sort算法我们了解了一下它的原理,显然sort算法已经不是那个以前用快排实现的不稳定的排序算法了,现在是一种稳定的排序算法,并且基于归并排序,所以归并排序我们一定要掌握好;另外这种由浅入深的学习方法,值得大家去实践。

推荐阅读  点击标题可跳转

1、React:我们的用法习惯可能是错误的

2、使用 Vite 和 TypeScript 带你从零打造一个属于自己的 Vue3 组件库

3、我用 React+TS 从 0 到 1 实现一个 Terminal 终端

继续滑动看下一个
大前端技术之路
向上滑动看下一个

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存