JavaScript 编写技巧（持续更新...）

为了更加优雅、轻松易读的JavaScript代码，有一些小细节的处理是必不可少的。

1. || 和 && 逻辑运算符

在JavaScript中，|| 和 && 是常用的逻辑运算符，但是在使用的时候，需要注意一些细节。

|| 运算符的作用是：两个表达式中只要有一个为 true，则返回 true，否则返回 false。

1 || 2 // 1
- 1 || 2 // -1
0 || 2 // 2
'' || 2 // 2
undefined || 2 // 2
null || 2 // 2

&& 运算符的作用是：两个表达式中只要有一个为 false，则返回 false，否则返回 true。

1 && 2 // 2
- 1 && 2 // 2
0 && 2 // 0
'' && 2 // ''
undefined && 2 // undefined
null && 2 // null

注意点：0、空字符串、Undefined 和 Null 都会被转换为 false 处理，其他的都会被转换为 true。

2. ?? 空值合并运算符

?? 运算符的作用是：当左侧的表达式为 Null 或 Undefined 时，返回右侧的表达式，否则返回左侧的表达式。

注意点：?? 运算符只会判断左侧的表达式是否为 Null 或 Undefined，其他的都不会判断（包括 0 和 空字符串）。

3. 优化 If、Case 语句代码

在 JavaScript 中，If 和 Case 语句是常用的条件语句。

但是在使用的时候，很可能会出现一长串的 If 或 Case 语句，这样的代码不仅不美观，而且不易读，所以我们需要对这样的代码进行优化。

const key = 1
if (key === 1) {
  console.log('key is 1')
} else if (key === 2) {
  console.log('key is 2')
} else if (key === 3) {
  console.log('key is 3')
} else {
  console.log('key is other value')
}

可以利用对象Object属性的唯一性，将上面的代码优化为：

const oneKey = () => {
  console.log('key is 1')
}
const twoKey = () => {
  console.log('key is 2')
}
const threeKey = () => {
  console.log('key is 3')
}
const otherKey = () => {
  console.log('key is other value')
}
// 利用对象属性名的唯一性来绑定对应的自定义处理函数
const keyList = {
  1: oneKey,
  2: twoKey,
  3: threeKey,
}
const key = 1
keyList[key] ? keyList[key]() : otherKey()