前端 js 栈内存和堆内存基本数据类型和复杂数据类型的区别？-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端 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 引擎将它们存储在栈上，如下图所示：
前端 js 栈内存和堆内存基本数据类型和复杂数据类型的区别？
JavaScript 将对象复杂数据类型（Object) 存储在堆上

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

对于复杂数据类型会把变量名（对象名）作为堆内存的地址指向堆内存如下图所示：
前端 js 栈内存和堆内存基本数据类型和复杂数据类型的区别？

关于栈(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 栈内存和堆内存基本数据类型和复杂数据类型的区别？
以上就是js的栈内存和堆内存感谢大家的阅读
如碰到其他的问题可以私下我一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~！
关注收藏博客作者会持续更新…文章来源地址https://www.toymoban.com/news/detail-503375.html