JavaScript開發:邏輯代碼部分簡便寫法整理

一、判斷條件簡寫

  1、三目表達式

doTest(){
      //判斷是否大於0,大於0就返回原值,不大於0則返回0
      let test = -5;

      //if-else寫法
      if(test > 0){
        return test;
      }else{
        return 0;
      }

      //三目表達式寫法
      return test > 0 ? test : 0;
}

  2、三目表達式(判空更精簡)

doTest(){
      //判斷是否爲空,不爲空則返回原數據,爲空則返回錯誤信息
      let test = null;

      //if-else寫法
      if(test){
        return test;
      }else{
        return "error";
      }

      //三目表達式寫法
      return test ?? "error";
}

  3、邏輯與

doTest(){
      //輸出test.son.name
      let test = {};

      //if-else寫法
      //如果不加每層的判空判斷,直接按原結構輸出的話,會出現原數據中不存在子級結構時報無法從undefined中取值的問題,因此需要一層一層遞進判空拿到需要的數值
      if(test){
        if(test.son){
          console.log(test.son.name);
        }
      }

      //邏輯與(左側條件成立時纔會去判斷右側條件,如果左側不成立不會執行右側的遞進,防止取值報錯)
      console.log(test && test.son && test.son.name);

      //精簡
      console.log(test ?.son ?.son.name);
}
doTest(){
      //如果爲true則執行方法doOne
      let test = true;
      
      //if寫法
      if(test){
        this.doOne();
      }
      
      //邏輯與寫法
      test && this.doOne();      
}

二、賦值簡寫

  1、合併依次賦值

doTest(){
      //單個賦值
      let a = 0;
      let b = 1;
let c = 2;
//合並依次賦值 [a,b,c] = [0,1,2]; }

  2、交換賦值

doTest(){
      //單個賦值
      let a = 0;
      let b = 1;
      //交換賦值,無需第三方變量過渡
      [a,b] = [b,a];
}

  3、擴展運算符處理數組列表

doTest(){
      let arr1 = [1,2,3];
      let arr2 = [4,5,6];
      let arr3 = [7,8,9];

      let arrAll = [];
      //數組列表連接方法
      arrAll = arr1.concat(arr2,arr3);
      //添加單個元素
      arrAll.push(10);
      arrAll.push(11);


      //擴展運算符拼接
      arrAll = [...arr1, ...arr2, ...arr3];
      //擴展運算符添加單個元素
      arrAll = [...arrAll,10,11];
}

  4、擴展運算符自動處理

doTest(){
      //需要拆分的表單
      let arr = {
        column0: 0,
        column1: 1,
        column2: 2
      }

      //分開賦值
      let column0 = arr.column0;
      let a = {
        column1 : arr.column1,
        column2 : arr.column2
      }

      //擴展運算符賦值
      let [column1,...b] = arr;
}

三、數組列表處理

  1、列表篩選

doTest(){
      //預置初始化數據
      let list = [
        {
          name: "測試1",
          value: 1
        },{
          name: "測試2",
          value: 2
        }
      ]

      //遍歷獲取name爲測試2的value值
      for(let i = 0;i < list.length;i++){
        if(list[i].name == "測試2"){
          return list[i].value;
        }
      }

      //列表篩選
      return list.find(item => (item.name == "測試2")).value;
}

  2、列表去重

doTest(){
      //預置初始化數據
      let list = [1,3,5,1,2,4,6,1,8,2,10,1,5,7];

      //列表去重
      return [...new Set(list)];
}

四、 數字判斷和處理簡寫

doTest(){
      //小數
      let t = 3.24;
      let s = "3.24";

      //判斷小數奇偶性
      let str = t & 1 ? "奇數" : "偶數";

      let num;
      //向下取整
      num = t >> 0;
      num = t | 0;
      num = ~~t;

      //字符串轉數字
      num = +s;

      //四捨五入保留小數
      num = t+.5 | 0;
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章