avatar

光和尘

有花满渚、有酒盈瓯

目录检索关于我

🔖 javascriptecmascript

逻辑赋值运算符

  • ||=: a ||= b 等价于 a || (a = b)

  • &&=: a &&= b 等价于 a && (a = b)

  • ??=: a ??= b 等价于 a ?? (a = b)

数字分隔符 _

  • Demo

     
    2_000_000 // ==> 2000000
    2_000_000n // ==> 2000000

Promise.any()

String.prototype.replaceAll()

Related

🔖 exceltools

Usage

  • 启用 VBA (*.xlsm 文件中有效)

    • 在 Excel 中:文件 --> 选项 --> 自定义功能区 勾选 开发工具
    excel-enable-vba.png
  • 启用 Microsoft VBScript Regular Expressions5.5 模块

    • 打开 Visual Basic 编辑器:开发工具 --> Visual Basic
    • Visual Basic 编辑器中打开:工具 --> 引用
    • 在弹出的对话框中勾选 Microsoft VBScript Regular Expressions 5.5
    excel-enable-vba-regex.png

🔖 webfrontendcss

选择器优先级

  • CSS 选择器类型的优先级: 内联样式 \gt ID 选择器 \gt 类选择器 \gt 标签选择器

    具体计算规则如下,其中 (a, b, c, d) 将作为向量比较大小,即左侧的数值有绝对优先权

    A specificity is determined by plugging numbers into (a, b, c, d):

    • If the styles are applied via the style attribute, a=1; otherwise, a=0.
    • b is equal to the number of ID selectors present.
    • c is equal to the number of class selectors

🔖 reactreact hooks

useDeepCompareCallback

Deep compare version of React.useCallback

useDeepCompareCallback.ts  | 23 lines.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import isEqual from 'fast-deep-equal/react'
import type React from 'react'
import { useCallback, useRef } from 'react'
/**
* Deep compare version of React.useCallback
* @param fn
* @param deps
*/
export function useDeepCompareCallback<T extends (...args: any[]) => any>(
fn: T,
deps: React.DependencyList,
): T {
const signal = useRef<number>(0)
const prevDeps = useRef<React.DependencyList>(deps)
if (!isEqual(prevDeps.current, deps)) {
signal.current += 1
}
prevDeps.current = deps
return useCallback(fn, [signal.current])
}

useDeepCompareEffect

Deep compare version of React.useEffect

useDeepCompareEffect.ts  | 20 lines.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import isEqual from 'fast-deep-equal/react'
import type React from 'react'
import { useEffect, useRef } from 'react'
/**
* Deep compare version of React.useEffect
* @param fn
* @param deps
*/
export function useDeepCompareEffect(fn: React.EffectCallback, deps: React.DependencyList): void {
const signal = useRef<number>(0)
const prevDeps = useRef<React.DependencyList>(deps)
if (!isEqual(prevDeps.current, deps)) {
signal.current += 1
}
prevDeps.current = deps
useEffect(fn, [signal.current])
}

useDeepCompareMemo

Deep compare version of React.useMemo

useDeepCompareMemo.ts  | 20 lines.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import isEqual from 'fast-deep-equal/react'
import type React from 'react'
import { useMemo, useRef } from 'react'
/**
* Deep compare version of React.useMemo
* @param fn
* @param deps
*/
export function useDeepCompareMemo<T>(fn: () => T, deps: React.DependencyList): T {
const signal = useRef<number>(0)
const prevDeps = useRef<React.DependencyList>(deps)
if (!isEqual(prevDeps.current, deps)) {
signal.current += 1
}
prevDeps.current = deps
return useMemo(fn, [signal.current])
}

useInterval

Execute callback interval in react function components.

userInterval.ts  | 25 lines.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { useEffect, useRef } from 'react'
type Callback = () => void
/**
* Execute callback interval in react function components.
* @param callback
* @param delay
*/
export function useInterval(callback: Callback, delay: number): void {
const callbackRef = useRef<Callback>(callback)
useEffect(() => {
callbackRef.current = callback
}, [callback])
useEffect(() => {
const tick: Callback = () => {
if (callbackRef.current === undefined) return
callbackRef.current()
}
const id = setInterval(tick, delay)
return () => clearInterval(id)
}, [delay])
}

usePreviousState

记录上一个状态。

利用更新 ref.current 的值不会触发组件更新的特性,在 usePreviousState 中总是返回旧的值,尽管在 userPreviousStateuseEffect 中更新了新值,但并不触发更新。

usePreviousState.ts  | 14 lines.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { useEffect, useRef } from 'react'
/**
* Use previous state.
* @param value
* @returns
*/
export function usePreviousState<T extends unknown = any>(value: T): T {
const ref = useRef<T>(value)
useEffect(() => {
ref.current = value
}, [value])
return ref.current
}

useReactiveRef

useReactiveRef.ts  | 15 lines.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import type React from 'react'
import { useEffect, useRef } from 'react'
/**
* Create a reactive ref which will follow the changes of the given data.
* @param data
* @returns
*/
export function useReactiveRef<T>(data: T): React.MutableRefObject<T> {
const ref = useRef(data)
useEffect(() => {
ref.current = data
}, [data])
return ref
}

🔖 组合数学组合游戏SG 定理

NP 状态描述

  • 无法进行任何移动的局面为 P-position
  • 可以移动到 P-position 的局面为 N-position
  • 任意移动都到达 N-position 的局面为 P-position

Nim 游戏

Nim 游戏是组合游戏中的经典游戏,描述如下:有 n 堆石子,第 i 堆有 x_i 颗石子。AB 两人轮流取石子,每次仅能选择一堆不为空的石子进行操作:取走至少一颗石子。不能操作的人输。

关于 Nim 游戏有一个著名的结论:当且仅当 x_1\oplus x_2\oplus\cdots\oplus x_n=0 时,先手获胜;否则后手胜。证明很简单,当 X=x_1\oplus x_2\oplus\cdots\oplus x_n\neq 0

© 2017-2022 光和尘有花满渚、有酒盈瓯