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


Posted in Javascript onAugust 25, 2017

一个很基础的知识点,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};

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

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

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

复制

基本数据类型

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

引用数据类型

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

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

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

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

这有什么不同呢?

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

为什么?

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

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

总结

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

Javascript 相关文章推荐
javascript 常用代码技巧大收集
Feb 25 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
jquery parent和parents的区别分析
Oct 02 Javascript
JavaScript数组随机排列实现随机洗牌功能
Mar 19 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
JS实现九宫格拼图游戏
Jun 28 Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 #Javascript
Vue.js实现网格列表布局转换方法
Aug 25 #Javascript
Angular2 组件间通过@Input @Output通讯示例
Aug 24 #Javascript
Angular2 组件交互实例详解
Aug 24 #Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 #jQuery
探究react-native 源码的图片缓存问题
Aug 24 #Javascript
详解vue.js之绑定class和style的示例代码
Aug 24 #Javascript
You might like
PHP5+UTF8多文件上传类
2008/10/17 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
php打印输出棋盘的实现方法
2014/12/23 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
javascript cookies操作集合
2010/04/12 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
js实现div闪烁原理及实现代码
2014/06/24 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
微信小程序实现animation动画
2018/01/26 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
VUE项目axios请求头更改Content-Type操作
2020/07/24 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
linux系统使用python监测系统负载脚本分享
2014/01/15 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
Python 中开发pattern的string模板(template) 实例详解
2017/04/01 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
Django重设Admin密码过程解析
2020/02/10 Python
Django接收照片储存文件的实例代码
2020/03/07 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
文员岗位职责
2013/11/09 职场文书
大学专科生推荐信范文
2013/11/23 职场文书
大三预备党员入党思想汇报
2014/01/08 职场文书
市场营销策划方案
2014/06/11 职场文书
青奥会口号
2014/06/12 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
理想国读书笔记
2015/06/25 职场文书
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js
聊聊mysql都有哪几种分区方式
2022/04/13 MySQL