当前位置: 首页 > 科技观察

JavaScript速记技巧:迈向更清晰的代码

时间:2023-03-14 12:00:11 科技观察

本文转载自公众号《阅读核心》(ID:AI_Discovery)。任何编程语言中的速记技巧都将帮助您编写出更好、更简洁的代码。借助速记技巧,不仅可以提高代码的可读性,还可以编写更少的代码来完成工作。以下是JavaScript的一些速记技巧。1.声明变量//Longhandletx;lety=20;//Shorthandletx,y=20;2.给多个变量赋值你可以在一行代码中同时给多个变量赋值。//Longhandletmarks=26;letresult;if(marks>=30){result='Pass';}else{result='Fail';}//Shorthandletresult=marks>=30?'Pass':'Fail';3.三元运算符使用三元运算符(条件),可以将五行代码缩减为一行。//LonghandletimagePath;letpath=getImagePath();if(path!==null&&path!==undefined&&path!==''){imagePath=path;}else{imagePath='default.jpg';}//ShorthandletimagePath=getImagePath()||'default.jpg';4.分配默认值我们可以使用OR(||)短路评估为变量分配默认值,以防期望值为空。//LonghandletimagePath;letpath=getImagePath();if(path!==null&&path!==undefined&&path!==''){imagePath=path;}else{imagePath='default.jpg';}//ShorthandletimagePath=getImagePath()||'default.jpg';5.AND(&&)短路求值如果你只需要在一个变量为真时调用一个函数,你可以使用AND(&&)短路求值在一行中完成。//Longhandif(isLoggedin){goToHomepage();}//ShorthandisLoggedin&&goToHomepage();在这行简写中,goToHomepage()只有在isLoggedin的返回结果为真时才会执行。6.交换两个变量通常交换两个变量需要第三个变量的帮助。但是,可以通过数组析构函数赋值轻松地交换两个变量。//Longhandconsole.log('Yougotamissedcallfrom'+number+'at'+time);//Shorthandconsole.log(`Yougotamissedcallsfrom${number}at${time}`);7.箭头函数//Longhandfunctionadd(num1,num2){returnnum1+num2;}//Shorthandconstadd=(num1,num2)=>num1+num2;8.模板字面量我们通常使用“+”运算符来连接字符串值和变量。使用ES6模板,我们可以用更简单的方式来做。//Longhandconsole.log('JavaScript,通常缩写为JS,是一种\n'+'符合\n'+'ECMAScript规范的编程语言。JavaScript是高级的,\n'+'通常是即时编译的,并且是多范式的。');//速记控制台.log(`JavaScript,常简称为JS,是一种符合ECMAScript规范的编程语言。JavaScript是高级的,经常是即时编译的,多范式的。`);9、多行字符串对于多行字符串,我们通常使用“+”运算符和换行符转换描述符(\n)来连接。但是,您可以使用“`”来简化代码。letfirstname='Amitav';letlastname='Mishra';//Longhandletobj={firstname:firstname,lastname:lastname};//Shorthandletobj={firstname,lastname};10.多条件检查对于多值匹配,所有的Values放在一个数组中,使用indexOf()或includes()方法。//Longhandif(value===1||value==='one'||value===2||value==='two'){//Executesomecode}//Shorthand1if([1,'one',2,'two'].indexOf(value)>=0){//Executesomecode}//Shorthand2if([1,'one',2,'two'].includes(value)){//Executesomecode}11.对象属性赋值如果变量名和对象键名相同,则可以在对象字面量中只设置变量名,而不同时设置键和值。JavaScript自动将键名设置为变量名,并将值赋值为变量值。letfirstname='Amitav';letlastname='Mishra';//Longhandletobj={firstname:firstname,lastname:lastname};//Shorthandletobj={firstname,lastname};12.内置了字符串类型转数字的方法,比如parseInt和parseFloat,可以用来将字符串转数字。一种更简单的方法是在字符串值前加上一元运算符(+)。//Longhandlettotal=parseInt('453');letaverage=parseFloat('42.6');//shorthandlettotal=+'453';letaverage=+'42.6';13.Repeatthesamestringmultiple重复字符串可以使用for循环指定次数。但是使用repeat()方法可以在一行中完成。//Longhandletstr='';for(leti=0;i<5;i++){str+='Hello';}console.log(str);//HelloHelloHelloHelloHello//速记'Hello'.repeat(5)Doctor:想通过向某人??发送100次“对不起”的短信来道歉吗?试试repeat()方法。如果您希望每次重复都在新行开始,只需添加\n。14.求幂我们可以使用Math.pow()方法来求幂。然而,使用双星号(**)的语法更短。//Longhandconstpower=Math.pow(4,3);//64//Shorthandconstpower=4**3;//6415.按位双精度非运算符按位双精度非运算符可以替代Math.floor()方法。//Longhandconstfloor=Math.floor(6.8);//6//Shorthandconstfloor=~~6.8;//6按位双非运算符方法只适用于32位整数,即(2**31)-1=2147483647。所以对于任何大于2147483647的数字,按位运算符(~~)都会给出错误的结果,因此在这种情况下建议使用Math.floor()。16、求一个数组的最大值和最小值可以用for循环遍历数组的每一个值,求最大值或最小值。您还可以使用Array.reduce()方法来查找数组中的最大值和最小值。但是使用扩展运算符可以在一行中完成。//速记constarr=[2,8,15,4];Math.max(...arr);//15Math.min(...arr);//217.for循环遍历数组,通常使用传统的for循环,也可以使用for...of循环来遍历。要访问每个值的索引,您可以使用for...in循环。letarr=[10,20,30,40];//Longhandfor(leti=0;i{letnewObject={};Object.keys(obj).map(key=>{if(typeofobj[key]==='object'){newObject[key]=makeDeepClone(obj[key]);}else{newObject[key]=obj[key];}});returnnewObject;}constcloneObj=makeDeepClone(obj);//简写constcloneObj=JSON.parse(JSON.stringify(obj));如果对象属性具有作为值的函数,则速记技巧(JSON.parse(JSON.stringify(obj)))无效。因为当JSON.stringif作用于一个对象时,以函数为值的属性会从对象中移除。所以这种情况下,还是要用普通的写法。20.从字符串中获取字符letstr='jscurious.com';//Longhandstr.charAt(2);//c//Shorthandstr[2];//c希望这篇文章能给你一些帮助。