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:

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

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

 //method3switch(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;}

优化后

 //method4var 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'    
};//NodeListvar nodeList = document.querySelectorAll('li');//argumentsfunction 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 οnclick="getIndex()"></li>
</ul>//jsfunction getIndex() {var evt = window.event;var target = evt.target;return [].indexOf.call(document.querySelectorAll('li'), target);// 返回1
}