JavaScript数据类型的存储方法详解

一个很基础的知识点，JavaScript中基本数据类型和引用数据类型是如何存储的。

由于自己是野生程序员，在刚开始学习程序设计的时候没有在意内存这些基础知识，导致后来在提到“什么什么是存在栈中的，栈中只是存了一个引用”这样的话时总是一脸懵逼。。

后来渐渐的了解了一些内存的知识，这部分还是非常有必要了解的。

基本数据结构

栈

栈，只允许在一段进行插入或者删除操作的线性表，是一种先进后出的数据结构。

堆

堆是基于散列算法的数据结构。

队列

队列是一种先进先出（FIFO）的数据结构。

JavaScript中数据类型的存储

JavaScript中将数据类型分为基本数据类型和引用数据类型，它们其中有一个区别就是存储的位置不同。

基本数据类型

我们都知道JavaScript中的基本数据类型有：

  • String
  • Number
  • Boolean
  • Undefined
  • Null
  • Symbol（暂时不管）

基本数据类型都是一些简单的数据段，它们是存储在栈内存中。

引用数据类型

JavaScript中的引用数据类型有：

  • Array
  • Object

引用数据类型是保存在堆内存中的，然后再栈内存中保存一个对堆内存中实际对象的引用。所以，JavaScript中对引用数据类型的操作都是操作对象的引用而不是实际的对象。

可以理解为，栈内存中保存了一个地址，这个地址和堆内存中的实际值是相关的。

图解

现在，我们声明几个变量试试：

var name="axuebin";
var age=25;
var job;
var arr=[1,2,3];
var obj={age:25};

可以通过下图来表示数据类型在内存中的存储情况：

此时 name , age , job 三种基本数据类型是直接存在栈内存中的，而 arr , obj 在栈内存中只是存了一个地址来表示对堆内存中的引用。

复制

基本数据类型

对于基本数据类型，如果进行复制，系统会自动为新的变量在栈内存中分配一个新值，很容易理解。

引用数据类型

如果对于数组、对象这样的引用数据类型而言，复制的时候就会有所区别了：

系统也会自动为新的变量在栈内存中分配一个值，但这个值仅仅是一个地址。也就是说，复制出来的变量和原有的变量具有相同的地址值，指向堆内存中的同一个对象。

如果所示，执行了 var objCopy=obj 之后， obj 和 objCopy 具有相同的地址值，执行堆内存中的同一个实际对象。

这有什么不同呢？

当我修改 obj 或 objCopy 时，都会引起另一个变量的改变。

为什么？

为什么基础数据类型存在栈中，而引用数据类型存在堆中呢？

  1. 堆比栈大，栈比对速度快。
  2. 基础数据类型比较稳定，而且相对来说占用的内存小。
  3. 引用数据类型大小是动态的，而且是无限的。
  4. 堆内存是无序存储，可以根据引用直接获取。

总结

