JavaScript優化技巧有哪些

這篇文章主要介紹“JavaScript優化技巧有哪些”，在日常操作中，相信很多人在JavaScript優化技巧有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JavaScript優化技巧有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

1. 多個條件的判斷

當我們需要進行多個值的判斷時，我們可以使用數組的includes方法。

//Bad
if (x === 'iphoneX' || x === 'iphone11' || x === 'iphone12') {
//code... 
}
//Good
if (['iphoneX', 'iphone11', 'iphone12'].includes(x)) {
//code...
}

2. If true … else

當if-else條件的內部不包含更大的邏輯時，三目運算符會更好。

// Bad
let test= boolean;
if (x > 100) {
test = true;
} else {
test = false;
}
// Good
let test = (x > 10) ? true : false;
//or we can simply use
let test = x > 10;

嵌套條件后，我們保留如下所示的內容（復雜點的三目）：

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

3. Null、Undefined、’’ 空值檢查

有時要檢查我們為值引用的變量是否不為null或Undefined 或 '' ,我們可以使用短路寫法

// Bad
if (first !== null || first !== undefined || first !== '') {
let second = first;
}
// Good 短路寫法
let second = first|| '';

4. 空值檢查和分配默認值

當我們賦值，發現變量為空需要分配默認值 可以使用以下短路寫法

let first = null,
let second = first || 'default'
console.log(second)

4. 雙位操作符

位操作符是 JavaScript 初級教程的基本知識點，但是我們卻不常使用位操作符。因為在不處理二進制的情況下，沒有人愿意使用 1 和 0。

但是雙位操作符卻有一個很實用的案例。你可以使用雙位操作符來替代 Math.floor( )。雙否定位操作符的優勢在于它執行相同的操作運行速度更快

// Bad
Math.floor(4.9) === 4  //true
// Good
~~4.9 === 4  //true

5. ES6常見小優化 - 對象屬性

const x,y = 5
// Bad
const obj = { x:x, y:y }
// Good
const obj = { x, y }

6. ES6常見小優化-箭頭函數

//Bad
function sayHello(name) {
  console.log('Hello', name);
}
setTimeout(function() {
  console.log('Loaded')
}, 2000)
list.forEach(function(item) {
  console.log(item)
})
// Good
const sayHello = name => console.log('Hello', name)
setTimeout(() => console.log('Loaded'), 2000)
list.forEach(item => console.log(item))

7. ES6常見小優化-隱式返回值

返回值是我們通常用來返回函數最終結果的關鍵字。只有一個語句的箭頭函數，可以隱式返回結果（函數必須省略括號（{ }），以便省略返回關鍵字）。

要返回多行語句（例如對象文本），需要使用（）而不是{ }來包裹函數體。這樣可以確保代碼以單個語句的形式進行求值。

//Bad
function calcCircumference(diameter) {
  return Math.PI * diameter
}
// Good
const calcCircumference = diameter => (
  Math.PI * diameter
)

8. ES6常見小優化-解構賦值

const form = { a:1, b:2, c:3 }
//Bad
const a = form.a
const b = form.b
const c = form.c
// Good
const { a, b, c } = form

9. ES6常見小優化-展開運算符

返回值是我們通常用來返回函數最終結果的關鍵字。只有一個語句的箭頭函數，可以隱式返回結果（函數必須省略括號（{ }），以便省略返回關鍵字）。

要返回多行語句（例如對象文本），需要使用（）而不是{ }來包裹函數體。這樣可以確保代碼以單個語句的形式進行求值。

const odd = [ 1, 3, 5 ]
const arr = [ 1, 2, 3, 4 ]
// Bad
const nums = [ 2, 4, 6 ].concat(odd)
const arr2 = arr.slice( )
// Good
const nums = [2 ,4 , 6, ...odd]
const arr2 = [...arr]

10. 數組常見處理

掌握數組常見方法，記在腦子里，不要寫的時候再去看API了，這樣可以有效提升編碼效率，畢竟這些方法每天都在用

every some filter map forEach find findIndex reduce includes

