|
|
一般写法 | 优化 |
| 取整(不四舍五入) |
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
}
七、判断类型 instanceof
let data = [1] console.log(data instanceof Array) // true
八、if else 高级写法
if(a >=5){
alert(“你好”);
}
可以写成：
a >= 5 && alert("你好");
代码：var attr = true && 4 && “aaa”; 那么运行的结果attr就不是简单的true或这false，而是”aaa”
代码：var attr = attr || “”;这个运算经常用来判断一个变量是否已定义，如果没有定义就给他一个初始值，这在给函数的参数定义一个默认值的时候比较有用。
出个题：
假设对成长速度显示规定如下：
成长速度为5显示1个箭头；
成长速度为10显示2个箭头；
成长速度为12显示3个箭头；
成长速度为15显示4个箭头；
其他都显示都显示0各箭头。
用代码怎么实现？
用if，else：
var add_level = 0;
if(add_step == 5){
add_level = 1;
}
else if(add_step == 10){
add_level = 2;
}
else if(add_step == 12){
add_level = 3;
}
else if(add_step == 15){
add_level = 4;
}
else {
add_level = 0;
}
稍好些的switch
var add_level = 0;
switch(add_step){
case 5 : add_level = 1;
break;
case 10 : add_level = 2;
break;
case 12 : add_level = 3;
break;
case 15 : add_level = 4;
break;
default : add_level = 0;
break;
}
如果需求改成：
成长速度为>12显示4个箭头；
成长速度为>10显示3个箭头；
成长速度为>5显示2个箭头；
成长速度为>0显示1个箭头；
成长速度为<=0显示0个箭头
那么用switch实现起来也很麻烦了。
那么你有没有想过用一行就代码实现呢？
ok，让我们来看看js强大的表现力吧：
var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0;
更强大的，也更优的：
var add_level={'5':1,'10':2,'12':3,'15':4}[add_step] || 0;
第二个需求：
var add_level = (add_step>12 && 4) || (add_step>10 && 3) || (add_step>5 && 2) || (add_step>0 && 1) || 0;
更严谨的写法!!
!!的作用是把一个其他类型的变量转成的bool类型
typeof 5 //"number" typeof !!5 //"boolean"