javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js高级写法

js高手进阶实用语法的高级写法

投稿：yin

这篇文章主要介绍了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

1

2

let data = [1]

console.log(data instanceof Array) // true

　　

八、if else 高级写法

if(a >=5){
alert("你好");
}
//可以写成：
a >= 5 && alert("你好");
var attr = true && 4 && "aaa";
//运行的结果不是简单的true或这false，而是”aaa”代码：var attr = attr || “”;这个运算经常用来判断一个变量是否已定义，如果没有定义就给他一个初始值，这在给函数的参数定义一个默认值的时候比较有用。

　　

到此这篇关于js高手进阶实用语法的高级写法的文章就介绍到这了,更多相关js高级写法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文