Live Note

Remain optimistic

Posted on Edited on In
  1. 从 Reflect 对象上可以获得语言内部的方法
  2. 修改某些 Object 方法的返回结果，让其变得更合理。比如 Object.defineProperty 在无法定义属性时会抛出一个错误，而 Reflect.defineProperty 则会返回 false
  3. 让 Object 操作都变成函数行为。
  4. 只要是 Proxy 对象的方法，就能在 Reflect 对象上找到相应的方法，无论 Proxy 怎么修改默认行为，总可以在 Reflect 上获取默认行为

静态方法

  • Reflect.apply(target, thisArg, args)
    等同于 Function.prototype.apply.call(func, thisArg, args)，用于绑定 this 对象后执行给定函数。

  • Reflect.construct(target, args)
    等同于 new target(…args)，提供了一种不使用 new 来调用构造函数的方法：

    1
    2
    3
    4
    5
    6
    7
    8
    function Greeting(name) {
      this.name = name
    }
    //new 的写法
    const instance = new Greeting("张三")

    //Reflect.construct 写法
    const instance = Reflect.construct(Greeting, ["张三"])
Read more »

Posted on Edited on In

先行断言

  • lookahead assertion：x在y之前才匹配，格式为/x(?=y)/
  • negative lookahead assertion：只有x不在y之前才匹配，格式为/x(?!y)/
1
2
3
4
let str = 'now is 02:11:44'

/\d+(?=:)/.exec(str) // ['02']
/\d+(?!\.)/.exec(str) // ['0']
Read more »

Posted on Edited on In

Custom Scroll Indicator for ScrollView

Demo.tsx
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import React, { useMemo, useState } from "react"
import { ScrollView, View } from "react-native"

const Demo: React.FC = () => {
  const [contentSize, setContentSize] = useState(0)
  const [scrollViewSize, setScrollViewSize] = useState(0)
  const [scrollPosition, setScrollPosition] = useState(0)

  const indicatorWidth = useMemo(() => {
    if (contentSize > 0 && scrollViewSize > 0) {
      return (scrollViewSize / contentSize) * scrollViewSize
    }

    return 0
  }, [contentSize, scrollViewSize])

  const indicatorPosition = useMemo(() => {
    if (contentSize > 0 && scrollPosition > 0) {
      return (scrollPosition / contentSize) * scrollViewSize
    }

    return 0
  }, [contentSize, scrollPosition, scrollViewSize])

  return (
    <View>
      <ScrollView
        // disable default scroll indicator
        showsHorizontalScrollIndicator={false}
        onLayout={(event) => {
          setScrollViewSize(event.nativeEvent?.layout?.width ?? 0)
        }}
        onContentSizeChange={(w) => {
          setContentSize(w)
        }}
        horizontal // set horizontal scroll
        scrollEventThrottle={16} // throttle scroll event to improve performance
        onScroll={(event) => {
          // change scroll position here
          const { contentOffset } = event.nativeEvent

          const { x = 0 } = contentOffset
          const max = contentSize - scrollViewSize
          const min = 0

          if (x > max) {
            setScrollPosition(max)
          } else if (x < min) {
            setScrollPosition(min)
          } else {
            setScrollPosition(x)
          }
        }}
      >
        {/* Content here */}
      </ScrollView>

      {/* custom scroll indicator */}
      <View
        style={{
          bottom: 0,
          height: 4,
          width: indicatorWidth,
          position: "absolute",
          left: indicatorPosition,
          borderRadius: 4,
          backgroundColor: "#EEEEEE",
        }}
      />
    </View>
  )
}

export default Demo

Posted on Edited on In

基本用法

Set 类似于数组，但是成员的值都是唯一的，没有重复。Set 本身是一个构造函数。

1
2
3
4
5
6
7
8
9
10
11
const set = new Set()
;[1, 2, 3, 4].forEach((x) => set.add(x))
for (let value of set) {
  console.log(value) //1, 2, 3, 4
}

const set = new Set([1, 2, 3, 4])
;[...set] //[1, 2, 3, 4]

//数组除重
;[...new Set(array)]

在 Set 内部，NaN 是相等的，两个对象总是不相等的。

1
2
3
4
5
6
7
8
let set = new Set()
let a = NaN
let b = NaN
set.add(a).add(b)
set.size //1

set.add({}).add({})
set.size //3
Read more »

Posted on Edited on

TV series

  • Game of Thrones
  • WestWorld
  • Chernobyl
  • Fantasmagorias
  • Love, Death & Robots
Read more »