以上所述是小编给大家介绍的JavaScript数据类型的存储方法详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 总结JavaScript三种数据存储方式之间的区别

    sessionStorage .localStorage 和 cookie 之间的共同点: 都是保存在浏览器端,且同源的. sessionStorage .localStorage 和 cookie 之间的区别: cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递.而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存.cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下. 存

  • JSON复杂数据处理之Json树形结构数据转Java对象并存储到数据库的实现

    在网站开发中经常遇到级联数据的展示,比如选择城市的时候弹出的省市县选择界面.很多前端制作人员习惯于从JSON中而不是从数据库中获取省市县数据.那么在选择了省市县中的某一个城市 ,存储到数据库中需要存储所选城市的代码.所以需要一个能将JSON数据(一般存储在javascript脚本中)结构全部导入到数据库中的功能. JSON的特点是支持层级结构.支持数组表示的对象 .下面的示例介绍如何将JSON的省市县数据保存到数据库中,实现原理非常简单,就是利用JSON的java工具包API,将层次结构的JSO

  • 关于AngularJs数据的本地存储详解

    第一.创建一个factory来储存和调取你的数据(你可以单独创建一个js文件,按照语义命名如:dataService.js.然后在你的主页面引入这个JS文件) <!--引入到你的主页面里面--> <script src="dataService.js"></script> 创建一个factory 'use strict'; angular.module('myApp') .factory('datadService',['$window',funct

  • 详解js的六大数据类型

    js中有六种数据类型,包括五种基本数据类型(Number,String,Boolean,Null,Undefined),和一种混合数据类型(Object). 前面说到js中变量是松散类型的,因此有时候我们需要检测变量的数据类型. typeof操作符可以检测变量的数据类型(输出的是一个关于数据类型的字符串). 返回如下6种字符串:number,string,boolean,object,undefined,function.且看如下例子: var x = 1; console.log(typeof

  • js 判断各种数据类型的简单方法(推荐)

    了解js的都知道, 有个typeof  用来判断各种数据类型,有两种写法:typeof   xxx   ,typeof(xxx)  如下实例: typeof   2      输出   number typeof   null   输出   object typeof   {}    输出   object typeof    []    输出   object typeof   (function(){})   输出  function typeof    undefined  输出  und

  • JavaScript数据存储 Cookie篇

    1.什么是cookie?     答:cookie是用于在客户端存储会话信息的. 2.cookie的组成部分?     ①名称:一个唯一确定cookie 的名称.建议区分大小写.cookie 的名称必须是经过URL 编码的.     ②值:储存在cookie 中的字符串值.值必须被URL 编码.     ③域:cookie 对于哪个域是有效的.所有向该域发送的请求中都会包含这个cookie 信息.这个值可以包含子域(subdomain,如www.wrox.com),也可以不包含它(如.wrox.

  • js 判断数据类型的几种方法

    判断js中的数据类型有一下几种方法:typeof.instanceof. constructor. prototype. $.type()/jquery.type(),接下来主要比较一下这几种方法的异同. 先举几个例子: var a = "iamstring."; var b = 222; var c= [1,2,3]; var d = new Date(); var e = function(){alert(111);}; var f = function(){this.name=&

  • JavaScript数据类型的存储方法详解

    JavaScript数据类型的存储方法详解

    一个很基础的知识点,JavaScript中基本数据类型和引用数据类型是如何存储的. 由于自己是野生程序员,在刚开始学习程序设计的时候没有在意内存这些基础知识,导致后来在提到"什么什么是存在栈中的,栈中只是存了一个引用"这样的话时总是一脸懵逼.. 后来渐渐的了解了一些内存的知识,这部分还是非常有必要了解的. 基本数据结构 栈 栈,只允许在一段进行插入或者删除操作的线性表,是一种先进后出的数据结构. 堆 堆是基于散列算法的数据结构. 队列 队列是一种先进先出(FIFO)的数据结构. Jav

  • JavaScript数据类型检测实现方法详解

    目录 一.typeof 二.instanceof 三.Object.prototype.toString.call() 面试问题 一.typeof 优点:能快速判断基本数据类型,除了 Null: 缺点:不能判别 Object.Array.Null ,都返回 object:判别引用类型除函数显示 function外,其他显示为 object console.log(typeof 55); // number console.log(typeof true); // boolean console.

  • JavaScript使用Fetch的方法详解

    目录 进行 fetch 请求 支持的请求参数 发送带凭据的请求 上传 JSON 数据 上传文件 上传多个文件 检测请求是否成功 自定义请求对象 Headers Guard Response 对象 Body 特性检测 Fetch API 提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应.它还提供了一个全局 fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源. 这种功能以前是使用 XMLHttpRequest实现的.Fetch提供了一个更好

  • 利用JavaScript构建树形图的方法详解

    利用JavaScript构建树形图的方法详解

    目录 什么是树形图 浏览JS树形图 创建一个基本的JS树形图 1. 创建一个HTML页面 2. 参考JavaScript文件 3.设置数据 4. 编写一些JS树形图代码 自定义JS树形图 A. 改变颜色 B. 应用线性色标 C. 格式化标签和工具提示 D. 按升序排列图块 树形图可视化广泛用于分层数据分析.如果你没有经验还想创建一个,那将会有些复杂.下面是一个详细教程,教你如何使用JavaScript创建交互式树形图. 宇宙中只有我们吗?我们每个人都曾在某个时候问过自己这个问题.当我们在考虑地球

  • javascript瀑布流布局实现方法详解

    本文实例讲述了javascript瀑布流布局实现方法.分享给大家供大家参考,具体如下: html结构: <div id="waterfall"> <div class="mod-box"> <div class="mod-img">...</div> </div> <div class="mod-box"> <div class="mod-

  • JavaScript Array对象基本方法详解

    昨天出去前端面试又失败,期间问了个有关于数组对象的问题,下面就这类问题总结下JavaScript常用的数组操作方法. 一.何为数组(Array)对象 数组对象是使用单独的变量名来存储一系列的值. 二.创建数组的三种方式 2.1使用关键词 new 来创建数组对象. let myStar =new Array(); myStar[0]="刘德华"; myStar[1]="成龙"; myStar[2]="林青霞"; myStar[3]="王菲

  • JavaScript创建数组的方法详解

    目录 JavaScript创建数组 数组的使用 将数组转换为分割字符串 数组中新增元素 筛选数组 删除数组指定元素 总结 JavaScript创建数组 1.利用new创建数组 var arr = new Array();//创建了一个空数组 2.利用数组字面量创建数组(比较常用) 字面量:一种固定值的表示方法 一看就知道什么数据类型,比如8一看就是数字类型 //1.利用数组字面量(是方括号)创建数组 var arr = [];//创建了一个空数组 var arr1 = [1,2,'student

  • JavaScript中数组Array方法详解

    ECMAScript 3在Array.prototype中定义了一些很有用的操作数组的函数,这意味着这些函数作为任何数组的方法都是可用的. 1.Array.join()方法 Array.join()方法将数组中所有元素都转化为字符串并连接在一起,返回最后生成的字符串.可以指定一个可选的符号或字符串在生成的字符串中来分隔数组的各个元素.如果不指定分隔符,默认使用逗号.注意:此方法不会改变原始数组 var arr = ['a', 'b', 'c']; console.log(arr.join());

  • JavaScript图片旋转效果实现方法详解

    JavaScript图片旋转效果实现方法详解

    在Canvas API中,上下文CanvasRenderingContext2D对象提供了一个与坐标旋转相关的方法: void rotate(in float angle); // 按给定的弧度顺时针旋转angle rotate()方法旋转的中心始终是canvas的原点.如果要改变旋转中心,需要使用translate方法. 我们可以将绘制的图形每隔一定的时间间隔后,旋转一定的角度重新绘制一次,这样就可以得到旋转的动画效果. 1．旋转的扇叶 将一个梯形按顺时针旋转90°的方式绘制4次,可以绘制出一

  • javascript表单事件处理方法详解

    javascript表单事件处理方法详解

    本文实例为大家分享了javascript处理表单事件的常用方法,供大家参考,具体内容如下 1.访问表单对象的常用方法: ①:根据<form>元素的id属性: var myform=document.getElementById("myformid");  //myformid是某个<form>元素的ID: ②:根据<form>元素的name属性: var myform=document.forms["myformname"]; /

随机推荐