溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JavaScript有哪些簡寫技巧

發布時間:2021-11-15 15:03:49 來源:億速云 閱讀:140 作者:iii 欄目:web開發
# 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的結合使用技巧

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女