03. “数组” 负数取值

重新改造 arr，使得 arr 能以负数取值，如下所示

let arr = [0, 1, 2, 3, 4]

// your code

arr[-1] // 4
arr[-2] // 3
arr[-3] // 2
arr[0]  // 0
arr[1]  // 1

1
2
3
4
5
6
7
8
9

相信思路大家都是这样：访问负数索引的时候，将其转换为正向应该访问的正索引。

对于 arr[x]

x 为正：正常返回 arr[x]
x 为负：返回 arr[arr.length + x]

我们不能直接修改数组的 getter，也就是说使用 Object.defineProperty 无法实现，因为 getter 不支持传参（这里访问的数组的索引就是参数）。

我们知道，数据劫持有两个方法，除了上面这个 defineProperty，剩下的就是 Vue3 使用的 Proxy 代理。

代码实现：

let arr = [0, 1, 2, 3, 4]

arr = new Proxy(arr, {
  get(target, property) {
    if (property < 0) {
      // 传入的 property 为数字字符串，需要强转
      return target[target.length + Number(property)]
    }
    return target[property]
  }
})

arr[-1] // 4
arr[-2] // 3
arr[-3] // 2
arr[0]  // 0
arr[1]  // 1

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

03. “数组” 负数取值 #

03. “数组” 负数取值