12 個提升 JavaScript 開發(fā)效率的實用技巧
下面列出了 12 個 JavaScript 小技巧，這些技巧可以幫助你編寫更簡潔、高效的代碼。
如果你已經(jīng)在使用其中的一些技巧，那就鞏固一下吧！需要注意的是為了兼容舊版瀏覽器，記得按需注入墊片（polyfill）。
1. 空值合并運算符（??）
使用 ?? 來賦默認(rèn)值，當(dāng) ?? 的左側(cè)值為 null 或者 undefined 時，?? 就會使用右側(cè)的默認(rèn)值。
const placeholder = props.placeholder ?? '請輸入'
console.log(placeholder) // props.placeholder 為 null 或 undefined 時，輸出“請輸入”?? 對比函數(shù)或解構(gòu)默認(rèn)值，唯一的區(qū)別在于對 null 的處理，?? 如上在面對 null 時也會使用默認(rèn)值，而函數(shù)或解構(gòu)默認(rèn)值則會使用 null。
function foo(text = 'default') {
return text
}
let input1
console.log(input1 ?? 'default', foo(input1))
// 輸出 default default
const input2 = null
console.log(input2 ?? 'default', foo(input2))
// 輸出 default null
const input3 = 'value'
console.log(input3 ?? 'default', foo(input3))
// 輸出 value value在項目代碼中，也會看到使用邏輯或運算符 || 來賦默認(rèn)值，|| 運算符在左側(cè)值為 0、空字符串（''）、NaN、false、null、undefined 等 falsy 值時，都會使用默認(rèn)值。
let input1
console.log(input1 ?? 'default', input1 || 'default')
// 輸出 default default
const input2 = false
console.log(input2 ?? 'default', input2 || 'default')
// 輸出 false default
const input3 = 'value'
console.log(input3 ?? 'default', input3 || 'default')
// 輸出 value value故推薦使用 ?? 來賦默認(rèn)值，也可以使用函數(shù)或解構(gòu)默認(rèn)值，不過要注意 null 值，而 || 更適用于 if 等邏輯判斷。
2. 可選鏈操作符（?.）
可選鏈運算符（?.）用于訪問對象的屬性或方法，當(dāng)訪問的對象或方法是 undefined 或 null，表達(dá)式會短路并計算為 undefined，而不是拋出錯誤。
const obj = {
foo: { bar: { a: 3 } }
}
const obj2 = {}
function getA(o) {
return o && o.foo && o.foo.bar && o.foo.bar.a
}
function getA2(o) {
return o?.foo?.bar?.a
}
// 用 && 來獲取深層對象
console.log(getA(obj)) // 輸出3
console.log(getA(obj2)) // 輸出 undefined
console.log(getA2(obj)) // 輸出3
console.log(getA2(obj2)) // 輸出 undefined可以看到使用可選鏈運算符（?.）在獲取對象屬性上使用會更方便。
3. 使用解構(gòu)賦值
解構(gòu)賦值可以快速提取對象或數(shù)組中的值，減少冗余代碼。
// 對象解構(gòu)
const user = { name: 'John', age: 30 };
const { name, age } = user;
console.log(name, age); // John 30
// 數(shù)組解構(gòu)
const numbers = [1, 2, 3];
const [first, second] = numbers;
console.log(first, second); // 1 24. 字符串方法
使用 startsWith、endsWith、includes 方法來判斷字符串是否包含某個子串。
'Hello World'.startsWith('Hello') // true
'Hello World'.endsWith('World') // true
'Hello World'.includes('World') // true相比與 indexOf 方法，startsWith、endsWith、includes 代碼可讀性更高。
const isPython = 'Hello Python'.indexOf('Python') !== -1 // true
const isJS = 'Hello JavaScript'.includes('JavaScript') // true5. 數(shù)組方法
使用 map、filter、some、every 等方法來操作數(shù)組。
const arr = [
{ name: '小明', age: 16 },
{ name: '張三', age: 18 },
{ name: '李四', age: 20 }
]
const ageArr = arr.map(item => item.age) // [16, 18, 20]
const adults = arr.filter(item => item.age >= 18) // [{ name: '張三', age: 18 }, { name: '李四', age: 20 }]
const hasChild = arr.some(item => item.age < 18) // true
const isAllAdults = arr.every(item => item.age >= 18) // false相比于使用 for 循環(huán)遍歷數(shù)組來寫業(yè)務(wù)邏輯，map、filter、some、every 等方法讓你編碼更高效，同時可讀性更高。
6. 使用 Set 去重
Set 可以快速去除數(shù)組中的重復(fù)項。
const numbers = [1, 2, 2, 3, 4, 4];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4]7. 使用 Array.from 將類數(shù)組轉(zhuǎn)換為數(shù)組
將 NodeList、arguments 等類數(shù)組對象轉(zhuǎn)換為真正的數(shù)組。
const nodeList = document.querySelectorAll('div');
const divArray = Array.from(nodeList);8. 使用策略模式優(yōu)化 if
在一些場景中，if 分支會比較多，可以使用策略模式優(yōu)化。
// if 判斷
function renderSports = (sports) => {
if (sports === 'basketball') {
return'籃球'
} elseif (sports === 'football') {
return'足球'
} elseif (sports === 'tennis') {
return'網(wǎng)球'
} else {
return'--'
}
}
// 策略模式優(yōu)化
function renderSports2 = (sports) => {
const sportsMap = {
basketball: '籃球',
football: '足球',
tennis: '網(wǎng)球',
}
return sportsMap[sports] || '--'
}使用策略模式優(yōu)化后，可以少寫一些 if 語句，代碼也更符合設(shè)計模式。
9. 使用快速生成代碼片段
VSCode 中有提供代碼片段插件，這些插件能幫助你高效的寫代碼，當(dāng)然你也可以自己編寫代碼片段。
10. Chrome DevTools 替換接口內(nèi)容
當(dāng)接口返回的內(nèi)容無法覆蓋頁面所有展示情況時，我們可以使用 Chrome DevTools 的替換內(nèi)容功能來修改接口響應(yīng)，從而在不用本地模擬數(shù)據(jù)的情況下完成功能驗證。
11. 從控制臺復(fù)制長變量
Chrome 控制臺遇到內(nèi)容比較長的變量時，不會直接平鋪展示全部內(nèi)容，比如字符串較長時中間會顯示省略號、數(shù)組較長時會分塊展示等。如果你想復(fù)制這個內(nèi)容，就會比較困難，這時可以使用 Chrome Devtools 的復(fù)制變量功能。
12. 使用 classnames 處理類名
使用 classnames 能更高效的處理類名，同時還能使類名邏輯更清晰，便于理解和維護(hù)。
// 直接處理類名
let buttonClass = 'btn';
if (isPrimary) {
buttonClass += ' btn-primary';
}
if (isDisabled) {
buttonClass += ' btn-disabled';
}
// 使用 classNames 處理類名
const buttonClass = classNames('btn', {
'btn-primary': isPrimary,
'btn-disabled': isDisabled,
})
