JavaScript语法糖写法--JS代码优化

1.if多重条件判断

通常多个条件只有一个满足，我们一般使用|| 或运算符 ==es6以后可以使用Array.includes

      // if多重条件判断
      // 通常多个条件只有一个满足，我们一般使用|| 或运算符  ==es6以后可以使用Array.includes

      // 基础写法

      // let x = "aaa"; //设置初始值
      // if (x === "aaa" || x === "bbb" || x === "ccc" || x === "ddd") {
      //   console.log(x);
      // }

      // 语法糖
      
      let x = "aaa"; //设置初始值
      if (["aaa", "bbb", "ccc", "jkl"].includes(x)) {
        console.log(x);
      }

2.if…else的缩写写法

if-else 简单可以用三元表达式

     // if...else的缩写写法
      // if-else 简单可以用三元表达式

      // 基础写法

      // let flag;
      // let x = 20;
      // if (x > 100) {
      //   flag = true;
      // } else {
      //   flag = false;
      // }

      // 语法糖

      // let x = 20;
      // // 方式一
      // let flag = x > 10 ? true : false;
      // // 方式二
      // let flag = x > 10;

3.同时为多个变量赋值

不同变量赋值 +es6的解构赋值

      // 3.同时为多个变量赋值
      // 对不同变量赋值 +es6的解构赋值

      // 基础写法

      // let test1 test2 test3;
      // test1 = 1;
      // test2 = 2;
      // test3 = 3;

      // 语法糖

      let [test1, test2, test3] = [1, 2, 3];
      console.log(test1, test2);

4.多条件的&& （与）运算符

   // 4.多条件的&& （与）运算符

      // 基础写法

      // let test1 = true;
      // function fn() {
      //   console.log(1);
      // }
      // if (test1) {
      //   fn();
      // }

      // 语法糖
      // let test1 = true;
      // function fn() {
      //   console.log(1);
      // }
      // test1 && fn();

      // let test2 = false;
      // function fn() {
      //   console.log(1);
      // }
      // console.log(test2 && fn());  //false

      // 当||和&&同时出现的时候,&&的优先级大于||
      let test1 = 1 == 2;
      let test2 = 2 == 2;
      // console.log(test1 && test2); //当test1为真，不管test2是真假都执行test1，当test1为假，不管test2是真假都执行test2
      console.log(test1 || test2); //当test1为真，执行test2是真假都执行test1，当test1为假，只有test2是真执行test2，如果test2是假执行，最终是false

5.比较结果的返回

在return 语句中，我们也可以使用||或运算符

      // 5.比较结果的返回
      // 在return 语句中，我们也可以使用||或运算符
      // 普通写法
      let test;
      function fn2() {
        console.log(111);
      }
      function fn() {
        if (!(test === undefined)) {
          return test;
        } else {
          return fn2();
        }
      }
      fn();

      // 语法糖
      // let test;
      // function fn2() {
      //   console.log(111);
      // }
      // function fn() {
      //   return test || fn2();
      // }
      // fn();

6.Switch对应的缩写法

 // Switch对应的缩写法
      // 普通写法
      // function test1() {
      //   console.log("11");
      // }
      // function test2() {
      //   console.log("22");
      // }
      // function test3() {
      //   console.log("33");
      // }
      // var n = 1;
      // switch (n) {
      //   case 1:
      //     test1();
      //     break;
      //   case 2:
      //     test2();
      //     break;
      //   case 3:
      //     test3();
      // }

      // 语法糖
      function test1() {
        console.log("11");
      }
      function test2() {
        console.log("22");
      }
      function test3() {
        console.log("33");
      }
      var n = 1;
      var data = {
        1: test1,
        2: test2,
        3: test3,
      };
      data[n] && data[n]();

7.重复字符串

      // 重复字符串
      // 普通写法
      // let str = "";
      // for (let i = 0; i < 5; i++) {
      //   test += " test ";
      // }
      // console.log(str);
      // 语法糖写法
      var str = "test ".repeat(5);
      console.log(str);

8.找出一个数组最大值和最小值

  // 8.找出一个数组最大值和最小值
      // 普通写法
      var arr = [1, 5, 941, 152, 1, 6, 4, 8];
      var max = arr[0];
      var min = arr[0];
      for (let i = 0; i < arr.length; i++) {
        max = max > arr[i] ? max : arr[i];
        min = min < arr[i] ? min : arr[i];
      }
      console.log(max, min);
      // 语法糖
      var arr = [1, 5, 941, 152, 1, 6, 4, 8];
      var max = Math.max(...arr);
      var min = Math.min(...arr);
      console.log(max, min);

9.数组去重

普通写法

// 8.找出一个数组最大值和最小值
      // 普通写法
      // var arr = [1, 5, 941, 152, 1, 6, 4, 8, 1, 56, 3, 4];
      // for (var i = 0; i < arr.length; i++) {
      //   for (var j = i + 1; j < arr.length; j++) {
      //     arr[i] === arr[j] && arr.splice(j, 1) && j++;
      //   }
      // }
      // console.log(arr);
      // 语法糖
      var arr = [1, 5, 941, 152, 1, 6, 4, 8, 1, 56, 3, 4];
      var arr2 = [...new Set(arr)];
      console.log(arr2);

10.查询条件缩写法

  // 10、查询条件缩写法
      // var type = "aaa";
      // if (type === "aaa") {
      //   console.log(type);
      // } else if (type === "bbb") {
      //   console.log(type);
      // } else if (type === "ccc") {
      //   console.log(type);
      // } else if (type === "bbb") {
      //   console.log(type);
      // } else {
      //   console.log(1111);
      // }
      // 语法糖
      var type = "test1";
      var types = {
        test1: test1,
        test2: test2,
        test3: test3,
        test4: test4,
      };
      var func = types[type];
      func ? func() : test();

11.indexOf缩写

      // 11.indexOf缩写
      // 普通写法·1
      // arr = [1, 45, 4, 51];
      // if (arr.indexOf(1) > -1) {
      //   console.log(111); //找的执行
      // }
      // if (arr.indexOf(2) === -1) {
      //   console.log(222); //找的执行
      // }

      // 语法糖
      arr = [1, 45, 4, 51];
      if (~arr.indexOf(1)) {
        console.log(111); //找的执行
      }
      if (!~arr.indexOf(2)) {
        console.log(222); //找的执行
      }

12.??空值合并操作符

   const data = "111";
      // bad
      // const value = data || "1111"; //前面的值为true 返回前面的值，为false的时候返回右侧的值

      // good  ??空值合并操作符 前面的值为null和undefined的时候返回右侧的值
      const value = data ?? "000";

      console.log(value);

13.链判断符进行非空判断

     // bad
      // const value = reponse && reponse.data && reponse.data.text;

      // good  链判断符进行非空判断
      const value = reponse?.data?.text;

      console.log(value);

14.获取数组的最后一项

  // 获取数组的最后一项
      // bad
      let arr = [1, 2156, 4, 645, 5];
      console.log(arr[arr.length - 1]);
      // good
      console.log(arr.at(-1));

15.字符串值转成数组

  // 字符串值转成数组
      // bad
      let str = "123";
      console.log(parseInt(str));
      // good
      let str ="123"
      console.log(+str);

16.变量值不存在赋值

   // 变量值不存在赋值
      // bad
      // if (!foo) {
      //   foo = 111;
      // }
      // good 变量值不存在赋值
      let foo = null;
      foo = foo || 111;
      console.log(foo);

17.去除数组空项

   // 去除数组空项
      let arr = [1, 2, , 3, 4, 5];
      console.log(arr.flat()); //
      console.log(arr); //不会改变源数组