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的结合使用技巧