js高级写法

名称	一般写法	优化
取整(不四舍五入)	parseInt(a,10); //Before Math.floor(a); //Before a>>0; //Before	~~a; //After a|0; //After
取整(四舍五入）	Math.round(a); //Before num.toFixed(0)	a+.5|0; //After
未定义	undefined; //Before	void 0; //After, 快 0[0]; //After, 略慢
布尔值短写法	true; //Before	!0; //After
串连字符串	''+a+b+c; //before	''.concat(a, b, c);
字符串截取	str.charAt(0); //before	str[0] //after
获取数组是否存在元素	for循环	[1, 2, 3].indexOf(2);

二、优化嵌套的条件语句

可优化大量的ifelse  switch语句

before:

//method1
     if (color) {
         if (color === 'black') {
             printBlackBackground();
         } else if (color === 'red') {
             printRedBackground();
         } else if (color === 'blue') {
             printBlueBackground();
         } else if (color === 'green') {
             printGreenBackground();
         } else {
             printYellowBackground();
         }
     }

 //method2
     switch(color) {
         case 'black':
             printBlackBackground();
             break;
         case 'red':
             printRedBackground();
             break;
         case 'blue':
             printBlueBackground();
             break;
         case 'green':
             printGreenBackground();
             break;
         default:
             printYellowBackground();
     }

 //method3
     switch(true) {
         case (typeof color === 'string' && color === 'black'):
             printBlackBackground();
             break;
         case (typeof color === 'string' && color === 'red'):
             printRedBackground();
             break;
         case (typeof color === 'string' && color === 'blue'):
             printBlueBackground();
             break;
         case (typeof color === 'string' && color === 'green'):
             printGreenBackground();
             break;
         case (typeof color === 'string' && color === 'yellow'):
             printYellowBackground();
             break;
     }

优化后

 //method4
     var colorObj = {
         'black': printBlackBackground,
         'red': printRedBackground,
         'blue': printBlueBackground,
         'green': printGreenBackground,
         'yellow': printYellowBackground
     };
     if (color in colorObj) {
       colorObj[color]();
     }

 

三、检查某对象是否有某属性

使用 hasOwnProperty和in

before:

var myObject = {
       name: '@tips_js'
    };
if (myObject.name) { }

after:

myObject.hasOwnProperty('name'); // true
'name' in myObject; // true
 
 myObject.hasOwnProperty('valueOf'); // false, valueOf 继承自原型链
 'valueOf' in myObject; // true

 

四、更简单的使用indexOf实现contains功能

before:

var someText = 'javascript rules';
 if (someText.indexOf('javascript') !== -1) {
 }

after:

!!~someText.indexOf('tex'); // someText contains "tex" - true

 

五、将有length属性的对象转化为数组

比如带有length属性的自定义对象，NodeList，parameters等。

//自定义对象

var myObj = {
  length: 3,
  0: 'a',
  1:'b',
  2:'c'    
};

//NodeList

var nodeList = document.querySelectorAll('li');

//arguments

function test(){
    if(arguments.length > 0) {}  
}

转化：

//[].slice.call(obj) 或者Array.prototype.slice.call(obj);

[].slice.call(nodeList)

//es6的Array.from(obj)

Array.from(nodeList);

 

六、获取DOM元素在父类中的索引

//html

<ul>
    <li></li>
    <li onclick="getIndex()"></li>
</ul>

//js

function getIndex() {
　　var evt = window.event;
   var target = evt.target;
   return [].indexOf.call(document.querySelectorAll('li'), target);// 返回1
}