const arr = [1,2,3]
//every 每一項都成立，才會返回true
console.log( arr.every(it => it>0 ) ) //true
//some 有一項都成了，就會返回true
console.log( arr.some(it => it>2 ) ) //true
//filter 過濾器
console.log( arr.filter(it => it===2 ) ) //[2]
//map 返回一個新數組
console.log( arr.map(it => it==={id:it} ) ) //[ {id:1},{id:2},{id:3} ]
//forEach 沒有返回值
console.log( arr.forEach(it => it===console.log(it)) ) //undefined
//find 查找對應值 找到就立馬返回符合要求的新數組
console.log( arr.find(it => it===it>2) ) //3
//findIndex 查找對應值 找到就立馬返回符合要求新數組的下標
console.log( arr.findIndex(it => it===it>2) ) //2
//reduce 求和或者合并數組
console.log( arr.reduce((prev,cur) => prev+cur) ) //6
//includes 求和或者合并數組
console.log( arr.includes(1) ) //true
//數組去重
const arr1 = [1,2,3,3]
const removeRepeat = (arr) => [...new Set(arr1)]//[1,2,3]
//數組求最大值
Math.max(...arr)//3
Math.min(...arr)//1
//對象解構 這種情況也可以使用Object.assign代替
let defaultParams={
    pageSize:1,
    sort:1
}
//goods1
let reqParams={
    ...defaultParams,
    sort:2
}
//goods2
Object.assign( defaultParams, {sort:2} )

11. 比較返回

在return語句中使用比較可以將代碼從5行減少到1行。

// Bad
let test
const checkReturn = () => {
    if (test !== undefined) {
        return test;
    } else {
        return callMe('test');
}
}
// Good
const checkReturn = () => {
return test || callMe('test');
}

12. 短函數調用

我們可以使用三元運算符來實現這類函數。

const test1 =() => {
  console.log('test1');
}
const test2 =() => {
  console.log('test2');
}
const test3 = 1;
if (test3 == 1) {
  test1()
} else {
  test2()
}
// Good
test3 === 1? test1():test2()

13.switch代碼塊(ifelse代碼塊)簡寫

我們可以將條件保存在key-value對象中，然后可以根據條件使用。

// Bad
switch (data) {
  case 1:
    test1();
  break;
  case 2:
    test2();
  break;
  case 3:
    test();
  break;
  // And so on...
}
// Good
const data = {
  1: test1,
  2: test2,
  3: test
}
data[anything] && data[anything]()
// Bad
if (type === 'test1') {
  test1();
}
else if (type === 'test2') {
  test2();
}
else if (type === 'test3') {
  test3();
}
else if (type === 'test4') {
  test4();
} else {
  throw new Error('Invalid value ' + type);
}
// Good
const types = {
  test1: test1,
  test2: test2,
  test3: test3,
  test4: test4
};
const func = types[type];
(!func) && throw new Error('Invalid value ' + type); func();

14. 多行字符串簡寫

當我們在代碼中處理多行字符串時，可以這樣做：

// Bad
const data = 'abc abc abc abc abc abc\n\t'
+ 'test test,test test test test\n\t'
// Good
const data = `abc abc abc abc abc abc
         test test,test test test test`

15. Object.entries() Object.values() Object.keys()

Object.entries() 該特性可以將一個對象轉換成一個對象數組。

Object.values()可以拿到對象value值

Object.keys()可以拿到對象key值

const data = { test1: 'abc', test2: 'cde' }
const arr1 = Object.entries(data)
const arr2 = Object.values(data)
const arr3 = Object.keys(data)
/** arr1 Output:
[ 
    [ 'test1', 'abc' ],
    [ 'test2', 'cde' ],
]
**/
/** arr2 Output:
['abc', 'cde']
**/
/** arr3 Output:
['test1', 'test2']
**/

16. 多次重復一個字符串

為了多次重復相同的字符，我們可以使用for循環并將它們添加到同一個循環中，如何簡寫呢？

//Bad 
let test = ''; 
for(let i = 0; i < 5; i ++) { 
  test += 'test,'; 
} 
console.log(str);// test,test,test,test,test,
//good 
console.log('test,'.repeat(5))

17. 冪的簡寫

數學指數冪函數的good如下：

//Bad 
Math.pow(2,3)// 8
//good 
2**3 // 8

18. 數字分隔符

你現在只需使用 _ 即可輕松分隔數字。這將使處理大量數據變得更加輕松。

//old syntax
let number = 98234567
//new syntax
let number = 98_234_567

如果你想使用JavaScript最新版本（ES2021/ES12）的最新功能，請檢查以下內容：

• 1.replaceAll()：返回一個新字符串，其中所有匹配的模式都被新的替換詞替換。

• 2.Promise.any()：需要一個可迭代的Promise對象，當一個Promise完成時，返回一個帶有值的Promise。

• 3.weakref：此對象持有對另一個對象的弱引用，不阻止該對象被垃圾收集。

• 4.FinalizationRegistry：讓你在對象被垃圾回收時請求回調。

• 5.私有方法：方法和訪問器的修飾符：私有方法可以用#聲明。

• 6.邏輯運算符：&&和||運算符。

• 7.Intl.ListFormat：此對象啟用對語言敏感的列表格式。

• 8.Intl.DateTimeFormat：該對象啟用對語言敏感的日期和時間格式。

到此，關于“JavaScript優化技巧有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！