1. 含有多個(gè)條件的if語(yǔ)句

//longhand if(x === 'abc' || x === 'def' || x === 'ghi' || x == 'jkl'){//logic }//shorthand if(['abc','def','ghi','jkl'].includes(x)){//logic }

2. if…else的縮寫(xiě)法

當(dāng)我們?cè)趇f-else條件下的邏輯比較簡(jiǎn)單時(shí)，我們可以使用三元條件運(yùn)算符。

//longhand let test:boolean; if(x > 100){test = true }else{test = false } //shorthand let test = (x > 10) ? true : false;//or we can use directly let test = x > 10;console.log(test);

如果包含嵌套條件，也可以使用這種方法。

let x = 300; test2 = (x > 100) ? 'greater 100' : (x < 50) ? 'less 50' : 'between 50 and 100'console.log(tet2);//'greater 100'

3. 定義變量

當(dāng)我們想要定義兩個(gè)變量，并且這兩個(gè)變量擁有相的值或者類(lèi)型的話，我們可以運(yùn)用這種簡(jiǎn)略的表達(dá)方式。

// longhand let test = 1; let test2 = 3;//shorthand let test1, test2 = 1;

4. 關(guān)于Null,undefined的檢查

當(dāng)我們創(chuàng)建新的變量時(shí)，有時(shí)候需要檢查我們引用變量的值是否為null,或是否是undefined,js本身就有一種縮寫(xiě)法能實(shí)現(xiàn)這個(gè)功能。

//longhand if(test !== null || test1 !== undefined || test !== '' ){let test2 = test1; }//shorthand let test2 = test1 || '';

5. Null檢查與指定默認(rèn)值

let test1 = null, test2 = test || ''; conosle.log('null check',test2);//output will be ""

6. Undefined值檢查與默認(rèn)賦值

let test1 = undefined ,test2 = test1 || '' console.log("undefined check",test2);//output will be ""

正常值檢查

let test1 = 'test',test2 = test1 || '' console.log(test2);//output:'test'

7.聚合運(yùn)算符

？？ 是聚合運(yùn)算符，如果左值為null或undefined, 就返回右值。默認(rèn)值返回左值。

const test = null ?? 'default'; console.log(test); // expected output : 'default' const test1 = 0 ?? 2; console.log(test1); //expected output:0;

8. 為多個(gè)變量賦值

當(dāng)我們處理多個(gè)變量，想為不同的變量賦不同的值時(shí)，就會(huì)發(fā)現(xiàn)這種簡(jiǎn)略的表達(dá)方式的實(shí)用之處了。

// longhand let test1 , test2 , test3; test1 = 1; test2 = 2; test3 = 3;//shorthangd let [test1, test2, test3] = [1,2,3]

9. 賦值運(yùn)算符簡(jiǎn)略的表達(dá)方式

通常，我們會(huì)在程序中處理大量的算術(shù)運(yùn)算符。而對(duì)于JavaScript變量的賦值運(yùn)算符來(lái)說(shuō)，這是其中一個(gè)實(shí)用的技巧。

//longhand test1 = test1 + 1; test2 = test2 - 1; test3 = test3 * 20;//shorthand test1++; test2--; test3*=20;

10. 判斷變量是否存在的縮寫(xiě)法

這是我們工作中常用的縮寫(xiě)表達(dá)方式之一，如今它仍然值得被提起。

// langhand if(tets === true) or if(test !== "") or if(test !== null)//shorthand if(test1)

注意：如果test1有任何值，程序都會(huì)執(zhí)行if(test1){} 內(nèi)的邏輯，這種寫(xiě)法在判斷NULL或undefined值時(shí)普遍使用。

11. 多種條件下的與(&&)運(yùn)算符

如果我們只在變量為true的時(shí)候調(diào)用函數(shù)，那么我們就可以運(yùn)用&&運(yùn)算符。

//longhand if(test1){callMethod(); }//shorthand tets1 && callMethod();

12. foreach循環(huán)簡(jiǎn)略的表達(dá)方式

這是迭代常用的簡(jiǎn)略的表達(dá)方式技巧之一。

//longhand for(var i = 0; i<testData.length; i++)//shorthand for(let i in testData) or for(let i in testData)

每個(gè)變量的數(shù)組

function testData(element,index,array){console.log('test['+index+']='+element); } [11,24,32].forEach(testData); //log:test[0] = 11,test[1] = 24, test[2] = 32

13. 比較結(jié)果的返回值

在return語(yǔ)句中，我們也可以使用比較的語(yǔ)句。這樣，原來(lái)需要5行代碼才能實(shí)現(xiàn)的功能，現(xiàn)在只需要1行，大大減少了代碼量。

// langhand let test; function chechReturn(){if(!(test === undefined)){return test;}else{return callMe('test');} } var data = checkReturn(); console.log(data);//output testfunction callMe(val){console.log(val) }//shorthand function checkReturn(){return test || callMe('test') }

14. 箭頭函數(shù)

//longhand function add(a,b){return a + b; }//shorthand const add = (a,b) => a + b;

更多實(shí)例如下

function callMe(){console.log("Hello",name); } callMe = name => console.log("Hello", name);

15. 調(diào)用短函數(shù)

我們可以運(yùn)用三元運(yùn)算符實(shí)現(xiàn)如下功能

// longhand function test1(){console.log('test'); } function test2(){console.log('test2') } var test3 = 1; if(test3 == 1){tet(1); }else{test2() }//shorthand (test3 === 1 ? tets1 : test2)();

寫(xiě)在最后

以上就是今天的干貨分享內(nèi)容**《使用現(xiàn)代JavaScript技術(shù)優(yōu)化代碼的34種方法（上）》**

轉(zhuǎn)載自：小渡

總結(jié)

以上是生活随笔為你收集整理的优化JS代码的34种方法（上）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。