這篇文章我們一起來看一下JavaScript的18個優化技巧,適合所有正在使用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
)
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 includesconst 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} )
// Bad let test const checkReturn = () => { if (test !== undefined) { return test; } else { return callMe('test'); } } // Good const checkReturn = () => { return test || callMe('test'); }
const test1 =() => { console.log('test1'); } const test2 =() => { console.log('test2'); } const test3 = 1; if (test3 == 1) { test1() } else { test2() } // Good test3 === 1? test1():test2()
// 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();
// 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`
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'] **/
//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))
//Bad Math.pow(2,3)// 8 //good 2**3 // 8
//old syntax let number = 98234567 //new syntax let number = 98_234_567
1.replaceAll
():傳回一個新字串,其中所有符合的模式都被新的替換詞取代。
2.Promise.any
():需要一個可迭代的Promise對象,當一個Promise完成時,傳回一個有值的Promise。
3.weakref
:此物件持有對另一個物件的弱引用,不阻止該物件被垃圾收集。
4.FinalizationRegistry
:讓你在物件被垃圾回收時請求回呼。
5.私有方法:方法與存取器的修飾符:私有方法可以用#宣告。
6.邏輯運算子:&&和||運算子。
7.Intl.ListFormat
:此物件啟用對語言敏感的清單格式。
8.Intl.DateTimeFormat
:此物件啟用對語言敏感的日期和時間格式。
【推薦學習:javascript進階教學】
以上是18個你需要知道的JavaScript優化技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章!