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

给JavaScript开发者的10个非常有用的技巧

时间:2023-03-17 21:18:53 科技观察

你可能错过了这些非常有用的技巧。翻译自10SuperUsefulTricksforJavaScriptDevelopers,作者MahdhiRezvi。我们知道JavaScript语言发展迅速。使用ES2020,添加了许多很棒的功能。老实说,您可以用许多不同的方式编写代码。实现同样的功能,有的代码很长,有的代码很短。您可以通过一些技巧使您的代码更干净、更清晰。下面的tips一定会对你接下来的开发工作有所帮助。FunctionParameterValidatorJavaScript允许您为函数参数设置默认值。有了这个特性,我们可以实现一个小技巧来验证函数参数。constisRequired=()=>{thrownewError('paramisrequired');};constprint=(num=isRequired())=>{console.log(`printing${num}`)};print(2);//printing2print();//errorprint(null);//printingnull格式化JSON代码你一定对JSON.stringify非常熟悉,但你知道吗,你也可以通过stringify方法格式化你的代码。其实很简单。stringify方法具有三个参数,值替换符和空格。后两个参数是可选的,所以我们通常不使用它们。要缩进输出代码,我们可以使用2个空格或4个空格。console.log(JSON.stringify({name:"John",Age:23},null,''));>>>{"name":"John","Age":23}去重之前的数组到对数组进行去重我们将使用过滤器函数来过滤掉重复的值。但是现在我们可以使用新的Set属性来进行过滤。非常简单:letuniqueArray=[...newSet([1,2,3,3,3,"school","school",'ball',false,false,true,true])];>>>[1,2,3,"school","ball",false,true]移除数组中Boolean(v)的值为false有时你想移除数组中Boolean(v)的值为false。JavaScript中只有以下6种类型:undefinednullNaN0emptystringfalse去除这些值最简单的方法是使用下面的方法:array.filter(Boolean)如果你想先做一些改变再过滤,您可以使用以下方法。记住,原来的数组array是不变的,返回的是一个新的array。array.map(item=>{//Doyourchangesandreturnthenewitem}).filter(Boolean);同时合并多个对象如果需要同时合并多个对象或类,可以使用下面的方法。constuser={name:"JohnLudwig",gender:"Male",};constcollege={primary:"ManiPrimarySchool",secondary:"LassSecondarySchool",};constskills={programming:"Extreme",游泳:"Average",sleeping:"Pro",};conssummary={...user,...college,...skills};>>>{name:'JohnLudwig',gender:'Male',primary:'ManiPrimarySchool',secondary:'LassSecondarySchool',programming:'Extreme',swimming:'Average',sleeping:'Pro'}这三个点也叫扩展算子。对数字数组进行排序JavaScript数组有一个原生的排序方法arr.sort。默认情况下,此排序方法将数组元素转换为字符串并按字典顺序对它们进行排序。在对数字数组进行排序时,此默认行为可能会导致问题,因此这里有一种处理方法。[0,10,4,9,123,54,1].sort()>>>[0,1,10,123,4,54,9][0,10,4,9,123,54,1].sort((a,b)=>a-b);>>>[0,1,4,9,10,54,123]禁止右击有时你可能想禁止用户右击。虽然这种要求很少见,但也许能派上用场。

这个简单的代码片段可以防止用户右击。解构时重命名解构赋值是JavaScript的一个特性,它允许直接从数组或对象中获取值,而无需繁琐的变量声明和赋值。对于对象,我们可以通过以下方式为属性名重新定义一个名称。constobject={number:10};//Grabbingnumberconst{number}=object;//GrabbingnumberandrenamingitasotherNumberconst{number:otherNumber}=object;console.log(otherNumber);//10如果要获取数组中的最后一项array对于中的最后一项,可以使用带有负数作为参数的slice函数。letarray=[0,1,2,3,4,5,6,7]console.log(array.slice(-1));>>>[7]console.log(array.slice(-2));>>>[6,7]console.log(array.slice(-3));>>>[5,6,7]等待所有Promise完成有时你可能需要等待几个promise完成fulfilled然后进行下面的操作。您可以使用Promise.all并行执行承诺。constPromiseArray=[Promise.resolve(100),Promise.reject(null),Promise.resolve("Datarelease"),Promise.reject(newError('Somethingwentwrong'))];Promise.all(PromiseArray).then(数据=>console.log('allresolved!hereareatheresolvevalues:',data)).catch(err=>console.log('gotrejected!reason:',err))注意只要其中一个Promise.all被拒绝,它就停止立即执行并抛出异常。如果你想忽略resolved或rejected状态,你可以使用Promise.allSettled。这是ES2020的新特性。constPromiseArray=[Promise.resolve(100),Promise.reject(null),Promise.resolve("Datarelease"),Promise.reject(newError("Somethingwentwrong")),];Promise.allSettled(PromiseArray).然后((res)=>{console.log("here",res);}).catch((err)=>console.log(err));>>>here[{status:'fulfilled',value:100},{status:'rejected',reason:null},{status:'fulfilled',value:'Datarelease'},{status:'rejected',reason:Error:SomethingwentwrongatObject.atModule._compile(internal/modules/cjs/loader.js:1200:30)atObject.Module._extensions..js(internal/modules/cjs/loader.js:1220:10)atModule.load(internal/modules/cjs/loader.js:1049:32)atFunction.Module._load(internal/modules/cjs/loader.js:937:14)atFunction.executeUserEntryPoint[asrunMain](internal/modules/run_main.js:71:12)atinternal/main/run_main_module.js:17:4