艾纳网站建设,网络管理系统登录,wordpress 演示数据,页面升级每天自动更新1. 含有多个条件的if语句
//longhand
if(x abc || x def || x ghi || x jkl){//logic
}//shorthand
if([abc,def,ghi,jkl].includes(x)){//logic
}2. if…else的缩写法
当我们在if-else条件下的逻辑比较简单时#xff0c;我们可以使用三元条件运算符。
//longhand
let …1. 含有多个条件的if语句
//longhand
if(x abc || x def || x ghi || x jkl){//logic
}//shorthand
if([abc,def,ghi,jkl].includes(x)){//logic
}2. if…else的缩写法
当我们在if-else条件下的逻辑比较简单时我们可以使用三元条件运算符。
//longhand
let test:boolean;
if(x 100){test true
}else{test false
}
//shorthand
let test (x 10) ? true : false;//or we can use directly
let test x 10;console.log(test);如果包含嵌套条件也可以使用这种方法。
let x 300;
test2 (x 100) ? greater 100 : (x 50) ? less 50 : between 50 and 100console.log(tet2);//greater 1003. 定义变量
当我们想要定义两个变量并且这两个变量拥有相的值或者类型的话我们可以运用这种简略的表达方式。
// longhand
let test 1;
let test2 3;//shorthand
let test1, test2 1;4. 关于Null,undefined的检查
当我们创建新的变量时有时候需要检查我们引用变量的值是否为null,或是否是undefined,js本身就有一种缩写法能实现这个功能。
//longhand
if(test ! null || test1 ! undefined || test ! ){let test2 test1;
}//shorthand
let test2 test1 || ;5. Null检查与指定默认值
let test1 null, test2 test || ;
conosle.log(null check,test2);//output will be 6. Undefined值检查与默认赋值
let test1 undefined ,test2 test1 ||
console.log(undefined check,test2);//output will be 正常值检查
let test1 test,test2 test1 ||
console.log(test2);//output:test7.聚合运算符 是聚合运算符如果左值为null或undefined, 就返回右值。默认值返回左值。
const test null ?? default;
console.log(test);
// expected output : default const test1 0 ?? 2;
console.log(test1);
//expected output:0;8. 为多个变量赋值
当我们处理多个变量想为不同的变量赋不同的值时就会发现这种简略的表达方式的实用之处了。
// longhand
let test1 , test2 , test3;
test1 1;
test2 2;
test3 3;//shorthangd
let [test1, test2, test3] [1,2,3]9. 赋值运算符简略的表达方式
通常我们会在程序中处理大量的算术运算符。而对于JavaScript变量的赋值运算符来说这是其中一个实用的技巧。
//longhand
test1 test1 1;
test2 test2 - 1;
test3 test3 * 20;//shorthand
test1;
test2--;
test3*20;10. 判断变量是否存在的缩写法
这是我们工作中常用的缩写表达方式之一如今它仍然值得被提起。
// langhand
if(tets true) or if(test ! ) or if(test ! null)//shorthand
if(test1)注意如果test1有任何值程序都会执行if(test1){} 内的逻辑这种写法在判断NULL或undefined值时普遍使用。
11. 多种条件下的与()运算符
如果我们只在变量为true的时候调用函数那么我们就可以运用运算符。
//longhand
if(test1){callMethod();
}//shorthand
tets1 callMethod();12. foreach循环简略的表达方式
这是迭代常用的简略的表达方式技巧之一。
//longhand
for(var i 0; itestData.length; i)//shorthand
for(let i in testData) or for(let i in testData)每个变量的数组
function testData(element,index,array){console.log(test[index]element);
}
[11,24,32].forEach(testData);
//log:test[0] 11,test[1] 24, test[2] 3213. 比较结果的返回值
在return语句中我们也可以使用比较的语句。这样原来需要5行代码才能实现的功能现在只需要1行大大减少了代码量。
// langhand
let test;
function chechReturn(){if(!(test undefined)){return test;}else{return callMe(test);}
}
var data checkReturn();
console.log(data);//output testfunction callMe(val){console.log(val)
}//shorthand
function checkReturn(){return test || callMe(test)
}14. 箭头函数
//longhand
function add(a,b){return a b;
}//shorthand
const add (a,b) a b; 更多实例如下
function callMe(){console.log(Hello,name);
}
callMe name console.log(Hello, name);15. 调用短函数
我们可以运用三元运算符实现如下功能
// longhand
function test1(){console.log(test);
}
function test2(){console.log(test2)
}
var test3 1;
if(test3 1){tet(1);
}else{test2()
}//shorthand
(test3 1 ? tets1 : test2)();写在最后
以上就是今天的干货分享内容**《使用现代JavaScript技术优化代码的34种方法上》**
转载自小渡
