周末学会了10个超级实用的Javascript技巧！

作者：MahdhiRezvi译者：FrontendXiaozhi来源：Medium点赞再看，养成习惯收录了，对之前好评文章多了分类，也整理了很多我的文档和教程资料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。众所周知，JavaScript一直在快速变化。在新的ES2020中，有很多很棒的功能，其中大部分我们都迫不及待想要尝试。说实话，有时候我们可以从不同的角度写代码，达到同样的效果，有的会更短更清晰。下面列出了一些有用的JavaScript技巧，相信有一天它会对你有所帮助。1、方法参数验证在ES6中，可以为函数参数设置默认值。有了这个，我们可以实现一个聪明的技巧来验证方法参数不能为空。constisRequired=()=>{thrownewError('paramisrequired')}constprint=(num=isRequired())=>{console.log(`printing${num}`)}print(2)//printing2print()//errorprint(null)//printingnull2.格式化JSON代码我们都非常熟悉JSON.stringify，但鲜为人知的是它还可以格式化输出。stringify方法具有三个参数：value、replacer和space。其中，后两者是可选参数，这也是我们很少知道的原因。要缩进JSON，必须使用空格参数。console.log(JSON.stringify({name:"John",Age:23},null,'\t'));>>>{"name":"John","Age":23}3.从数组中获取唯一值从数组中获取唯一值，需要使用filter方法过滤掉重复的值。但是有了新的Setnativeobject，事情就变得很简单了。让uniqueArray=[...newSet([1,2,3,3,3,"school","school",'ball',false,false,true,true])];>>>[1,2,3,"school","ball",false,true]4.从数组中移除假值在某些情况下，我们希望从数组中移除假值。假值是在JavaScript中具有FALSE值的值。JavaScript中只有六个假值，它们是：undefinednullNaN0''（空字符）false过滤这些假值最简单的方法是使用下面的函数：myArray.filter(Boolean)如果你想使对数组进行一些修改，然后过滤新的数组，你可以尝试这样的事情。请记住，原始的myArray保持不变。myArray.map(item=>{//进行更改并返回新项目}).filter(Boolean);大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。5.合并多个对象在实际需求中，我们经常需要合并多个比较。一个快速的方法如下：constuser={name:'JohnLudwig',gender:'Male'}constcollege={primary:'ManiPrimarySchool',secondary:'LassSecondarySchool'}constskills={programming:'Extreme',swimming:'Average',sleeping:'Pro'}constsummary={...user,...college,...skills}6.对数字数组排序JavaScript数组有一个内置的在排序方法中。默认情况下，此排序方法将数组元素转换为字符串并按字典顺序对它们进行排序。但是这会在对数字数组进行排序时产生问题。解决办法是手写一个排序方法。[0,10,4,9,123,54,1].sort((a,b)=>a-b)>>>[0,1,4,9,10,54,123]7。在某些情况下禁用鼠标右键，我们想在网页上禁用鼠标右键，可以使用下面的方法来禁用：

这个简单的代码可以禁用右键单击。8.在解构中使用别名解构赋值是一种JavaScript表达式，将数组中的值或对象中的属性解构为不同的变量。我们可以根据自己的喜好重命名它们，而不是使用现有的对象变量。constobject={number:10}const{number}=object//使用别名const{number:otherNumber}=objectconsole.log(otherNumber)//109。获取数组的最后一项如果想获取数组的最后一个元素，可以使用slice方法。让数组=[0,1,2,3,4,5,6,7]控制台。日志(array.slice(-1))>>>[7]控制台。日志(array.slice(-2))>>>[6,7]console.log(array.slice(-3))>>>[5,6,7]10。等待Promise在某些情况下，我们需要等待多个Promise结束，这里，我们使用Promise.all。constPromiseArray=[Promise.resolve(100),Promise.reject(null),Promise.resolve("数据发布"),Promise.reject(newError('出错了'))];Promise.all(PromiseArray).then(data=>console.log('allresolved!这里是解析值：',data)).catch(err=>console.log('gotrejected!reason:',err))onPromise.all需要注意的一件事是，当Promise拒绝时，此方法将引发错误。这意味着我们的代码不会等到所有的Promise都完成。如果你想等到所有的Promise都resolve，不管它们是rejected还是successed，你可以使用Promise.allSettled。这个方法在ES2020的最终版本中。constPromiseArray=[Promise.resolve(100),Promise.reject(null),Promise.resolve("数据发布"),Promise.reject(newError('出错了'))];Promise.allSettled(PromiseArray).then(res=>{console.log(res);}).catch(err=>console.log(err));//[//{状态：“已完成”，值：100},//{status:"rejected",reason:null},//{status:"fulfilled",value:"Datarelease"},//{status:"rejected",reason:Error:出错了...}//]代码部署后可能存在的bug无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的BUG监控工具，Fundebug。原文：https://blog.bitsrc.io/10-sup...每周更新交流文章。可以微信搜索“大千世界”立即阅读更新（比博文早一两篇），本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，本人整理我的很多文件。欢迎加星和改进。可以参考考点面试。也关注公众号，后台回复福利就能看到福利，你懂的。