1. 含有多個條件的if語句

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

2. if…else的縮寫法

當我們在if-else條件下的邏輯比較簡單時，我們可以使用三元條件運算符。

//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. 定義變量

當我們想要定義兩個變量，并且這兩個變量擁有相的值或者類型的話，我們可以運用這種簡略的表達方式。

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

4. 關于Null,undefined的檢查

當我們創建新的變量時，有時候需要檢查我們引用變量的值是否為null,或是否是undefined,js本身就有一種縮寫法能實現這個功能。

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

5. Null檢查與指定默認值

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

6. Undefined值檢查與默認賦值

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

正常值檢查

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

7.聚合運算符

？？ 是聚合運算符，如果左值為null或undefined, 就返回右值。默認值返回左值。

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

8. 為多個變量賦值

當我們處理多個變量，想為不同的變量賦不同的值時，就會發現這種簡略的表達方式的實用之處了。

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

9. 賦值運算符簡略的表達方式

通常，我們會在程序中處理大量的算術運算符。而對于JavaScript變量的賦值運算符來說，這是其中一個實用的技巧。

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

10. 判斷變量是否存在的縮寫法

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

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

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

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

如果我們只在變量為true的時候調用函數，那么我們就可以運用&&運算符。

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

12. foreach循環簡略的表達方式

這是迭代常用的簡略的表達方式技巧之一。

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

每個變量的數組

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. 比較結果的返回值

在return語句中，我們也可以使用比較的語句。這樣，原來需要5行代碼才能實現的功能，現在只需要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. 箭頭函數

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

更多實例如下

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

15. 調用短函數

我們可以運用三元運算符實現如下功能

// 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)();

寫在最后

以上就是今天的干貨分享內容**《使用現代JavaScript技術優化代碼的34種方法（上）》**

轉載自：小渡

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。