前端 js 栈内存和堆内存 基本数据类型和复杂数据类型的区别?

简介: 前端 js 栈内存和堆内存 基本数据类型和复杂数据类型的区别?

前端 js 栈内存和堆内存 基本数据类型和复杂数据类型的区别?

先了解一下JavaScript 数据类型有哪些?

javaScript 中有8种基本的数据类型:7种为基本数据类型,而Object 为复杂数据类型

基本数据类型(原始数据类型):

  • number 用于任何类型的数字
  • bigint 用于任意长度的整数。
  • string 用于字符串
  • boolean :布尔值 用于 true 和 false。
  • null 用于未知的值
  • undefined 用于未定义的值 —— 只有一个 undefined 值的独立类型。
  • symbol 用于唯一的标识符。

复杂数据类型(非原始数据类型):

亿点小知识: Object 是复杂数据类型的统称,以下类型都是属于Object 类型:

  • Function(函数)
  • Array(数组)
  • Date(日期)
  • RegExp(正则表达式)
接下来我们来看一下 栈内存和堆内存

当定义一个变量的时候,JavaScript 引擎会为变量分配两种内存:栈内存和堆内存。

栈内存和堆内存分别对应基本数据类型和复杂数据类型

  • 栈内存:

基本数据类型: number、bigint 、string 、boo lean 、null 、undefined 、symbol

对于基本数据类型有固定的大小。JavaScript 引擎为它们分配一片固定的内存,并存储在上:

let name = "小张";
let age = 18;

因为 name 和 age 都是基本数据类型,JavaScript 引擎将它们存储在栈上,如下图所示:

JavaScript 将对象复杂数据类型(Object) 存储在堆上

let obj = {
    name: "小张",
    age: 18
};
let arr = [1,2,3]

对于复杂数据类型 会把变量名(对象名)作为堆内存的地址指向 堆内存 如下图所示:

关于栈(Stack)

“栈”具有线程和“先进后出”的特点,也就是每个栈桢一般会保存下一个栈桢的地址,指向next节点(即指向下一个栈桢),类似队列的链式结构。同时先入栈的会先执行,后入栈的会先弹出(执行完销毁)。

我们常说的栈内存一般指的是内存的空间栈。

那么栈内存有哪些特点

数据一执行完毕,变量会立即释放,节约内存空间。

  • 优势:存取速度比堆要快,仅次于直接位于CPU中的寄存器。
  • 缺点:存在栈中的数据大小与生存期必须是确定的,缺乏灵活性。
    亿点小知识:栈内存的数据会进行共享
let a = 2
let b = 2

运行过程是 它会在栈中创建一个变量为a的引用 然后查找栈内是否有2这个数据,如果没有就创建一个2数据进行赋值,当b进行查找的时候会找到2这个数据直接会指向2这个数据,但当a=3的时候 同样会去查找有没有3数据,没有会进行创建3,但不会影响b=2 这个值

关于堆(Heap)

是内存中最大的一块内存区域,也是被各个线程共享的内存区域,所有的对象实例(或复杂类型信息)都保存在堆内存中。

堆内存特点

堆内存中所有的实体都有内存地址值,内存释放靠垃圾回收机制不定时的收取。

  • 堆的优势:可以动态地分配内存大小。
  • 缺点:由于要在运行时动态分配内存,存取速度较慢。(这个一般是体会不到的,只是相对于栈内存而言)
了解一些相关的知识
  • 变量
    变量名是栈内存指针的别名。因为可以先声明变量,后赋值。
    声明变量是在指针页表里建立变量信息。而赋值才是真正的开辟内存空间。但是为了节省内存所以变量名与值数据是分开存放的。
  • 就因为变量与值是分开两个地方保存,所以才有“栈内存数据共享”这个特性。从而会有不同的变量名指向同一个内存,和相同变量名指向不同的内存等情况。

     而保存变量名的内存地址称为指针变量。

  • 内存溢出
    内存溢出是指程序在申请内存时,没有足够的内存空间供其使用,出现out of memory。
  • 内存泄露
  • 内存泄露是指程序在申请内存后,无法释放已申请的内存空间,一次内存泄露危害可以忽略,但内存泄露堆积后果很严重,无论多少内存,迟早会被占光。
    我们在开发中有时候会遇到浏览器崩溃无响应可能就是因为内存堆积的后果。

以上就是js的栈内存和堆内存感谢大家的阅读

如碰到其他的问题 可以私下我 一起探讨学习

如果对你有所帮助还请 点赞 收藏谢谢~!

关注收藏博客 作者会持续更新…

相关文章
|
15天前
|
Web App开发 监控 JavaScript
监控和分析 JavaScript 内存使用情况
【10月更文挑战第30天】通过使用上述的浏览器开发者工具、性能分析工具和内存泄漏检测工具,可以有效地监控和分析JavaScript内存使用情况,及时发现和解决内存泄漏、过度内存消耗等问题,从而提高JavaScript应用程序的性能和稳定性。在实际开发中,可以根据具体的需求和场景选择合适的工具和方法来进行内存监控和分析。
|
15天前
|
JavaScript 前端开发 Java
避免 JavaScript 中的内存泄漏
【10月更文挑战第30天】避免JavaScript中的内存泄漏问题需要开发者对变量引用、事件监听器管理、DOM元素操作以及异步操作等方面有深入的理解和注意。通过遵循良好的编程实践和及时清理不再使用的资源,可以有效地减少内存泄漏的风险,提高JavaScript应用程序的性能和稳定性。
|
8天前
|
监控 前端开发 JavaScript
前端工程化和传统前端开发的区别是什么?
前端工程化相比传统前端开发,在开发模式、代码组织与管理、构建与部署流程、团队协作、性能优化以及技术选型等方面都有了显著的改进和提升,能够更好地应对现代前端应用开发的复杂性和高要求。
|
6天前
|
存储
栈内存
栈内存归属于单个线程,也就是每创建一个线程都会分配一块栈内存,而栈中存储的东西只有本线程可见,属于线程私有。 栈的生命周期与线程一致,一旦线程结束,栈内存也就被回收。 栈中存放的内容主要包括:8大基本类型 + 对象的引用 + 实例的方法
12 1
|
13天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
13天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
20 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
19天前
|
监控 JavaScript 前端开发
如何检测和解决 JavaScript 中内存泄漏问题
【10月更文挑战第25天】解决内存泄漏问题需要对代码有深入的理解和细致的排查。同时,不断优化和改进代码的结构和逻辑也是预防内存泄漏的重要措施。
34 6
|
18天前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
25 1
|
19天前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
16 1
|
19天前
|
JavaScript 前端开发 Java
JavaScript 中内存泄漏的几种常见情况
【10月更文挑战第25天】实际上还有许多其他的情况可能导致内存泄漏。为了避免内存泄漏,我们需要在开发过程中注意及时清理不再需要的资源,合理使用内存,并且定期检查内存使用情况,以确保程序的性能和稳定性
28 2