奇技淫巧

coderljw 2024-10-13

JS 基础
奇技淫巧

小于 1 分钟

# 1. 巧用位运算符

位运算符转整数（截除小数部分）。
```
-77.77 | 0 // => -77
~~77.77 // => 77
```
1
2

~ 搭配 indexOf 与 findIndex。

~ 返回 2 的补码，~x 大致等同于 -(x+1)。

~'clearlove'.indexOf('7') // => 0
~'clearlove'.split('').findIndex(i => i === '7') // => 0

1
2

取中值（截除小数部分）。
```
7 >> 1 // => 3
```
1

位掩码

const Create = 1 << 0
const Update = 1 << 1
const Retrieve = 1 << 2
const Delete = 1 << 3

let account = 0

// 添加标识：|
account |= Create | Update | Retrieve | Delete // => 15

// 清理标识：& ~
account &= ~Delete // => 7

// 判断包含标识：XY & X === X
;(account & Update) === Update // => true

// 判断不包含标识：XY & Y === 0
;(account & Delete) === 0 // => true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 2. 巧用 JSON.stringify (opens new window)

JSON.stringify() 函数，当对象中值为 [undefined | function | symbol] 时，转换后的对象不包含此属性。
1. 空字符串不传。
2. 后端采用同一接口，新增不需要 id，编辑带上对应 id。

JSON.stringify({ id: void 0 }) // => '{}'

// 示例
api({
  id: isEdit ? id || void 0,
})

1
2
3
4
5
6

# 3. 巧用逗号运算符

逗号运算符提取函数。

window.name = '徐扶墙'

const obj = {
  name: '姜泥',
  foo() {
    console.log(this.name)
  },
}

void (0, obj.foo)()

1
2
3
4
5
6
7
8
9
10

简写箭头函数：最后一项为返回值（慎用）。

// 来打我丫，笨蛋！
[1].map(i => ((res = i * 7), (res = `clearlove${res}`)))[0] // => 'clearlove7'

1
2

其他 JS 高级