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; }