js中的栈、堆、队列、内存空间
栈(stack) 、堆(heap)、 队列(queue)是js的三种数据结构。
栈(stack)
栈的特点是"LIFO,即后进先出(Last in, first out)"。数据存储时只能从顶部逐个存入,取出时也需从顶部逐个取出。《前端进击的巨人(一):执行上下文与执行栈,变量对象》中解释执行栈时,举了一个乒乓球盒子的例子,来演示栈的存取方式,这里再举个栗子搭积木。
举个栗子:乒乓球盒子/搭建积木
JavaScript中Array数组模拟栈:
var arr = [1, 2, 3, 4, 5]; arr.push(6); // 存入数据 arr -> [1, 2, 3, 4, 5, 6]
arr.pop(); // 取出数据 arr -> [1, 2, 3, 4, 5]
堆(heap)
堆的特点是"无序"的key-value
"键值对"存储方式。
举个栗子:书架存书
我们想要在书架上找到想要的书,最直接的方式就是通过查找书名,书名就是我们的key。拿着这把key,就可以轻松检索到对应的书籍。
"堆的存取方式跟顺序没有关系,不局限出入口"。
队列 (queue)
队列的特点是是"FIFO,即先进先出(First in, first out)" 。
数据存取时"从队尾插入,从队头取出"。
"与栈的区别:栈的存入取出都在顶部一个出入口,而队列分两个,一个出口,一个入口"。
举个栗子:排队取餐
JavaScript中Array数组模拟队列:
var arr = [1, 2, 3, 4, 5]; // 队尾in
arr.push(6); // 存入 arr -> [1, 2, 3, 4, 5, 6]
// 队头out
arr.shift(); // 取出 arr -> [2, 3, 4, 5, 6]
栈、堆、队列在JavaScript中的应用
1. 代码运行方式(栈应用/函数调用栈)
《前端进击的巨人(一):执行上下文与执行栈,变量对象》详解了JavaScript运行时的函数调用过程,而其中执行栈(函数调用栈)就是用到栈的数据结构。
JavaScript中函数的执行过程,其实就是一个入栈出栈的过程:
- 当脚本要调用一个函数时,JS解析器把该函数推入栈中(push)并执行
- 当函数运行结束后,JS解析器将它从堆栈中推出(pop)
具体执行过程可翻阅上篇文章《前端进击的巨人(一):执行上下文与执行栈,变量对象》,这里不再赘述。
2. 内存存储(栈、堆)
JavaScript中变量类型有两种:
- 基础类型(
Undefined, Null, Boolean, Number, String, Symbol
)一共6种 - 引用类型(
Object
)
JS中的基础数据类型,这些值都有固定的大小,往往都保存在栈内存中(闭包除外),由系统自动分配存储空间。我们可以直接操作保存在栈内存空间的值,因此基础数据类型都是按值访问 数据在栈内存中的存储与使用方式类似于数据结构中的堆栈数据结构,遵循后进先出的原则。
JS的引用数据类型,比如数组Array,它们值的大小是不固定的。引用数据类型的值是保存在堆内存中的对象。JS不允许直接访问堆内存中的位置,因此我们不能直接操作对象的堆内存空间。在操作对象时,实际上是在操作对象的引用而不是实际的对象。因此,引用类型的值都是按引用访问的。这里的引用,我们可以粗浅地理解为保存在栈内存中的一个地址,该地址与堆内存的实际值相关联。
3. 事件轮询(队列)
JavaScript中事件轮询(Event Loop)的执行机制,就是采用队列的存取方式,因事件轮询(Event Loop)也是JS基础中的一个比较难理解的知识点,后续另开一篇章再作详细探究。
深浅拷贝
将一个变量的值赋值给另一个变量,相当于在栈内存中创建了一个新的内存空间,然后从栈中复制值,存储到这个新空间中。对于基本类型,栈中存储的就是它自身的值,所以新内存空间存储的也是一个值。直接改变新变量的值,不会影响到旧变量的值,因为他们值存储的内存空间不同。
// 基本类型复制变量
var a = 10;
var b = a;
b = 20; a //
b //
而对于引用类型来说,同样是复制栈中存储的值。但是栈存储的只是其引用地址,其具体的值存储在堆中。变量复制仅复制栈中存储的值,不会复制堆中存储的值,所以新变量在栈中的值是一个地址指针。
// 引用类型复制变量
var a = { age: 27 };
var b = a;
b.age = 29; a.age == b.age; //
可见,变量复制赋值,都属于栈存储拷贝,因此深浅拷贝可以这样区分:
- "浅拷贝:栈存储拷贝"
- "深拷贝:栈堆存储拷贝"
深拷贝会同时开辟新的栈内存,堆内存空间。
// 利用JSON对象方法实现深拷贝
var a = { age: 27 };
var b = JSON.parse(JSON.stringify(a));
b.age = 29; a.age //
b.age //
函数传参数是按值传递?按引用传递?
var person = {
age: 27
};
function foo (person) {
person.age = 29;
}
foo(person);
person.age // 29;
函数调用时,会对参数赋值。而参数传递过程其实同样是变量复制的过程,所以它是按值传递。var person = person
,因为传递参数是对象时,变量复制仅复制的栈存储(浅拷贝),所以修改对象属性会造成外部变量对象的修改。
至此,当我们理清栈、堆数据结构,以及JS中数据类型存取方式。深浅拷贝问题也就通顺了。
内存空间
内存空间管理
JavaScript执行过程中内存分配:
- 为变量对象分配需要的内存
- 在分配到的内存中进行读/写操作
- 不再使用时将其销毁,释放内存
内存管理不善,会出现内存泄露,造成浏览器内存占用过多,页面卡顿等问题。
垃圾回收机制
JavaScript中有自动垃圾回收机制,会通过标记清除的算法识别哪些变量对象不再使用,对其进行销毁。开发者也可在代码中手动设置变量值为null(a = null
)进行标记清除,让其失去引用,以便下一次垃圾回收时进行有效回收。
局部环境中,函数执行完成后,函数局部环境声明的变量不再需要时,就会被垃圾回收销毁(理想的情况下,闭包会阻止这一过程)。
全局环境只有页面退出时才会出栈,解除变量引用。所以开发者应尽量避免在全局环境中创建全局变量,如需使用,也要在不需要时手动标记清除,将其内存释放掉。
为什么会有栈内存和堆内存之分?
通常与垃圾回收机制有关。为了使程序运行时占用的内存最小。
当一个方法执行时,每个方法都会建立自己的内存栈,在这个方法内定义的变量将会逐个放入这块栈内存里,随着方法的执行结束,这个方法的内存栈也将自然销毁了。因此,所有在方法中定义的变量都是放在栈内存中的;
当我们在程序中创建一个对象时,这个对象将被保存到运行时数据区中,以便反复利用(因为对象的创建成本通常较大),这个运行时数据区就是堆内存。堆内存中的对象不会随方法的结束而销毁,即使方法结束后,这个对象还可能被另一个引用变量所引用(方法的参数传递时很常见),则这个对象依然不会被销毁,只有当一个对象没有任何引用变量引用它时,系统的垃圾回收机制才会在核实的时候回收它。
js中的栈、堆、队列、内存空间的更多相关文章
- js 中的栈和堆
js中的栈与堆的讲解/基本数据类型与引用类型的讲解 前言:1. 学习前端,入门简单,想学好确实是一件很困难的事情,东西多而且杂,版本快速迭代,产品框架层出不穷. 2. 前端学习成本确实很高,需要不断的 ...
- 深入理解Node.js中的垃圾回收和内存泄漏的捕获
深入理解Node.js中的垃圾回收和内存泄漏的捕获 文章来自:http://wwsun.github.io/posts/understanding-nodejs-gc.html Jan 5, 2016 ...
- javascript中的栈、队列。
javascript中的栈.队列 栈方法 栈是一种LIFO(后进先出)的数据结构,在js中实现只需用到2个函数 push() 接受参数并将其放置 ...
- C++中的类所占内存空间总结
C++中的类所占内存空间总结 最近在复习c++的一些基础,感觉这篇文章很不错,转载来,大家看看! 类所占内存的大小是由成员变量(静态变量除外)决定的,成员函数(这是笼统的说,后面会细说)是不计算 ...
- C++中的类所占内存空间+继承中的成员访问控制
C++学习之继承中的成员访问控制 C++中的类所占内存空间总结
- js中的栈与堆的讲解/基本数据类型与引用类型的讲解
1.栈(stack)和堆(heap) stack为自动分配的内存空间,它由系统自动释放:而heap则是动态分配的内存,大小不定也不会自动释放. 2.基本类型和引用类型 基本类型:存放在栈内存中的简单数 ...
- JS中的栈和堆
一.栈和堆 栈(stack):栈会自动分配内存空间,会自动释放,存放基本类型,简单的数据段,占据固定大小的空间. 基本类型:String,Number,Boolean,Null,Undefined 堆 ...
- js中的栈,堆。
一.栈和堆 栈(stack):栈会自动分配内存空间,会自动释放,存放基本类型,简单的数据段,占据固定大小的空间. 基本类型:String,Number,Boolean,Null,Undefined 堆 ...
- 关于JS数组的栈和队列操作
1.js支持重载吗? 虽然js 本身并没有函数重载,但是可以用arguments来模拟重载,函数名相同,参数不同,arguments的length属性,获取参数个数,索引属性获取参数值 2.什么是作用 ...
随机推荐
- Python拆分DataFrame
# 在Python中可以根据某列的具体内容来拆分数据,保存成多个DataFrame! # 代码如下: ycsj = pfsj[pfsj['备注'].isin(['1'])] # 拆分数据: 结果:
- js入门-文本框输入特定内容控制另一个文本框
在填写表单时,有时需要某些文本框隐藏,当一文本框输入特定内容时才会显示隐藏的文本框,这一功能可以用onchange事件或oninput事件实现.下面对比下两种方法实现的区别: onchange()定义 ...
- bash的内置字符串处理工具
bash内置字符串处理工具: 1.字符串切片: ${var:offset:number} 取字符串的子串: ${var: -length} 取字符串的最右侧的length个字符.注意:冒号右侧必须有 ...
- Java设计模式之十一 ---- 策略模式和模板方法模式
前言 在上一篇中我们学习了行为型模式的访问者模式(Visitor Pattern)和中介者模式(Mediator Pattern).本篇则来学习下行为型模式的两个模式,策略模式(Strategy Pa ...
- MyBatis实现模糊查询的几种方式
在学习MyBatis过程中想实现模糊查询,可惜失败了.后来上百度上查了一下,算是解决了.记录一下MyBatis实现模糊查询的几种方式. 数据库表名为test_student,初始化了几条记录,如图: ...
- Python open 读和写
# -*- coding: utf-8 -*- # 测试文件名为: # text.txt # 测试文件内容为: # abcdefg # 每次操作后将文件复原 # r # 以只读方式打开文件,文件不可写 ...
- sed命令替换字符包含斜杠\,引号的处理方法
在字符替换中,可能会遇见引号,“/”等的替换,这时应该注意,sed的命令原型是: sed -i "s/oldstring/goalstring/g" file 如果一个路径是da ...
- 【洛谷】【最小生成树】P1536 村村通
[题目描述:] 某市调查城镇交通状况,得到现有城镇道路统计表.表中列出了每条道路直接连通的城镇.市政府"村村通工程"的目标是使全市任何两个城镇间都可以实现交通(但不一定有直接的道路 ...
- [NOIP2018]赛道修建
嘟嘟嘟 因为一些知道的人所知道的,不知道的人所不知道的原因,我来改写今年的NOIP了. 现在看这题,心中满是疑问:我当时是多么的zz,这种水题为啥没做出来-- 不管了,说正事. 先考虑部分分. 1.\ ...
- 小度之家SDK功能介绍
https://developer.dueros.baidu.com/doc/device-devkit/intro_markdown