tk挠痒痒网址发布页-秘密武器
历史搜索

前端开发遵循的10个JavaScript技巧和实践

游客2025-05-16 02:55:01
目录文章目录
  1. 1. 使用数字分隔符
  2. 2.始终使用分号
  3. 3.不要忘记 var
  4. 4. Delete vs Splice
  5. 5. map vs for loop
  6. 6. 四舍五入的数字
  7. 7.使用 console.table
  8. 8. 避免在循环中使用 try…catch
  9. 9. 多个条件检查
  10. 10. 双非位运算符 ~~
  11. 总结

本篇分享的是我在做前端开发过程中,自己遵循的一个 JavaScript 开发技巧性的东西,相信大家看完之后一定会有所收获,好了,废话不多说,直接安排上。

1. 使用数字分隔符

当我需要处理大的数字时,这是最常用的运算符之一。当在数字中使用分隔符(只有一个_)时,它看起来比没有分隔的数字要好,_分隔符也是 ES12 新增的特性,更多性的特性大家可以看看我的这篇文章《盘点 ES12 中有的新特性,你知道几个?》。例如:

let number = 98234567

可以这么写

let number = 98_234_567

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

const binary = 0b1000_0101;
const hex = 0x12_34_56_78;

需要注意的是:

(1)在前导0后不能使用。

let num= 0_12

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

let num= 500_

2.始终使用分号

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

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

3.不要忘记 var

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

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

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

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

4. Delete vs Splice

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

delete 方法
> myArray = ['a', 'b', 'c', 'd']
  ["a", "b", "c", "d"]
> delete myArray[0]
  true
> myArray[0]
  undefined

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

前端开发遵循的10个JavaScript技巧和实践 1

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

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

var object = ['foo', 'bar'], i;  
for (i = 0, len = object.length; i <len; i++) {  
    try {  
        // do something that throws an exception 
    }  
    catch (e) {   
        // handle exception  
    } 
}

第二种写法:

var object = ['foo', 'bar'], i;  
try { 
    for (i = 0, len = object.length; i <len; i++) {  
        // do something that throws an exception 
    } 
} 
catch (e) {   
    // handle exception  
}

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

9. 多个条件检查

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

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

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

}
includes()方法:
if ([1, 'one', 2, 'two'].includes(value)) { 

}

10. 双非位运算符 ~~

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

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

也可以这样写:

const floor = ~~6.8; // 6

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

总结

最后的建议,不要使用随意的编码风格。要有一个执行标准。感谢阅读,如果小伙伴们有更好的编码风格,欢迎留言补充。

本文是由用户"游客"发布,所有内容的版权归原作者所有。没有经过书面许可,任何单位或个人不得以任何形式复制、转载、引用本网站的内容。否则将追究法律责任。

相关专题