Array和Object这哥俩你得好好认识一下

存储方式

js 复制代码
typeof []; // 'object'
typeof {}; // 'object'

我们都知道JS数据类型分简单(原始)数据类型复杂(引用)数据类型,不难看出Array和Object都是引用数据类型,这谁不知道呀,但你知道他们的存储方式有啥区别吗,这里就先讲下JS的存储方式;

JS存储方式有哪些

一共有两种:

  • 栈:存储简单(原始)数据类型
    • String Number Boolean Undefined Null Symbol(ES6新增) BigInit(ES10新增)
  • 堆:存储复杂(引用)数据类型
    • Object(普通对象,Array,RegExp,Date,Math等)

这里对栈和堆不做过多展开,比如为什么会有栈和堆?JS的函数调用栈等?还设计event loop等,以后笔者会有专门的文章展开讲,这里大家只需要知道栈和堆之间的关系。

这里大家可以快速记住,JS定义的变量,都会压入栈中,但变量类型又分基本和引用数据类型,基本数据类型直接存储在栈内,而引用类型只是在栈中存放的一个地址引用,实际内容则存放在堆中。

试想下const定义对象为什么能被修改。

js 复制代码
const obj = {a: 1};
obj.b = 2;
console.log(obj);
// {a: 1, b: 2}

const实际上保证的,不是变量的值不得改动,而是变量指向的那个内存地址不得改动,基本数据类型都是直接保存在栈中,内容变化了在栈中的地址也会变化,所以表现是不能改变,而引用类型的数据在栈中是存放的地址引用,实际内容是在堆中,所以改堆中的内容不影响栈中的地址引用。

Array和Object的特点

Array存储的数据连续的,Object存储的数据是无序的 我们在读取数据数据的时候都需要制定数组的索引,而索引都是从0开始依次递增,而读取数据Object中的某条数据必须得知道具体的键名,你无法通过第几个的位置来拿其中的元素。有的同学说我听说过类数组也就是函数的arguments

js 复制代码
类数组就是对象模拟数组的调用方式
arguments = {
 0: 'a',
 1: '2',
 length: 2
}

数组的优势

数组的地址是连续的,所以数组中的每个元素位置是有顺序确定的,所以读取数组的时间复杂度为O(1),所谓的指哪打哪。但是并不是所有的操作都是高效的 比如同样是插入数组,往尾部插入数组(O(1))比从头部插入(O(n))输入要高效的多,正所谓任何事物都有两面性,还是因为数组的地址是连续的,往尾部插入一条数据,改变的只是尾部的索引,前面的元素索引不会发生改变,而往头部插入一条数据,新插入的这个元素索引为占据了0的位置,相应的其它元素的索引都要加1,同理删除操作也如此。

对象的优势

可以模拟树,链表等复杂的型结构,对象的存储是无序的,所以删除、和插入通常不会有对其他数据的地址产生影响,但查找则相对没有那么方便,该特点在链表上表现得尤为突出。

结语:Object本身很复杂,它还涉及继承、原型链等知识,本篇文章主要是从数据结构的角度去看,以后会针对原型链等知识点单独写文章讲解,不断挖坑~

相关推荐
袁煦丞11 分钟前
2025.8.18实验室【代码跑酷指南】Jupyter Notebook程序员的魔法本:cpolar内网穿透实验室第622个成功挑战
前端·程序员·远程工作
Joker Zxc15 分钟前
【前端基础】flex布局中使用`justify-content`后,最后一行的布局问题
前端·css
无奈何杨18 分钟前
风控系统事件分析中心,关联关系、排行、时间分布
前端·后端
Moment24 分钟前
nginx 如何配置防止慢速攻击 🤔🤔🤔
前端·后端·nginx
晓得迷路了29 分钟前
栗子前端技术周刊第 94 期 - React Native 0.81、jQuery 4.0.0 RC1、Bun v1.2.20...
前端·javascript·react.js
前端小巷子31 分钟前
Vue 自定义指令
前端·vue.js·面试
玲小珑37 分钟前
Next.js 教程系列(二十七)React Server Components (RSC) 与未来趋势
前端·next.js
Mike_jia37 分钟前
UptimeRobot API状态监控:零成本打造企业级业务健康看板
前端
江城开朗的豌豆38 分钟前
React状态更新踩坑记:我是这样优雅修改参数的
前端·javascript·react.js
CodeSheep1 小时前
Stack Overflow,轰然倒下了!
前端·后端·程序员