前端知识点随笔

ps：记录开发过程中遇到的一些小知识点

1、大量选择分支的时候，代码过多

原版：

  switch (this.SelectValue) {
        case 1:
          this.SwitchValue = "星期一";
          break;
        case 2:
          this.SwitchValue = "星期二";
          break;
        case 3:
          this.SwitchValue = "星期三";
          break;
        case 4:
          this.SwitchValue = "星期四";
          break;
        case 5:
          this.SwitchValue = "星期五";
          break;
        case 6:
          this.SwitchValue = "星期六";
          break;
        case 7:
          this.SwitchValue = "星期日";
          break;
        default:
          break;
      }

优化后：

  let SwitchTest = {
        1: "星期一",
        2: "星期二",
        3: "星期三",
        4: "星期四",
        5: "星期五",
        6: "星期六",
        7: "星期日",
      };
      this.SwitchValue = SwitchTest[this.SelectValue];

ps：同样适用于if...else过多的情况

2、if判断中大量的条件满足相同的需求

原版：

  if (
        this.SelectValue === 1 ||
        this.SelectValue === 2 ||
        this.SelectValue === 3 ||
        this.SelectValue === 4 ||
        this.SelectValue === 5
      ) {
        this.IfValue = "上班";
      } else {
        this.IfValue = "双休";
      }

优化后：

 if ([1, 2, 3, 4, 5].includes(this.SelectValue)) {
        this.IfValue = "上班";
      } else {
        this.IfValue = "双休";
      }

3、参数意义不明

原版：

  let MessTitle = "lastNames";
      if (MessTitle.length > 8) {
        console.log(MessTitle);
      }

优化后：

let MessTitle = "lastNames";
let MAX_STRING_LENGTH = 8;
if (MessTitle.length > MAX_STRING_LENGTH) {
    console.log(MessTitle);
}

4、变量赋值

原版：

      let MessMenu = ["LASTNAMES"];
      let MAX_STRING_LENGTH = 8;
      let MessChild = MessMenu[0];
      if (MessChild.length > MAX_STRING_LENGTH) {
        console.log(MessChild);
      }

但是，当所给的数据为  “let MessMenu = []” 时就会出现报错

 

 

 所以在给变量赋值的时候要考虑获取不到数据的情况

优化后：

      let MessMenu = [];
      let MAX_STRING_LENGTH = 8;
      let MessChild = MessMenu[0] || "";
      if (MessChild.length > MAX_STRING_LENGTH) {
        console.log(MessChild);
      }

这样返回的是不满足判断条件的结果，而不是报错

ps：‘||’后的数据可以在不影响结果的前提上自行定义（个人理解，应该对吧）

 5、字符串组合

原版：

      let Name = "张三";
      let Tel = "13456789";
      console.log("物品的持有者名字叫" + Name + ",电话是：" + Tel);

 

 优化后：

      let Name = "张三";
      let Tel = "13456789";
      console.log(`物品的持有者名字叫${Name},电话是：${Tel} `);

 

 ps：" ` "这个是英文模式下的“ · ”，（键盘感叹号左边那个）

6、echarts图表（transitionDuration）

由于数据更改时echarts宽高都会发生变化，导致相对布局的div可能大小发生变化（画布大小却不变），在自动适配前会出现滚动条从而导致页面闪动，如图：

 

 解决方法：

  tooltip: {
          transitionDuration: 0,
    }

7、移动端缩放问题

 transform-origin: right bottom; //确定缩放的原点
 transform: scale(0.5); //缩放的程度

8、关于代码注释（狗头）

/*我也不知道它为什么能运行，请勿轻易改动*/

9、el-table 间隔样式

样式如下（由于内容问题，这里就不表格全貌了）

样式代码如下：

ps： border-collapse  以及  border-spacing的具体用法请自行百度

 .el-table__body {
    border-collapse: separate;
    border-spacing: 0 8px;
  }

10、获取结构目录

（1）安装

npm i mddir --save

（2）执行

node node_modules/mddir/src/mddir (可选，默认当前目录)

（3）查看

执行命令后会在当前目录下生成一个 directoryList.md 的 md 文件。

 

 11、过滤数组中的null(空值)和 ""(空字符串)

      let arr = [1, "1", "", "g", null, undefined, "f", "  "];
      let newArr = arr.filter((i) => i && String(i).trim());
　　　 console.log(newArr); // [1, "1", "g", "f"]