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

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

        1.1 栈 栈是一种先进后出的数据结构。
        数据进入栈中以后,会被压到栈底。相似于咱们日常用的羽毛球球管的概念,第一个进去的是在球管的管低,第一个出来的是位于球管管顶的最后一个进去的羽毛球。 这个概念会在咱们以后须要讲到的执行上下文中用到。
图片描述前端

        
        1.2 堆 是一种树状的数据结构,跟书架相似。
        咱们在书架取书的时候是不须要知道书的内容的,只须要知道书名就知道须要取的是哪本书了。
图片描述java

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

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

        2 js数据存储spa

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

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

        其实,变量对象严格意义上来讲也是存储在对内存中的,可是为了方便理解,咱们仍是须要对他和堆内存作区分。blog

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

        而要真正理解引用数据类型,咱们能够看下下面的赋值操做。
        由于a是基础数据类型,c是引用数据。c会有一个引用指向在堆里面真正的对象。
图片描述
图片描述

如今,咱们进行复制操做,把a的值复制给b的时候,是把a真正的值赋值给了b。可是,将c复制给d的时候,是把c的引用赋值给了d。如代码下方的图示。
图片描述
图片描述

        所以,当咱们修改b的值的时候,是不会影响a的值,可是修改c的值的时候,会影响d的值。由于咱们修改c本质上是修改了堆内存里的数据。

相关文章
相关标签/搜索