【JS】尝试使用数组和对象构建数据“索引”

原创 WALL-E 随笔 javascript 36阅读 26 天前 举报

前言

数据索引本是数据库里的概念,对数据构建索引可以加快对数据的访问,我在js中借鉴这个概念,使用数组和对象为数据构建“索引”,实现更灵活的前端数据操控。

数组与对象

  • 数组属于对象,但通常有不同用途
  • 数组有顺序性,对象没有顺序性
  • 对象可以自定义键值,当然数组也可以,但是会破坏数组的顺序性
  • 所以通常数组被用作记录顺序,对象被用来自定义键值

使用场景【基础】

使用数组最多的场景是列表,列表也是开发中常常遇到的功能。

自定义列表数据:
生成列表
id名称操作
281name-1编辑
387name-2编辑
178name-3编辑
12name-4编辑
521name-5编辑

点击编辑可以修改对应数据名称

操作步骤:
  • 获取目标数据的id值
  • 编辑新的名称
  • 通过id在list数据中遍历查找目标数据
  • 修改目标数据中的name字段值
改进:

再定义一个对象值index,作为列表数据索引。
使用列表数据中的id作为键,指向列表中的对应数据
例如:

这里用到js中的另一个知识点,对象赋值为引用传递的特性。

创建索引:
输出结果:

操作步骤修改为:
  • 获取目标数据的id值
  • 编辑新的名称
  • 通过id在index对象中直接获目标数据
  • 修改目标数据中的name字段值
    省去了每次查找列表数组的步骤

使用场景【进阶】

基础场景中演示了为一维数组创建索引,进阶场景中可以升级为多维数组。
例如如下二维数组数据:

可渲染为一个3 * 3的九宫格。

T1T2T3
11(点击+1)12(点击+1)1(点击+1)
127(点击+1)129(点击+1)43(点击+1)
523(点击+1)82(点击+1)12(点击+1)
需求:

点击每格数据可以将数值+1

实现:

1、添加点击事件
2、获取目标数据id
3、查找二位数组,获取目标数据实体
4、修改目标数组值,同时修改DOM

改进

定义一个索引对象,再次使用数据id作为键值,记录数据实体。
例如:

同样操作步骤中可以省去查找步骤,直接通过id获取需要修改的数据。

总结

数据索引在多层数据结构中,需要多次查找才能获取目标数据的使用场景可以发挥一些些威力,方便在于快速查找,缺点在于需要多维护一个索引对象。
个中利弊,烦请各位看官自行体会了。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复