今天的文章，我将与大家分享我收集和使用的21个JavaScript小技巧。希望今天文章中的内容可以帮助到您，让您的工作更有效率！更轻松！让我们现在开始吧。1.多条件if语句将多个值放入一个数组，然后调用该数组的include方法。//badif(x==="abc"||x==="def"||x==="ghi"||x==="jkl"){//逻辑}//betterif(["abc","def","ghi","jkl"].includes(x)){//逻辑}2.简化iftrue...else条件表达式//badlettest:boolean;if(x>100){test=true;}else{test=false;}//betterlettest=x>10?true:false;//或让test=x>10;控制台日志（测试）；3.false值(undefined,null,0,false,NaN,emptystring)检查当我们创建一个新的变量时，有时我们想检查引用的变量是否为false值，比如null或undefined或空字符串。JavaScript确实为这种检查提供了一个很好的快捷方式——逻辑或运算符(||)||仅当左侧为空或NaN或null或undefined或false时，才返回右操作数，逻辑或运算符(||)返回右侧的值。//badif(test1!==null||test1!==undefined||test1!==""){lettest2=test1;}//betterlettest2=test1||"";//badif(test1===true)orif(test1!=="")orif(test1!==null)//betterif(test1){//做一些}else{//做其他}//注意：如果test1有值，则执行if后面的逻辑。//该运算符主要用于null、undefined、空字符串的检查。4.null/undefined检查和默认赋值//null检查和默认赋值lettest1=null;lettest2=test1??"";console.log("空检查",test2);//输出空字符串""//未定义检查和默认赋值consttest=undefined??"default";console.log(test);//预期输出："default"5.获取列表中的最后一项在其他语言中这个功能被做成一个方法或函数，可以在数组上调用，但是在JavaScript中你必须自己做一些工作。让数组=[0,1,2,3,4,5,6,7];安慰。日志（数组。切片（-1））>>>[7]；安慰。日志(array.slice(-2))>>>[6,7];安慰。日志(array.slice(-3))>>>[5,6,7];functionlastItem(list){if(Array.isArray(list)){returnlist.slice(-1)[0];}if(listinstanceofSet){returnArray.from(list).slice(-1)[0];}if(listinstanceofMap){returnArray.from(list.values()).slice(-1)[0];}}6.比较后返回//badlettest;functioncheckReturn(){if(!(test===undefined)){returntest;}else{returncallMe("测试");}}//更好的函数checkReturn(){返回测试??callMe("test");}7.使用可选的链接运算符-?。？也称为链判断操作，它允许开发人员读取深度嵌套在对象链中的属性的值，而无需验证每个引用。当引用为空时，表达式停止计算并返回undefined。consttravelPlans={destination:"DC",monday:{location:"NationalMall",budget:200,},};//错误的constres=travelPlans&&travelPlans.tuesday&&travelPlans.tuesday.location&&travelPlans.tuesday.位置.href;控制台日志（资源）；//结果：未定义//更好constres1=travelPlans?.tuesday?.location?.href;控制台日志（res1）；//结果：未定义8。多条件&&运算符要仅在变量为真时调用函数，请使用&&运算符。//badif(test){callMethod();}//更好的测试&&callMethod();当您想在React中有条件地渲染组件时，这对于使用(&&)进行短路很有用。例如：
{this.state.isLoading&&}
9.开关简化我们可以将条件存储在key-value对象中，并根据条件调用它们。//badswitch(data){case1:test1();休息;案例2：test2()；休息;案例3：测试（）；休息;//以此类推...}//bettervardata={1:test1,2:test2,3:test,};//如果data中存在type，则执行对应的函数data[type]&&data[type]();10.默认参数值//badfunctionadd(test1,test2){if(test1===undefined)test1=1;如果（测试2===未定义）测试2=2；returntest1+test2;}//betteradd=(test1=1,test2=2)=>test1+test2;添加（）;//output:311.条件查找简化如果我们想根据不同的类型调用不同的方法，我们可以使用多个elseif语句或者开关，但是有没有比这更好的简化技术呢？其实和之前的switch简化是一样的。//badif(type==="test1"){test1();}elseif(type==="test2"){test2();}elseif(type==="test3"){test3();}elseif(type==="test4"){test4();}else{thrownewError("Invalidvalue"+type);}//bettervartypes={test1,test2,test3,test4,};类型[类型]&&类型[类型]();12.对象属性赋值lettest1="a";lettest2="b";//badletobj={test1:test1,test2:test2};//betterletobj={test1,test2};13.解构赋值//badconsttest1=this.data.test1;consttest2=this.data.test2;consttest2=this.data.test3;//betterconst{test1,test2,test3}=this.data;14.模板字符串如果你厌倦了使用+将多个变量连接成一个字符串，这个简化技巧会让你头疼。//badconstwelcome="Hi"+test1+""+test2+".";//betterconstwelcome=`Hi${test1}${test2}`;15.跨越字符串//badconstdata="hellomaxwellthisisatest\n\t"+"testtest,testtesttesttest\n\t";//更好的constdata=`hellomaxwellthisisatesttesttest,testtesttesttest`;16.indexOf在数组中查找一个值时，我们可以使用indexOf()方法。但是还有更好的方法，我们来看这个例子。//badif(arr.indexOf(item)>-1){//找到项目}if(arr.indexOf(item)===-1){//找不到项目}//betterif(~arr.indexOf(item)){//itemfound}if(!~arr.indexOf(item)){//itemnotfound}//按位（~）运算符将返回true（-1除外），//反向操作只需要!~.或者，可以使用includes()函数。if(arr.includes(item)){//如果找到该项目，则返回true}17.有将字符串转换为数字的内置方法，例如parseInt和parseFloat可以使用将字符串转换为数字。我们也可以通过在字符串前面提供一元运算符(+)来简单地做到这一点。//badlettotal=parseInt("583");letaverage=parseFloat("32.5");//betterlettotal=+"583";letaverage=+"32.5";18.如果你有一堆，按顺序执行Promise如果异步函数或普通函数都返回需要你一个一个地实现它们的Promises怎么办？asyncfunctiongetData(){constpromises=[fetch("url1"),fetch("url2"),fetch("url3"),fetch("url4")];for(constitemofpromises){//打印出promiseconsole.log(item);}//更适合await(constitemofpromises){//打印出请求的结果console.log(item);}}等待所有Promiae完成。Promise.allSettled()方法将一组Promise实例作为参数，包装到一个新的Promise实例中。在所有这些参数实例都返回结果（完成或拒绝）之前，包装器实例不会结束。有时候，我们并不关心异步请求的结果，我们只关心是否所有的请求都结束了。这时候Promise.allSettled()方法就非常有用了。constpromises=[fetch("index.html"),fetch("https://does-not-exist/")];constresults=awaitPromise.allSettled(promises);//过滤掉成功的请求constsuccessfulPromises=results.filter((p)=>p.status==="fulfilled");//过滤掉失败的请求并输出原因consterrors=results.filter((p)=>p.status==="rejected").map((p)=>p.reason);19.交换数组元素的位置//badconstswapWay=(arr,i,j)=>{constnewArr=[...arr];让temp=newArr[i];newArr[i]=列表[j];newArr[j]=温度；returnnewArr;};//自ES6以来，交换数组中不同位置的值变得更加容易//更好constswapWay=(arr,i,j)=>{constnewArr=[...arr];const[newArr[j],newArr[i]]=[newArr[i],newArr[j]];返回newArr;};20.withRangedRandomNumberGenerator有时你需要生成随机数，但又希望这些数字在一定范围内，这时就可以使用这个工具。functionrandomNumber(max=1,min=0){if(min>=max){returnmax;}returnMath.floor(Math.random()*(max-min)+min);}生成随机颜色函数getRandomColor(){constcolorAngle=Math.floor(Math.random()*360);return`hsla(${colorAngle},100%,50%,1)`;}到这里，我想和大家分享20个JavaScript技巧就完事了，希望这些技巧对你有用。我写在最后，之前我已经和你分享过很多这样的技巧。不知你学会了吗？如果你还没有学过，请记得多看书，一些暂时不需要的技能可以自己收藏。同时，你也应该整理一份自己的使用技巧笔记。如果你觉得我今天分享给你的内容对你有帮助，请记得点赞、关注我，分享给你的开发者朋友，说不定能帮到他。以上就是我今天和大家分享的全部内容，感谢大家的阅读，祝编程愉快！
