大伙兒好~，我是小鹿，公眾號：「小鹿影片學編程」 原創作者，

時隔半年我又回來了，期間發生了很多事情，從大學剛畢業來到一線找作業，也由于今年出現的特殊情況，掘金斷就更了一段時間，嗯～，就不給自己找借口啦，現在全部安頓好了，把精力開始慢慢回歸到寫作上，希望在 2021 新的一年和大伙兒一起在掘金成長！

2021 第一期，

本篇文章整理了在日常開發中 30 個常見的 JavaScript 代碼優化方案，

本文章已在 Github blog 收錄，歡迎大伙兒～ Star，文章中若存在不足或者 issues，歡迎在下方或 Github 留言！

1、NUll、Undefined、''檢查

我們在創建新變數賦予一個存在的變數值的時候，并不希望賦予 null 或 undefined，我們可以采用一下簡潔的賦值方式，

if(test !== null || test !== undefined || test !== ''){
  let a1 = test;
}

// 優化后
let a1 = test || ''

2、null 值檢查并賦予默認值

let test = null;
let a1 = test || '';

3、undefined 值檢查并賦予默認值

let test = undefined;
let a1 = test || '';

4、空值合并運算子（??）

空值合并運算子（??）是一個邏輯運算子,當左側的運算元為 null 或者 undefined 時，回傳其右側運算元，否則回傳左側運算元，

const test= null ?? 'default string';
console.log(test);

console.log(foo); // expected output: "default string"

const test = 0 ?? 42;
console.log(test); // expected output: 0

具體介紹可戳這 MDN

5、宣告變數

當我們想要宣告多個共同型別或者相同值的變數時，我們可以采用一下簡寫的方式，

let test1;
let test2 = 0;

//  優化后
let test1, test2 = 0;

6、if 多條件判斷

當我們進行多個條件判斷時，我們可以采用陣列 includes 的方式來實作簡寫，

if(test === '1' || test === '2' || test === '3' || test === '4'){
  // 邏輯
}

// 優化后
if(['1','2','3','4'].includes(test)){
  // 邏輯處理
}

7、if...else 的簡寫

當存在一層或兩層 if...else嵌套時，我們可以使用三元運算子來簡寫，

let test = null;
if(a > 10) {
  test = true;
} else {
  test = false;
}

// 優化后
let test = a > 10 ? true : false;
// 或者
let test = a > 10;

8、多變數賦值

當我們想給多個變數賦不同的值的時候，我們可以采用一下簡潔的速記方案，

let a = 1;
let b = 2;
let c = 3;

// 優化
let [a, b, c] = [1, 2, 3];

9、算術運算簡寫優化

當我們在開發中經常用到算數運算子時，我們可以使用一下方式進行優化和簡寫，

let a = 1;
a = a + 1;
a = a - 1;
a = a * 2;

// 優化
a++;
a--;
a *= 2;

10、有效值判斷

我們經常會在開發中用到的，在這也簡單整理一下，

if (test1 === true)
if (test1 !== "")  
if (test1 !== null)

// 優化
if (test1)

11、多條件(&&)判斷

我們通常在專案中遇到條件判斷后跟函式執行，我們可以使用一下簡寫方式，

if (test) {
 foo(); 
} 

//優化
test && foo();

12、多個比較 return

在 return 的陳述句中使用比較，可以將其進行縮寫的形式如下，

let test;
function checkReturn() {
    if (!(test === undefined)) {
        return test;
    } else {
        return foo('test');
    }
}

// 優化
function checkReturn() {
    return test || foo('test');
}

13、Switch 的縮寫

遇到如下形式的 switch 陳述句，我們可以將其條件和運算式以鍵值對的形式存盤，

switch (type) {
  case 1:
    test1();
  break;
  case 2:
    test2();
  break;
  case 3:
    test();
  break;
  // ......
}

// 優化
var obj = {
  1: test1,
  2: test2,
  3: test
};

obj[type] && obj[type]();

14、for 回圈縮寫

for (let i = 0; i < arr.length; i++)

// 優化
for (let i in arr) or  for (let i of arr)

15、箭頭函式

function add() {
  return a + b;
}

// 優化
const add = (a, b) => a + b;

16、短函式呼叫

function fn1(){
  console.log('fn1');
}

function fn2(){
  console.log('fn1');
}

if(type === 1){
  fn1();
}else{
  fn2();
}

// 優化
(type === 1 ? fn1 : fn2)();

17、陣列合并與克隆

const data1 = [1, 2, 3];
const data2 = [4 ,5 , 6].concat(data1);

// 優化
const data2 = [4 ,5 , 6, ...data1];

陣列克隆：

const data1 = [1, 2, 3];
const data2 = test1.slice()

// 優化
const data1 = [1, 2, 3];
const data2 = [...data1];

18、字串模版

const test = 'hello ' + text1 + '.'

// 優化
const test = `hello ${text}.` 

19、資料解構

const a1 = this.data.a1;
const a2 = this.data.a2;
const a3 = this.data.a3;

// 優化
const { a1, a2, a3 } = this.data;

20、陣列查找特定值

陣列按照索引來查找特定值，我們可以通過邏輯位運算子 ～ 來代替判斷，

“~”運算子（位非）用于對一個二進制運算元逐位進行取反操作

if(arr.indexOf(item) > -1) 

// 優化
if(~arr.indexOf(item))

// 或
if(arr.includes(item))

21、Object.entries()

我們可以通過 Object.values() 將物件的內容轉化為陣列，如下：

const data = { a1: 'abc', a2: 'cde', a3: 'efg' };
Object.entries(data);

/** 輸出:
[ [ 'a1', 'abc' ],
  [ 'a2', 'cde' ],
  [ 'a3', 'efg' ]
]
**/

22、Object.values()

const data = { a1: 'abc', a2: 'cde' };
Object.values(data);

/** 輸出:
[ 'abc', 'cde']
**/

23、求平方

Math.pow(2,3); 

// 優化
2**3；

24、指數簡寫

for (var i = 0; i < 10000; i++)

// 優化
for (var i = 0; i < 1e4; i++) {

25、物件屬性簡寫

let key1 = '1'; 
let key2 = 'b';
let obj = {key1: key1, key2: key2}; 

// 簡寫
let obj = {
  key1, 
  key2
};

26、字串轉數字

let a1 = parseInt('100'); 
let a2 = parseFloat('10.1'); 

// 簡寫 
let a1 = +'100'; 
let a2 = +'10.1';

🔥歷史文章

影片：《大前端吊打面試官系列》 之原生 JavaScript 精華篇

影片：用影片給面試官解釋 TCP 三次握手程序

?? 歡迎素質三連[點贊 + 收藏 + 評論]

我是小鹿，文章同步更新 Github，也可以在微信搜一搜「小鹿影片學編程」第一時間接收文章更新通知，回復“前端”可獲取小鹿整理的備戰面試小冊，