当前位置: 首页 > 后端技术 > Node.js

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

时间:2023-04-03 23:07:55 Node.js

你可能错过了这些非常有用的技巧。由MahdhiRezvi翻译自10SuperUsefulTricksforJavaScriptDevelopers。我们知道JavaScript语言发展迅速。使用ES2020,添加了许多很棒的功能。老实说,您可以用许多不同的方式编写代码。实现同样的功能,有的代码很长,有的代码很短。您可以通过一些技巧使您的代码更干净、更清晰。下面的tips一定会对你接下来的开发工作有所帮助。FunctionParameterValidatorJavaScript允许您为函数参数设置默认值。有了这个特性,我们可以实现一个小技巧来验证函数参数。constisRequired=()=>{thrownewError('paramisrequired');};constprint=(num=isRequired())=>{console.log(`printing${num}`)};print(2);//打印2print();//错误打印(空);//打印空格式的JSON代码你一定对JSON.stringify非常熟悉,但你知道你也可以格式化你的代码吗?其实很简单。stringify方法具有三个参数,值替换符和空格。后两个参数是可选的,所以我们通常不使用它们。要缩进输出代码,我们可以使用2个空格或4个空格。console.log(JSON.stringify({name:"John",Age:23},null,''));>>>{"name":"John","Age":23}对之前的数组去重到对数组进行去重我们将使用过滤器函数来过滤掉重复的值。但是现在我们可以使用新的Set属性来进行过滤。很简单:让uniqueArray=[...newSet([1,2,3,3,3,"school","school",'ball',false,false,true,true])];>>>[1,2,3,"school","ball",false,true]从数组中移除Boolean(v)isfalse有时你想从数组中移除Boolean(v)isfalse的值。JavaScript中只有以下6种类型:undefinednullNaN0emptystringfalse去除这些值最简单的方法是使用下面的方法:array.filter(Boolean)如果想先做一些改变再过滤,可以使用以下方法。记住,原来的数组array是不变的,返回的是一个新的array。array.map(item=>{//进行更改并返回新项目}).filter(Boolean);同时合并多个对象如果需要同时合并多个对象或类,可以使用下面的方法。constuser={姓名:“约翰路德维希”,性别:“男”,};constcollege={primary:"玛尼小学",secondary:"拉斯中学",};constskills={programming:"Extreme",swimming:"Average",sleeping:"Pro",};constsummary={...user,...college,...skills};>>>{名称:'JohnLudwig',性别:'男',小学:'玛尼小学',中学:'拉斯中学',编程:'Extreme',游泳:'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};//抓取数字const{number}=object;//抓取数字并重命名为otherNumberconst{number:otherNumber}=object;console.log(otherNumber);//10获取数组中的数字Lastitem如果要获取数组中的最后一项,可以使用带有负数作为参数的slice函数。让数组=[0,1,2,3,4,5,6,7]控制台。日志(数组。切片(-1));>>>[7]控制台。log(array.slice(-2));>>>[6,7]console.log(array.slice(-3));>>>[5,6,7]等待所有Promise完成有时您可能需要等待几个promises被履行然后执行以下操作。您可以使用Promise.all并行执行承诺。constPromiseArray=[Promise.resolve(100),Promise.reject(null),Promise.resolve("数据发布"),Promise.reject(newError('出错了'))];Promise.all(PromiseArray).then(data=>console.log('全部解决!这里是解析值:',data)).catch(err=>console.log('gotrejected!reason:',err))注意只要as当其中一个Promise.all被拒绝时,它会立即停止执行并抛出异常。如果你想忽略resolved或rejected状态,你可以使用Promise.allSettled。这是ES2020的新特性。constPromiseArray=[Promise.resolve(100),Promise.reject(null),Promise.resolve("数据发布"),Promise.reject(newError("出错了")),];Promise.allSettled(PromiseArray).then((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:对象出错了。<匿名>在Module._compile(internal/modules/cjs/loader.js:1200:30)在Object.Module._extensions..js(internal/modules/cjs/loader.js:1220:10)在Module.load(internal/modules/cjs/loader.js:1049:32)在Function.Module._load(internal/modules/cjs/loader.js:937:14)在Function.executeUserEntryPoint[asrunMain](internal/modules/run_main.js:71:12)atinternal/main/run_main_module.js:17:47}]如果你觉得文章对了,点个赞好吗,有疑问可以在评论区提问,创作不易,你们的点赞和评论是对我最大的鼓励~~欢迎关注公众号云影天空,你很快就会相遇是最大的缘分~~