js数组之快速组、慢数组、密集数组、稀松数组

前言

我们大多数只知道数组是一个有序集合,但由于js的数组使用非常灵活,因而衍生出来非常多的疑问,本篇文章会对一些常对其一些场景情况出现的名词和逻辑进行一定程度探讨

实际上有学习过数据结构和算法的基本上都能想到大致可能的场景或者关键字,线性数组、索引、哈希表

另外数组中经常听到的快速组、慢数组、密集数组、稀松数组,也会从这里慢慢带入

js数组介绍

集合有很多,js中的数组主要目的是存放有序内容,当然实际也会使用和对象一样

密集数组与快数组

密集也就是我们常见的数组使用方式,按照数字索引逐步存放的,按顺序每个索引都存放内容了即使是undefined、null也是如此,这就叫做密集数组

密集数组通常是数组中的快数组,顾名思义,效率高,快

js 复制代码
const list = []
list.push('第一个')
list.push('第二个')
list.push(null)
//实际上存放的是 ['第一个', '第二个']

稀疏数组与慢数组

了解了密集数组,也很容易想到稀疏数组,并不是索引逐步存放的,中间存在断档,也就是跳过了部分索引赋值

稀疏数组可能会转化为慢数组,顾名思义,效率低,慢

js 复制代码
const list = []
list[10] = 10
list[100] = 100
//实际上存放了2个元素,长度缺是101,多出来的都是空元素

快数组与慢数组

当我们生成的数组是一个密集数组的时候,我们的数组会生成一个连续的内存结构,用于存放我们的索引,因此访问效率很高,时间复杂度位O(1),这就是快速组

连续内存,可以理解为,一个小区的楼栋分别按照顺序排列,我们知道了第一个只需要加上4个偏移就是第五栋了,在寻址中,知道地址就能快速访问到对应的地址内容了

当我们的数组是一个稀松数组,或者一个类数组时,会转化为慢数组,也就是我们常见的对象结构时,此时就是传说中的慢数组了,访问起来就是一个哈希结构了,这也是为了节省内存,毕竟学过数据结构或者了解过计算机内存分布的都知道,空间是申请好才能用的,且是连续的,不可能上来就乱申请一个巨大的连续空间,然后就为了保存那两个数据,非常不合理

尽管申请的内存块都是连续的,对于索引不连续的储存,一般都是采用哈希表的处理方式,将key转化为索引,处理冲突等,来解决内存映射问题,当然对于哈希结构用的比较多的就是线性表、树表了,而对于哈希表尽管优化,但操作、访问效率是不如顺序表的平均来看大约是O(1) ~ O(logn),并且由于线性表有冲突处理是要高于顺序表的,这里并不多介绍这两者,就介绍这么多x(想多了解的可以翻我以前写的数据结构与算法中的哈希表环节)

那么平时我们怎样做能用到快数组,什么样的场景慢数组呢

js 复制代码
//快数组,索引有序逐步填充
const list = []
list.push('第一个')
list.push('第二个')

//慢数组,仍然使用数字的
const list = []
list[10] = 10
list[100] = 100

//慢数组,直接使用非数字的
const list = [] //使用new Array(101)也一样
list['name'] = 10
list[name2] = 100

实际上还有一种密集数组,仍然会转化为慢数组,那就是数据内容过多 ,比如超过1000,可能就会被v8转化为哈希结构的数组的,可能会问为什么,因为一块非常大连续的内存空间申请也是一个技术活,内存申请释放很容易出现内存碎片,简单说就是很多申请释放之间的连续内存区域不足够大,这么做也是为了更好使用碎片化内存,毕竟内存不够申请的话,也是一个大问题

最后

我们都知道数组实际上也是继承自对象,也有自己的原型,针对于上面的不同结构,我们用的数组操作是js提供给我们的一个统一接口,如果我们使用同一个接口用来转化操作不同结构的对象,我们会怎么处理呢,又会想到哪些设计模式呢?

本篇文章就介绍到这里了,希望大家有点收获😄

相关推荐
mango_mangojuice2 小时前
Linux学习笔记(make/Makefile)1.23
java·linux·前端·笔记·学习
Days20502 小时前
简单处理接口返回400条数据本地数据分页加载
前端
Novlan12 小时前
@tdesign/uniapp 图标瘦身
前端
ManThink Technology2 小时前
如何使用EBHelper 简化EdgeBus的代码编写?
java·前端·网络
. . . . .3 小时前
shadcn组件库
前端
2501_944711433 小时前
JS 对象遍历全解析
开发语言·前端·javascript
发现一只大呆瓜4 小时前
虚拟列表:支持“向上加载”的历史消息(Vue 3 & React 双版本)
前端·javascript·面试
css趣多多4 小时前
ctx 上下文对象控制新增 / 编辑表单显示隐藏的逻辑
前端
_codemonster4 小时前
Vue的三种使用方式对比
前端·javascript·vue.js