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

开发 前端
众所周知,JavaScript 一直在快速变化。在新的 ES2020 中,有很多很棒的特性,我们大都已经迫不及待尝试了。老实说,有时我们可以用不同角度来编写代码,同样也能达到相同的效果,而且有的还会更简短,更清晰。

 众所周知,JavaScript 一直在快速变化。在新的 ES2020 中,有很多很棒的特性,我们大都已经迫不及待尝试了。老实说,有时我们可以用不同角度来编写代码,同样也能达到相同的效果,而且有的还会更简短,更清晰。

[[332030]]

下面是列出一些 JavaScript 有用的技巧,相信总有一天会对你有所帮助。

1.方法参数验证

ES6 中可以为函数的参数设置默认值,有了这个,我们可以实现一个验证方法参数不能为空的巧妙技巧。

  1. const isRequired = () => {  
  2.   throw new Error('param is required'
  3.  
  4. const print = (num = isRequired()) => {  
  5.   console.log(`printing ${num}`)  
  6.  
  7. print(2) //printing 2 
  8. print() // error 
  9. print(null) //printing null 

2.格式化JSON代码

我们都非常熟悉JSON.stringify,但比较少知道的是它还可以进行格式化的输出。

stringify 方法有三个参数:value,replacer和space。其中,后两个是可选参数,这也是我们很少知道它的原因。要缩进JSON,必须使用space参数。

  1. console.log(JSON.stringify({name:"John",Age:23},null,'\t')); 
  2. >>>  
  3.  "name""John"
  4.  "Age": 23 

3.从数组中获取惟一的值

要从数组中获得唯一的值,需要使用filter方法过滤掉重复的值。但是有了新的Set原生对象,事情就变得非常简单了。

  1. let uniqueArray = [...new Set([1, 2, 3, 3,3,"school","school",'ball',false,false,true,true])]; 
  2.  
  3. >>> [1, 2, 3, "school""ball"falsetrue

4.从数组中删除虚值

在某些情况下, 我们想从数组中删除虚值。虚值是 JavaScript 中的值为FALSE的值。JavaScript 中只有六个虚值,它们是:

  • undefined
  • null
  • NaN
  • 0
  • '' (空字符)
  • false

过滤这些虚值的最简单方法是使用下面的函数:

  1. myArray.filter(Boolean) 

如果要对数组进行一些修改,然后过滤新数组,则可以尝试这样的操作。请记住,原始myArray保持不变。

  1. myArray 
  2.     .map(item => { 
  3.         // Do your changes and return the new item 
  4.     }) 
  5.     .filter(Boolean); 

5.合并多个对象

实际需求中,我们经常需要合并多个对照,快速的做法可以像下面这么做:

  1. const user = {  
  2.  name'John Ludwig',  
  3.  gender: 'Male'  
  4.  
  5. const college = {  
  6.  primary'Mani Primary School',  
  7.  secondary: 'Lass Secondary School'  
  8. const skills = {  
  9.  programming: 'Extreme',  
  10.  swimming: 'Average',  
  11.  sleeping: 'Pro'  
  12.  
  13. const summary = {...user, ...college, ...skills} 

6.排序数字数组

JavaScript 数组带有内置的sort方法。默认情况下,此sort方法将数组元素转换为字符串,并对其进行字典排序。但这在对数字数组进行排序时,会有问题,解决方法就是手写一个排序方法。

  1. [0,10,4,9,123,54,1].sort((a,b) => a-b) 
  2.  
  3. >>> [0, 1, 4, 9, 10, 54, 123] 

7.禁用鼠标右键

有些情况,我们想在网页上禁用鼠标的右键,可以使用下面的方式来禁用:

  1. <body oncontextmenu="return false"
  2.   <div></div> 
  3. </body> 

这个简单的代码就可以禁用右键单击。

8.在解构中使用别名

解构赋值是一个JavaScript表达式,它可以将数组中的值或对象中的属性解构缩不同的变量中。不必使用现有的对象变量,我们可以根据自己的偏好重命名它们。

  1. const object = { number: 10 } 
  2.  
  3. const { number } = object 
  4.  
  5. // 使用别名 
  6. const { number: otherNumber } = object 
  7.  
  8. console.log(otherNumber) //10 

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

如果要获取数组的末尾元素,可以使用slice方法。

  1. let array = [0, 1, 2, 3, 4, 5, 6, 7]  
  2. console.log(array.slice(-1)) 
  3. >>>[7] 
  4.  
  5. console.log(array.slice(-2)) 
  6. >>>[6, 7] 
  7.  
  8. console.log(array.slice(-3)) 
  9. >>>[5, 6, 7] 

10. 等待 Promises

在某些情况下,我们需要等待多个Promise结束,这里,我们使用Promise.all。

  1. const PromiseArray = [ 
  2.     Promise.resolve(100), 
  3.     Promise.reject(null), 
  4.     Promise.resolve("Data release"), 
  5.     Promise.reject(new Error('Something went wrong'))]; 
  6. Promise.all(PromiseArray) 
  7.   .then(data => console.log('all resolved! here are the resolve values:', data)) 
  8.   .catch(err => console.log('got rejected! reason:', err)) 

关于Promise.all需要注意的一件事是,当一个Promise拒绝时,该方法将引发错误。这意味着我们的代码将不会等到所有的Promise都完成。

如果想要等到所有Promise都完成后,无论它们被拒绝还是成功,可以使用Promise.allSettled。此方法在ES2020的最终版本中。

  1. const PromiseArray = [ 
  2.     Promise.resolve(100), 
  3.     Promise.reject(null), 
  4.     Promise.resolve("Data release"), 
  5.     Promise.reject(new Error('Something went wrong'))]; 
  6. Promise.allSettled(PromiseArray).then(res =>{ 
  7. console.log(res); 
  8. }).catch(err => console.log(err)); 
  9. //[ 
  10. //{status: "fulfilled", value: 100}, 
  11. //{status: "rejected", reason: null}, 
  12. //{status: "fulfilled", value: "Data release"}, 
  13. //{status: "rejected", reason: Error: Something went wrong ...} 
  14. //] 

作者:Mahdhi Rezvi 译者:前端小智 来源:medium

原文:https://blog.bitsrc.io/10-super-useful-tricks-for-javascript-developers-f1b76691199b

本文转载自微信公众号「 大迁世界」,可以通过以下二维码关注。转载本文请联系 大迁世界公众号。

 

责任编辑:武晓燕 来源: 大迁世界
相关推荐

2023-08-22 10:25:19

CSS动画网页

2021-03-15 08:13:19

JavaScript开发代码

2014-10-13 11:05:55

程序员实用技术

2023-12-19 13:31:00

CSS前端技巧

2024-02-26 08:20:00

CSS开发

2024-08-21 14:55:02

2023-11-26 17:54:07

JavaScript开发

2023-08-11 17:39:43

JavaScriptWeb 应用程序

2023-06-28 00:02:40

2023-08-18 15:12:00

JavaScript开发

2023-07-18 07:56:31

工具reduce业务

2016-05-10 10:16:13

JavaScript技巧

2023-05-04 23:54:02

JavaScrip代码技巧

2017-10-30 17:25:11

javascript

2011-08-11 10:38:50

windows7技巧Windows7技巧

2024-09-06 15:48:13

2023-06-26 00:01:11

2021-11-30 07:01:19

Python自动化脚本

2019-06-14 14:15:07

Javascript调试技巧代码

2013-09-26 10:39:35

Windows 7优化技巧
点赞
收藏

51CTO技术栈公众号