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

42次阅读

共计 1238 个字符,预计需要花费 4 分钟才能阅读完成。

        因为以前前端开发跟数据存储打交道比较少,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 本质上是修改了堆内存里的数据。

正文完
 0