js高级写法

 

名称	一般写法	优化
取整(不四舍五入)	var a='12.534324' parseInt(a,10); Math.floor(a); a>>0;      //12	~~a;     //12 a|0;
取整(四舍五入）	var a='12.534324' Math.round(a); num.toFixed(0)	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"