|
名称 |
一般写法 | 优化 |
| 取整(不四舍五入) |
parseInt(a,10); //Before Math.floor(a); //Before a>>0; //Before |
~~a; //After a|0; //After |
| 取整(四舍五入） |
Math.round(a); //Before |
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
}