前端效率提升小技巧

君子善假于物也：通过vscode提升整理代码的速度

业务开发中整理已有代码是非常重要的对于提升项目的可维护性来说，以下主要利用编辑器已有功能针对快速整理代码以及快速抽离可复用代码进行讲解

快速整理代码

快速去除无用的引用

其他功能例如对导入进行排序，修复所有可修复的内容等都是非常有用的小技巧

快速抽离可复用

可以快速提取通用方法到单独的文件

the devil is in the details ：快速生成代码

detail One.for循环的快速生成

只需要输入for，vscode就会提示相应的代码片段，至少能够减少打90%的字符和提升90%的效率

detail Two. useState的快速生成

usf 快速生成useState hook代码，至少能够减少90%需要手打的字符和提升90%的效率

detail Three. 快速打开文件：按下Ctrl/Cmd+P，然后输入文件名，可以快速打开文件

detail Four. 快速找出所有的vscode命令

Mac：cmd+shift+p or f1
Windows / Linux：ctrl+shift+p or f1

detail Five. 快速上下移动某一行数据

Mac：alt + 上下键
Windows / Linux：alt + 上下键

提升内功修炼

找优化的点

优化后代码量减少

数据结构与算法

链表与环形链表的判断

/**
 * 判断链表是否有环
 * Definition for singly-linked list.
 * class ListNode {
 *     val: number
 *     next: ListNode | null
 *     constructor(val?: number, next?: ListNode | null) {
 *         this.val = (val===undefined ? 0 : val)
 *         this.next = (next===undefined ? null : next)
 *     }
 * }
 */


class ListNode {
      val: number
      next: ListNode | null
      constructor(val?: number, next?: ListNode | null) {
          this.val = (val===undefined ? 0 : val)
         this.next = (next===undefined ? null : next)
      }
}

function hasCycle(head: ListNode | null): boolean {
  if (!head || !head.next) {
    return false;
  }
  let slow = head;
  let fast = head.next;
  while (slow !== fast) {
    if (!fast || !fast.next) {
      return false;
    }
    slow = slow.next;
    fast = fast.next.next;
  }
  return true;
}


// 相关jest测试代码
describe('hasCycle', () => {
  it('should return true if the linked list has a cycle', () => {
    const head = new ListNode(3);
    const node1 = new ListNode(2);
    const node2 = new ListNode(0);
    const node3 = new ListNode(-4);
    head.next = node1;
    node1.next = node2;
    node2.next = node3;
    node3.next = node1;
    expect(hasCycle(head)).toBe(true);
  });

  it('should return false if the linked list does not have a cycle', () => {
    const head = new ListNode(1);
    const node1 = new ListNode(2);
    const node2 = new ListNode(3);
    const node3 = new ListNode(4);
    head.next = node1;
    node1.next = node2;
    node2.next = node3;
    expect(hasCycle(head)).toBe(false);
  });
});

前端培训进阶