文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

10个自己遵循的 JavaScript 技巧和实践,赶紧收藏吧!

2024-12-03 01:23

关注

废话不多说,直接安排上。

1.使用数字分隔符

当我需要处理大的数字时,这是最常用的运算符之一。当在数字中使用分隔符(只有一个_)时,它看起来比没有分隔的数字要好。例如:

  1. let number = 98234567 

可以这么写

  1. let number = 98_234_567 

而且它也适用于任何其他进制数。

  1. const binary = 0b1000_0101; 
  2. const hex = 0x12_34_56_78; 

几个注意事项:

在前导0后不能使用。

  1. let num= 0_12 

不允许出现在数字的末尾。

  1. let num= 500_ 

2.始终使用分号

使用分号终止行是一种很好的做法。如果忘记了,不会被警告,因为在大多数情况下,它将被JavaScript解析器插入,但依赖于自动分号插入(ASI)是不鼓励的。

谷歌,Airbnb和jQuery的JS风格指南,也推荐使用分号终止行。

3.不要忘记var

当你第一次为一个变量赋值时,一定要确保你没有对一个未声明的变量进行赋值。

对未声明的变量的赋值会自动导致一个全局变量的创建。避免全局变量?

全局变量很容易被其他脚本覆盖。例如,如果应用程序的两个独立部分定义了具有相同名称但用途不同的全局变量,那么可能会导致不可预测的错误,调试此类问题将是一个可怕的经历。

通常函数中的变量应该是局部的,这样当你执行完函数时它们就会释放。

4. Delete vs Splice

使用splice而不是使用delete从一个数组中删除一个项。使用delete会删除对象的属性,但不会重置索引数组或更新其长度。

Delete

  1. > myArray = ['a''b''c''d'
  2.   ["a""b""c""d"
  3. delete myArray[0] 
  4.   true 
  5. > myArray[0] 
  6.   undefined 

请注意,事实上它并没有被设置为undefined的值,而是将该属性从数组中移除,使其看起来undefined。这个大家可以在控制把 myArray 打印就出看就知道 了。

Splice

Splice() 实际上删除了元素,重置了索引,并改变了数组的长度。

  1. > myArray = ['a''b''c''d'
  2.   ["a""b""c""d"
  3. > myArray.splice(0, 2) 
  4.   ["a""b"
  5. > myArray 
  6.   ["c""d"

delete方法应该用于删除对象属性。

5. map vs for loop

使用map()函数遍历数组的项

  1. var squares = [1,2,3,4].map(function (val) {   
  2.     return val * val;   
  3. });  
  4.  
  5. //  [1, 4, 9, 16] 

**Immutability ** - 原来的数组将不受影响。在其他地方仍然需要原始数组的情况下,这是有好处的。for 循环当然也可以实现,但是这需要更多的代码,并且需要更新我们的新数组作为循环操作的一部分。另一方面,map()可以保持这种清洁,因为你只需要在一个作用哉内工作,仍然可以保持不变性。

Cleaner code - 当做相同的事情时,map几乎总是可以用比for更少的代码来写。它有时可以清楚地写在一行上,而for至少需要两行或一般需要三行,并包括括号。另外,作用域隔离和减少你所需要的变量数量以及减少的大小都使代码客观上更干净。

6. 四舍五入的数字

toFixed() 方法使用定点表示法来格式化一个数值。

  1. var pi =3.1415; 
  2. pi = pi.toFixed(2);  // pi will be equal to 3.14 

注意:toFixed()返回的是字符串而不是数字。

7.使用 console.table

  1. table=[{state: "Texas"},{state: "New York"},{state: "Chicago"}] 
  2. console.table(table

可以使用console.table来以表格的形式显示对象。

8. 避免在循环中使用 try-catch

每次执行catch子句时,try-catch结构都会在当前作用域内创建一个新的变量,其中捕获的异常对象被分配给一个变量。

  1. var object = ['foo''bar'], i;   
  2. for (i = 0, len = object.length; i 
  3.     try {   
  4.         // do something that throws an exception  
  5.     }   
  6.     catch (e) {    
  7.         // handle exception   
  8.     }  

第二种写法

  1. var object = ['foo''bar'], i;   
  2. try {  
  3.     for (i = 0, len = object.length; i 
  4.         // do something that throws an exception  
  5.     }  
  6. }  
  7. catch (e) {    
  8.     // handle exception   
  9. }  

当一个错误发生时,第一个让你继续循环,而第二个则退出循环。如果你的代码抛出的异常没有严重到足以停止整个程序,那么第一个适合。

9. 多个条件检查

对于多值匹配,我们可以把所有的值放在一个数组中,并使用indexOf()或includes()方法。

  1. if (value === 1 || value === 'one' || value === 2 || value === 'two') {  
  2.  
  3. }  

indexOf():

  1. if ([1, 'one', 2, 'two'].indexOf(value) >= 0) {  
  2.  

includes():

  1. if ([1, 'one', 2, 'two'].includes(value)) {  
  2.  

10. 双非位运算符(~~)

双非位运算符是可以看作是Math.floor()方法的替代品。

  1. const floor = Math.floor(6.8); // 6  

也可以这样写:

  1. const floor = ~~6.8; // 6 

双非位操作符方法只适用于32位整数。因此,对于任何比这更高的数字,建议使用Math.floor()

总结

最后的建议 - 不要使用随意的编码风格。要有一个执行标准。

~完,我是小智,整理完,准备来盘 LoL ,记得点赞关注,发财致富哦~

作者:Apoorv Tyagi 译者:前端小智 来源:dev

 

原文:https://dev.to/apoorvtyagi/javacript-tips-and-best-practices-48ma

 

来源: 大迁世界内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