超实用的JavaScript技巧及最佳实践

Posted 2023-02-24 LisenYang

21. 使用逻辑AND/OR来处理条件语句

 
  
   
var foo = 10;  
foo == 10 && doSomething(); // is the same thing as if (foo == 10) doSomething(); 
foo == 5 || doSomething(); // is the same thing as if (foo != 5) doSomething();
  
  
   
   
    
     
     
    
   
   
  
 

逻辑AND也可以用来设置含糊参数缺省的值

 
  
   
Function doSomething(arg1) 
    Arg1 = arg1 || 10; // arg1 will have 10 as a default value if it’s not already set

  
  
   
   
    
     
     
    
   
   
  
 

22. 使用map()函数方法来循环数组里的项目

 
  
   
var squares = [1,2,3,4].map(function (val)   
    return val * val;  
); 
// squares will be equal to [1, 4, 9, 16] 
  
  
   
   
    
     
     
    
   
   
  
 

23. 按小数点后N位来四舍五入

 
  
   
var num =2.443242342;
num = num.toFixed(4);  // num will be equal to 2.4432
  
 

24. 浮点问题

 
  
   
0.1 + 0.2 === 0.3 // is false 
9007199254740992 + 1 // is equal to 9007199254740992  
9007199254740992 + 2 // is equal to 9007199254740994
  
  
   
   
    
     
     
    
   
   
  
 

为什么? 0.1 + 0.2 等于 0.30000000000000004 。你应该知道所有的javascript数字在64位2进制内部都是使用浮点表示

这个来自于IEEE 754标准。更多信息介绍，请参考：相关博客

你可以使用上面介绍的toFixed()和toPrecision()来解决这个问题

25. 使用for-in循环来检查对象的指定属性

下面的代码片段非常实用，可以避免从对象的prototype来循环遍历对象的属性：

 
  
   
for (var name in object)   
    if (object.hasOwnProperty(name))  
        // do something with name                    
      

  
  
   
   
    
     
     
    
   
   
  
 

26. 逗号操作符

 
  
   
var a = 0; 
var b = ( a++, 99 ); 
console.log(a);  // a will be equal to 1 
console.log(b);  // b is equal to 99
  
  
   
   
    
     
     
    
   
   
  
 

27. 缓存需要计算或者DOM查询的变量

使用jQuery的选择器，我们一定要记住缓存DOM元素，这样会提高执行效率：

 
  
   
var navright = document.querySelector('#right'); 
var navleft = document.querySelector('#left'); 
var navup = document.querySelector('#up'); 
var navdown = document.querySelector('#down');
  
  
   
   
    
     
     
    
   
   
  
 

28. 在传入isFinite()之前验证参数

 
  
   
isFinite(0/0) ; // false 
isFinite("foo"); // false 
isFinite("10"); // true 
isFinite(10);   // true 
isFinite(undifined);  // false 
isFinite();   // false 
isFinite(null);  // true  !!! 
  
  
   
   
    
     
     
    
   
   
  
 

 29. 避免数组中index为负值

 
  
   
以上是关于超实用的JavaScript技巧及最佳实践的主要内容，如果未能解决你的问题，请参考以下文章
 
 实践干货！超实用的响应式设计技巧
 Vue最佳实践和实用技巧
 超实用的JQuery小技巧
 《Python机器学习及实践》----模型实用技巧
 《Python机器学习及实践》----模型实用技巧
 2021年不可错过的17种JS优化技巧