欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js高手進階實用語法的高級寫法

 更新時間：2023年08月26日 15:50:47   投稿：yin  
這篇文章主要介紹了js高手進階實用語法的高級寫法的相關(guān)資料,需要的朋友可以參考下

一、常見寫法優(yōu)化

名稱

一般寫法優(yōu)化
取整(不四舍五入)

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]
獲取數(shù)組是否存在元素for循環(huán)[1, 2, 3].indexOf(2);

二、優(yōu)化嵌套的條件語句

可優(yōu)化大量的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;
     }

優(yōu)化后

//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實現(xiàn)contains功能

before:

var someText = 'javascript rules';
 if (someText.indexOf('javascript') !== -1) {
 }

after:

!!~someText.indexOf('tex'); // someText contains "tex" - false
!!~someText.indexOf('java'); // - true

五、將有l(wèi)ength屬性的對象轉(zhuǎn)化為數(shù)組

比如帶有l(wèi)ength屬性的自定義對象，NodeList，parameters等。

轉(zhuǎn)化：

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";
//運行的結(jié)果不是簡單的true或這false，而是”aaa”代碼：var attr = attr || “”;這個運算經(jīng)常用來判斷一個變量是否已定義，如果沒有定義就給他一個初始值，這在給函數(shù)的參數(shù)定義一個默認值的時候比較有用。

　　

到此這篇關(guān)于js高手進階實用語法的高級寫法的文章就介紹到這了,更多相關(guān)js高級寫法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論