基础数据结构及js数据存储

Brenner 发布于2019-08-23 18:08 / 444人阅读

摘要：引用数据类型及堆内存引用数据类型是保存在堆内存中的对象，他的大小是不固定的。基础数据类型在变量对象里可以直接对应对应的值，而引用数据类型是存储在堆里的，在变量对象中对应的是堆内存的地址。因为我们修改本质上是修改了堆内存里的数据。

      因为以前前端开发跟数据存储打交道比较少，javascript又具有自动垃圾回收机制。数据结构以及存储相关的概念，其实是很容易被前端er忽略的。但是因为现在大前端的趋势，其实慢慢地，这些概念对于一个前端er来说也成了必须要掌握的技巧。
      了解这些概念，对于我们去理解基本数据类型，引用数据类型，闭包，原型，原型链，事件循环等都有很好的促进作用。
      接下来，我们先了解堆(heap)，栈(stack)，队列(queue)这三种数据结构，再来分析js数据存储相关的概念。
1 数据结构

1.1 栈栈是一种先进后出的数据结构。
数据进入栈中之后，会被压到栈底。类似于我们平常用的羽毛球球管的概念，第一个进去的是在球管的管低，第一个出来的是位于球管管顶的最后一个进去的羽毛球。这个概念会在我们之后需要讲到的执行上下文中用到。

1.2 堆是一种树状的数据结构，跟书架类似。
我们在书架取书的时候是不需要知道书的内容的，只需要知道书名就知道需要取的是哪本书了。

1.3 队列是一种先进先出(FIFO)的数据结构。
就像我们过安检，谁排第一个谁就第一个接受安检。这块的概念主要是在事件循环机制中用到，可以更好的帮我们理解事件循环机制。

好啦，介绍完我们的基本数据结构，接下来就要详细介绍js中的数据存储方式了。

2 js数据存储

2.1 基础数据类型及变量对象

我们都知道js中基础数据类型包括undefined,null,boolean,string,number。这些数据类型都是存储在变量对象中的，我们都是按值访问，可以直接操作保存在变量中的值。

其实，变量对象严格意义上来说也是存储在对内存中的，但是为了方便理解，我们还是需要对他和堆内存做区分。

2.2 引用数据类型及堆内存
引用数据类型是保存在堆内存中的对象，他的大小是不固定的。而js是不允许直接操作对象的堆内存空间的。我们实际操作对象的时候，是在操作对象的引用。所谓引用，可以理解成堆内存内对象的地址，给外界一个操作的入口。就像我们平常写信，邮递员都是按照地址去派发信件的。
2.3 数据存储图解
如下所示代码，我们定义了4个基础数据类型，定义了2个引用数据类型。基础数据类型在变量对象里可以直接对应对应的值，而引用数据类型是存储在堆里的，在变量对象中对应的是堆内存的地址。

而要真正理解引用数据类型，我们可以看下下面的赋值操作。
因为a是基础数据类型，c是引用数据。c会有一个引用指向在堆里面真正的对象。

现在，我们进行复制操作，把a的值复制给b的时候，是把a真正的值赋值给了b。但是，将c复制给d的时候，是把c的引用赋值给了d。如代码下方的图示。

因此，当我们修改b的值的时候，是不会影响a的值，但是修改c的值的时候，会影响d的值。因为我们修改c本质上是修改了堆内存里的数据。

云服务器 GPU云服务器数据整理及存储方案基础数据存储管理 js基础数据类型 js中基础数据类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104737.html

html基础

摘要：不存在或格式不正确会导致文档以兼容模式呈现标准模式的排版和运作模式都是以该浏览器支持的最高标准运行。如果不能确定时，首选使用自然样式标签 HTML 语义化 HTML标签的语义化是指：通过使用包含语义的标签（如h1-h6）恰当地表示文档结构 css命名的语义化是指：为html标签添加有意义的class 为什么需要语义化：去掉样式后页面呈现清晰的结构盲人使用读屏器更好地阅读搜...

sihai 2019-08-02 10:06 评论0 收藏0
【JS基础】初谈JS现有的数据类型

摘要：相当于相当于相当于基础类型不属于包装的对象类型小结数据类型是每一个语言的基础由于属于弱类型脚本语言因此数据只有在赋值后才能直到变量的数据类型下一次我们具体介绍对象的概念前言在《你所不知道的javascript上篇》书籍以及《javascript权威指南》等书籍里面，均有介绍js的数据类型，对象，原型，继承。结合工作经验, 以及借用一些开源库和框架的源码, 进行一次梳理。首先介...

xeblog 2019-08-21 18:42 评论0 收藏0
前端相关大杂烩

摘要：希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎，由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时，老司机们首先就会告诉你其实是个没有网络请求功能的库。前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 评论0 收藏0
#yyds干货盘点# 前端基础知识面试集锦1

摘要：作用标准模式与兼容模式各有什么区别声明位于位于文档中的第一行，处于标签之前。又称内核及以上版本，等内核及以上。存储大小数据大小不能超过。可以防止恶意刷票论坛灌水有效防止对某一个特定注册用户用特定程序暴力方式进行不断的登陆尝试。 HTMLDoctype作用？标准模式与兼容模式各有什么区别?（1）、声明位于位于HT...

番茄西红柿 2021-11-22 15:29 评论0 收藏2637
18年求职面经及总结

摘要：年求职面经及总结我的求职之路差不多走到尽头了感觉真是精疲力尽了把这大半年的经历和面试总结写下来希望能给和我一样在求职路上煎熬的人一点帮助先说背景微电子科学与工程专业学过两门和相关的课程语言和单片机这个专业的唯一好处就是大部分人并不知道这个专 18年求职面经及总结我的求职之路差不多走到尽头了,感觉真是精疲力尽了.把这大半年的经历和面试总结写下来,希望能给和我一样在求职路上煎熬的人一点帮...

zhangwang 2019-08-22 11:07 评论0 收藏0