JavaScript基础心法 数据类型


Posted in Javascript onMarch 05, 2018

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

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

基本数据结构

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

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

队列

队列是一种先进先出(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. 堆内存是无序存储,可以根据引用直接获取。

参考文章

理解js内存分配

原始值和引用值

在ECMAScript中,变量可以存放两种类型的值,即原始值和引用值。
原始值指的就是代表原始数据类型(基本数据类型)的值,即Undefined,Null,Number,String,Boolean类型所表示的值。
引用值指的就是复合数据类型的值,即Object,Function,Array,以及自定义对象,等等

栈和堆

与原始值与引用值对应存在两种结构的内存即栈和堆
栈是一种后进先出的数据结构,在javascript中可以通过Array来模拟栈的行为

原始值是存储在栈中的简单数据,也就是说,他们的值直接存储在变量访问的位置。

堆是基于散列算法的数据结构,在javascript中,引用值是存放在堆中的。
引用值是存储在堆中的对象,也就是说,存储在变量处的值(即指向对象的变量,存储在栈中)是一个指针,指向存储在堆中的实际对象.

例:var obj = new Object(); obj存储在栈中它指向于new Object()这个对象,而new Object()是存放在堆中的。

那为什么引用值要放在堆中,而原始值要放在栈中,不都是在内存中吗,为什么不放在一起呢?那接下来,让我们来探索问题的答案!

首先,我们来看一下代码:

function Person(id,name,age){
this.id = id;
this.name = name;
this.age = age;
}
var num = 10;
var bol = true;
var str = "abc";
var obj = new Object();
var arr = ['a','b','c'];
var person = new Person(100,"笨蛋的座右铭",25);

然后我们来看一下内存分析图:

JavaScript基础心法 数据类型

变量num,bol,str为基本数据类型,它们的值,直接存放在栈中,obj,person,arr为复合数据类型,他们的引用变量存储在栈中,指向于存储在堆中的实际对象。

由上图可知,我们无法直接操纵堆中的数据,也就是说我们无法直接操纵对象,但我们可以通过栈中对对象的引用来操作对象,就像我们通过遥控机操作电视机一样,区别在于这个电视机本身并没有控制按钮。

现在让我们来回答为什么引用值要放在堆中,而原始值要放在栈中的问题:

记住一句话:能量是守衡的,无非是时间换空间,空间换时间的问题

堆比栈大,栈比堆的运算速度快,对象是一个复杂的结构,并且可以自由扩展,如:数组可以无限扩充,对象可以自由添加属性。将他们放在堆中是为了不影响栈的效率。而是通过引用的方式查找到堆中的实际对象再进行操作。相对于简单数据类型而言,简单数据类型就比较稳定,并且它只占据很小的内存。不将简单数据类型放在堆是因为通过引用到堆中查找实际对象是要花费时间的,而这个综合成本远大于直接从栈中取得实际值的成本。所以简单数据类型的值直接存放在栈中。

Javascript 相关文章推荐
js数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
javascript开发技术大全 第4章 直接量与字符集
Jul 03 Javascript
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
Dec 12 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
微信小程序点击控件修改样式实例详解
Jul 07 Javascript
浅谈vue的踩坑路
Aug 31 Javascript
Vue 滚动行为的具体使用方法
Sep 13 Javascript
基于Vue中使用节流Lodash throttle详解
Oct 30 Javascript
js获取html页面代码中图片地址的实现代码
Mar 05 #Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 #Javascript
node.js通过axios实现网络请求的方法
Mar 05 #Javascript
axios发送post请求springMVC接收不到参数的解决方法
Mar 05 #Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 #Javascript
解决vue处理axios post请求传参的问题
Mar 05 #Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 #Javascript
You might like
PHP Curl模拟登录微信公众平台、新浪微博实例代码
2016/01/28 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
循环 vs 递归浅谈
2013/02/28 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
搭建一个nodejs脚手架的方法步骤
2019/06/28 NodeJs
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
Python实现的堆排序算法示例
2018/04/29 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
阿玛尼美妆俄罗斯官网:Giorgio Armani Beauty RU
2020/07/19 全球购物
领导的自我鉴定
2013/12/28 职场文书
财务学生的职业生涯发展
2014/02/11 职场文书
活动总结报告怎么写
2014/07/03 职场文书
招商引资工作汇报
2014/10/28 职场文书
加入学生会自荐书
2015/03/05 职场文书
导游词之井冈山
2019/11/20 职场文书
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python
MySQL优化之慢日志查询
2022/06/10 MySQL
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL