一、判斷條件簡寫
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; }