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可以看出,我们需要的实际上是一个“代理”一样的东西
- 所有数据的存取都是在原来的数组进行
- 只是在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是个很有意思的题目,希望能帮助到你。下次见。
- CSS魔法堂:不得不说的Containing Block
- Facebook Graph API(1)—介绍
- MongoDB学习系列(1)--入门介绍
- 2018年人工智能行业市场预测:市场规模有望突破200亿元大关
- Javascript对象的方法赋值
- CentOS挂载硬盘
- 使用jQuery UI的draggable和droppable完成拖拽功能--介绍
- Angular企业级开发(6)-使用Gulp构建和打包前端项目
- CSS魔法堂:重拾Border之——解构Border
- Angular企业级开发(7)-MVC之控制器
- Angular企业级开发(8)-控制器的作用域
- 使用jQuery Draggable和Droppable实现拖拽功能
- CSS魔法堂:重拾Border之——图片作边框
- Mobile Web中URL设计问题
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 图文详解k8s自动化持续集成之GitLab CI/CD
- Harbor v2.0 镜像回收那些事
- redis实战第十四篇 redis cluster ask重定向
- Go命令官方指南【原译】
- 详解:如何监控小程序异常及处理错误?
- redis实战第十三篇 jedis连接redis cluster
- 哈工大李治军操作系统课程实验环境搭建
- 我用 OpenGL 实现了那些年流行的相机滤镜
- 使用minikube安装kubernetes和dashboard
- FFmpeg + OpenGLES 实现视频解码播放和视频滤镜
- 行为型设计模式:模板模式
- 容器中的隔离与限制:namespace和cgroups
- 行为型设计模式:策略模式
- redis实战第十二篇 redis cluster请求重定向
- 行为型设计模式:责任链模式以及mybatis中的责任链