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 attachEvent和addEventListener使用方法
Mar 19 Javascript
在Javascript里访问SharePoint列表数据的实现方法
May 22 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
JavaScript中property和attribute的区别详细介绍
Mar 03 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 Javascript
浅析javascript中的Event事件
Dec 09 Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 Javascript
Vue全家桶入门基础教程
May 14 Vue.js
使用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 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
JS遍历页面所有对象属性及实现方法
2016/08/01 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
Python优先队列实现方法示例
2017/09/21 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
python 实现波浪滤镜特效
2020/12/02 Python
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
天网工程实施方案
2014/03/26 职场文书
促销活动总结模板
2014/07/01 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
治庸问责工作总结
2015/08/11 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
讨论nginx location 顺序问题
2022/05/30 Servers