温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

10个超级实用的Javascript 技巧是怎么样的

发布时间:2021-09-30 16:06:54 来源:亿速云 阅读:111 作者:柒染 栏目:web开发

这期内容当中小编将会给大家带来有关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 null

2.格式化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) //10

9.获取数组中的最后一项

如果要获取数组的末尾元素,可以使用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 技巧是怎么样的了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI