|
|
一般写法 | 优化 |
| 取整(不四舍五入) |
var a=‘12.534324‘ parseInt(a,10); Math.floor(a); a>>0; //12 |
~~a; //12 a|0;
|
| 取整(四舍五入） |
var a=‘12.534324‘ Math.round(a); |
a+.5|0; //13 |
| 未定义 |
undefined; |
void 0; // 快 0[0]; // 略慢 |
| 布尔值短写法 |
true; |
!0; |
| 串连字符串 |
var a=‘a‘,b=4,c=‘c‘; ‘‘+a+b+c; |
‘‘.concat(a, b, c); |
| 字符串截取 |
var str=‘apple‘ str.charAt(0); |
str[0] |
| 获取数组是否存在元素 | 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" - false
!!~someText.indexOf(‘java‘); // - true
五、将有length属性的对象转化为数组
比如带有length属性的自定义对象，NodeList，parameters等。
转化：
var arr = { length : 2 , 0 : ‘first‘ , 1 : ‘second‘ };
1、Array. prototype . slice . call (arr) //["first", "second"]
2、Array.from(arr) //
["first", "second"]
六、获取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
}