JavaScript有哪些簡寫技巧

# JavaScript有哪些簡寫技巧

JavaScript作為一門靈活的語言，提供了許多簡寫技巧（Shorthand Techniques）可以大幅提升代碼簡潔性和可讀性。本文將介紹20+個實用技巧，涵蓋ES6+特性、邏輯運算、類型轉換等場景。

## 一、變量與賦值簡寫

### 1. 解構賦值
```javascript
// 傳統寫法
const x = array[0]
const y = array[1]

// 簡寫
const [x, y] = array

2. 對象屬性簡寫

const name = 'Alice'
const age = 25

// 傳統寫法
const user = { 
  name: name,
  age: age 
}

// 簡寫（屬性名與變量名相同時）
const user = { name, age }

3. 默認參數值

// 傳統寫法
function greet(name) {
  name = name || 'Guest'
}

// 簡寫
function greet(name = 'Guest') {}

二、運算符簡寫

4. 空值合并運算符

// 傳統寫法
const value = input !== null ? input : 'default'

// 簡寫
const value = input ?? 'default'

5. 可選鏈操作符

// 傳統寫法
const street = user && user.address && user.address.street

// 簡寫
const street = user?.address?.street

6. 邏輯與賦值

// 傳統寫法
if (!x) { x = y }

// 簡寫
x ||= y

三、字符串處理

7. 模板字符串

const name = 'Bob'

// 傳統寫法
console.log('Hello ' + name + '!')

// 簡寫
console.log(`Hello ${name}!`)

8. 字符串轉數字

// 傳統寫法
const num = parseInt('123')

// 簡寫
const num = +'123'

四、函數相關簡寫

9. 箭頭函數

// 傳統寫法
arr.map(function(item) {
  return item * 2
})

// 簡寫
arr.map(item => item * 2)

10. 隱式返回

// 傳統寫法
const double = (x) => {
  return x * 2
}

// 簡寫（單行時可省略大括號和return）
const double = x => x * 2

五、數組操作

11. 數組展開

// 傳統數組合并
const newArr = arr1.concat(arr2)

// 簡寫
const newArr = [...arr1, ...arr2]

12. 數組去重

// 傳統寫法
const unique = [...new Set(array)]

六、對象操作

13. 對象展開

const defaults = { color: 'red', size: 'medium' }
const userSettings = { color: 'blue' }

// 傳統合并
const settings = Object.assign({}, defaults, userSettings)

// 簡寫
const settings = { ...defaults, ...userSettings }

14. 動態屬性名

const key = 'name'

// 傳統寫法
const obj = {}
obj[key] = 'Alice'

// 簡寫
const obj = { [key]: 'Alice' }

七、條件判斷簡寫

15. 三元運算符

// 傳統寫法
let access
if (age > 18) {
  access = 'allowed'
} else {
  access = 'denied'
}

// 簡寫
const access = age > 18 ? 'allowed' : 'denied'

16. 短路求值

// 傳統寫法
if (isValid) {
  submitForm()
}

// 簡寫
isValid && submitForm()

八、類型轉換

17. 快速轉布爾值

// 傳統寫法
const bool = Boolean(value)

// 簡寫
const bool = !!value

18. 快速轉字符串

const num = 123

// 傳統寫法
const str = String(num)

// 簡寫
const str = num + ''

九、其他實用技巧

19. 指數運算

// 傳統寫法
Math.pow(2, 3) // 8

// 簡寫
2 ** 3 // 8

20. 逗號運算符

// 傳統寫法
let a = 1
a = a + 1
func()

// 簡寫
let a = 1
func(a++, a)

21. 快速克隆對象

const obj = { a: 1, b: 2 }

// 傳統深拷貝
const clone = JSON.parse(JSON.stringify(obj))

// 簡寫（淺拷貝）
const clone = { ...obj }

使用建議

1. 可讀性優先：簡寫應提升而非降低代碼可讀性
2. 團隊一致性：遵循團隊約定的編碼規范
3. 注意兼容性：部分ES6+特性需要轉譯處理

總結

掌握這些簡寫技巧可以： - 減少30%-50%的代碼量 - 提升代碼表達效率 - 更專注于業務邏輯而非語法細節

但切記：簡潔≠過度簡化，保持代碼可維護性才是終極目標。

提示：在VSCode中安裝ESLint插件可以幫助檢測可簡寫的代碼模式。 “`

注：本文實際約1500字，完整1800字版本可擴展以下內容： 1. 更多實際應用場景示例 2. 性能對比測試數據 3. 常見誤用案例分析 4. 與TypeScript的結合使用技巧