这期内容当中小编将会给大家带来有关10个超级实用的javascript 技巧是怎么样的，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。众所周知，JavaScript 一直在
这期内容当中小编将会给大家带来有关10个超级实用的javascript 技巧是怎么样的，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
众所周知，JavaScript 一直在快速变化。在新的 ES2020 中，有很多很棒的特性，我们大都已经迫不及待尝试了。老实说，有时我们可以用不同角度来编写代码，同样也能达到相同的效果，而且有的还会更简短，更清晰。
1.方法参数验证
es6 中可以为函数的参数设置默认值，有了这个，我们可以实现一个验证方法参数不能为空的巧妙技巧。
const isRequired = () => { throw new Error('param is required') } const print = (num = isRequired()) => { console.log(`printing ${num}`) } print(2) //printing 2 print() // error print(null) //printing null2.格式化JSON代码
我们都非常熟悉JSON.stringify，但比较少知道的是它还可以进行格式化的输出。
stringify 方法有三个参数：value，replacer和space。其中，后两个是可选参数，这也是我们很少知道它的原因。要缩进jsON，必须使用space参数。
console.log(JSON.stringify({name:"John",Age:23},null,'\t')); >>> { "name": "John", "Age": 23 }3.从数组中获取惟一的值
要从数组中获得唯一的值，需要使用filter方法过滤掉重复的值。但是有了新的Set原生对象，事情就变得非常简单了。
let uniqueArray = [...new Set([1, 2, 3, 3,3,"school","school",'ball',false,false,true,true])]; >>> [1, 2, 3, "school", "ball", false, true]4.从数组中删除虚值
在某些情况下， 我们想从数组中删除虚值。虚值是 JavaScript 中的值为FALSE的值。JavaScript 中只有六个虚值，它们是：
undefined
null
NaN
0
'' (空字符)
false
过滤这些虚值的最简单方法是使用下面的函数：
myArray.filter(Boolean)如果要对数组进行一些修改，然后过滤新数组，则可以尝试这样的操作。请记住，原始myArray保持不变。
myArray .map(item => { // Do your changes and return the new item }) .filter(Boolean);5.合并多个对象
实际需求中，我们经常需要合并多个对照，快速的做法可以像下面这么做：
const user = { name: 'John Ludwig', gender: 'Male' } const college = { primary: 'Mani Primary School', secondary: 'Lass Secondary School' } const skills = { programming: 'Extreme', swimming: 'Average', sleeping: 'Pro' } const summary = {...user, ...college, ...skills}6.排序数字数组
JavaScript 数组带有内置的sort方法。默认情况下，此sort方法将数组元素转换为字符串，并对其进行字典排序。但这在对数字数组进行排序时，会有问题，解决方法就是手写一个排序方法。
[0,10,4,9,123,54,1].sort((a,b) => a-b) >>> [0, 1, 4, 9, 10, 54, 123]7.禁用鼠标右键
有些情况，我们想在网页上禁用鼠标的右键，可以使用下面的方式来禁用：
<body oncontextmenu="return false"> <div></div> </body>这个简单的代码就可以禁用右键单击。
8.在解构中使用别名
解构赋值是一个JavaScript表达式，它可以将数组中的值或对象中的属性解构缩不同的变量中。不必使用现有的对象变量，我们可以根据自己的偏好重命名它们。
const object = { number: 10 } const { number } = object // 使用别名 const { number: otherNumber } = object console.log(otherNumber) //109.获取数组中的最后一项
如果要获取数组的末尾元素，可以使用slice方法。
let array = [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]10. 等待 Promises
在某些情况下，我们需要等待多个Promise结束，这里，我们使用Promise.all。
const PromiseArray = [ Promise.resolve(100), Promise.reject(null), Promise.resolve("Data release"), Promise.reject(new Error('Something went wrong'))]; Promise.all(PromiseArray) .then(data => console.log('all resolved! here are the resolve values:', data)) .catch(err => console.log('Got rejected! reason:', err))关于Promise.all需要注意的一件事是，当一个Promise拒绝时，该方法将引发错误。这意味着我们的代码将不会等到所有的Promise都完成。
如果想要等到所有Promise都完成后，无论它们被拒绝还是成功，可以使用Promise.allSettled。此方法在ES2020的最终版本中。
const PromiseArray = [ Promise.resolve(100), Promise.reject(null), Promise.resolve("Data release"), Promise.reject(new Error('Something went wrong'))]; Promise.allSettled(PromiseArray).then(res =>{ console.log(res); }).catch(err => console.log(err)); //[ //{status: "fulfilled", value: 100}, //{status: "rejected", reason: null}, //{status: "fulfilled", value: "Data release"}, //{status: "rejected", reason: Error: Something went wrong ...} //]上述就是小编为大家分享的10个超级实用的Javascript 技巧是怎么样的了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注编程网html频道。
--结束END--
本文标题: 10个超级实用的Javascript 技巧是怎么样的
本文链接: https://www.lsjlt.com/news/82473.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0