# JavaScript有哪些簡寫技巧
JavaScript作為一門靈活的語言,提供了許多簡寫技巧(Shorthand Techniques)可以大幅提升代碼簡潔性和可讀性。本文將介紹20+個實用技巧,涵蓋ES6+特性、邏輯運算、類型轉換等場景。
## 一、變量與賦值簡寫
### 1. 解構賦值
```javascript
// 傳統寫法
const x = array[0]
const y = array[1]
// 簡寫
const [x, y] = array
const name = 'Alice'
const age = 25
// 傳統寫法
const user = {
name: name,
age: age
}
// 簡寫(屬性名與變量名相同時)
const user = { name, age }
// 傳統寫法
function greet(name) {
name = name || 'Guest'
}
// 簡寫
function greet(name = 'Guest') {}
// 傳統寫法
const value = input !== null ? input : 'default'
// 簡寫
const value = input ?? 'default'
// 傳統寫法
const street = user && user.address && user.address.street
// 簡寫
const street = user?.address?.street
// 傳統寫法
if (!x) { x = y }
// 簡寫
x ||= y
const name = 'Bob'
// 傳統寫法
console.log('Hello ' + name + '!')
// 簡寫
console.log(`Hello ${name}!`)
// 傳統寫法
const num = parseInt('123')
// 簡寫
const num = +'123'
// 傳統寫法
arr.map(function(item) {
return item * 2
})
// 簡寫
arr.map(item => item * 2)
// 傳統寫法
const double = (x) => {
return x * 2
}
// 簡寫(單行時可省略大括號和return)
const double = x => x * 2
// 傳統數組合并
const newArr = arr1.concat(arr2)
// 簡寫
const newArr = [...arr1, ...arr2]
// 傳統寫法
const unique = [...new Set(array)]
const defaults = { color: 'red', size: 'medium' }
const userSettings = { color: 'blue' }
// 傳統合并
const settings = Object.assign({}, defaults, userSettings)
// 簡寫
const settings = { ...defaults, ...userSettings }
const key = 'name'
// 傳統寫法
const obj = {}
obj[key] = 'Alice'
// 簡寫
const obj = { [key]: 'Alice' }
// 傳統寫法
let access
if (age > 18) {
access = 'allowed'
} else {
access = 'denied'
}
// 簡寫
const access = age > 18 ? 'allowed' : 'denied'
// 傳統寫法
if (isValid) {
submitForm()
}
// 簡寫
isValid && submitForm()
// 傳統寫法
const bool = Boolean(value)
// 簡寫
const bool = !!value
const num = 123
// 傳統寫法
const str = String(num)
// 簡寫
const str = num + ''
// 傳統寫法
Math.pow(2, 3) // 8
// 簡寫
2 ** 3 // 8
// 傳統寫法
let a = 1
a = a + 1
func()
// 簡寫
let a = 1
func(a++, a)
const obj = { a: 1, b: 2 }
// 傳統深拷貝
const clone = JSON.parse(JSON.stringify(obj))
// 簡寫(淺拷貝)
const clone = { ...obj }
掌握這些簡寫技巧可以: - 減少30%-50%的代碼量 - 提升代碼表達效率 - 更專注于業務邏輯而非語法細節
但切記:簡潔≠過度簡化,保持代碼可維護性才是終極目標。
提示:在VSCode中安裝ESLint插件可以幫助檢測可簡寫的代碼模式。 “`
注:本文實際約1500字,完整1800字版本可擴展以下內容: 1. 更多實際應用場景示例 2. 性能對比測試數據 3. 常見誤用案例分析 4. 與TypeScript的結合使用技巧
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。