BFE.dev前端刷题88 - 在JavaScript中实现负索引

时间:2022-07-23
本文章向大家介绍BFE.dev前端刷题88 - 在JavaScript中实现负索引,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

bfe.dev 是一个针对前端的刷题网站,像是前端的LeetCode。该系列文章是我在上面的刷题日记。

题目 88

BFE.dev#88 在JavaScript中实现负索引

分析

首先看一下example

第一直觉是可以直接返回一个固定的object, 比如这样{0:1, 1:2, 2:3, -1:3, -2:2, -3:1}。但是这样搞数据是死的,下面的题目要求很难实现。

我们可以用getter/setter来完成和原来数组的数据同步,比如这样:

但是除了-1,还有-2, -3, ...-originalArr.length. 当数组length变化的时候得同步更新这些property。不是不可能,但是比较痛苦

救世主 Proxy

从题目的example可以看出,我们需要的实际上是一个“代理”一样的东西

  1. 所有数据的存取都是在原来的数组进行
  2. 只是在index是负数的时候,我们稍微改动一下存取的对象

首先我们写一个最基本proxy:

这个Proxy完全proxy到原数组,啥也不做。所以测试用例中的non-negative index的部分实际上还能通过。

处理负索引

get 中的prop不是number,我们parse一下,然后转换为正确的index就ok了

not iterable!

啊, [...arr] 测试没通过。

[...arr] 实际上调用的是目标的Symbol.Iterator方法,因为我们的proxy不拥有数组,我们需要把这个调用代理到原数组上。这时候可以用 Function.prototype.bind()达到目的。

通过!撒花!

这在BFE.dev是个很有意思的题目,希望能帮助到你。下次见。