JS中const对于复杂类型变量和普通类型变量的区别详解

 更新时间:2023年11月05日 08:38:45   作者:悲伤周杰伦  
我们在开发的过程中一定常常发现const关键字定义的简单类型变量不可以改变,但是你如果定义的是一个复杂类型变量(比如对象)的话对里面属性的增删改查是可以的,那这又是为什么呢,接下来就来和小编一起探讨一下吧

const关键字是让什么不能变?

const实际上的不能变并不是说变量的值不能变,而是初始化后变量所指向在栈中的内存上的数据不能变

我们先切记这一点先,看下文!!!

js中变量的两种类型

js中的变量类型可以分为两种:

  • 简单数据类型

    Number

    String

    Boolean

    Undefined

    null

    symbol

  • 复杂数据类型(下面我都称为对象)

    Object

    Array

    Function(函数实际上是对象)

两种类型的的存储区别

都是两种数据结构,靠他们来给变量分配使用内存

js的两种数据类型的变量即是存储在堆和栈中

简单类型变量的存储

这种类型的变量我们是用得最多的

它是存储在栈中而已

以下是的示例定义

var num=100
var bool=false
var str='字符串

而他在栈中的存储可以形象比喻为这样子

其中变量的值存储在变量指向的栈中的内存地址上,看上图,100就是存储在内存地址上

结合上面所说的const的作用就知道为什么const关键字定义的简单类型的变量的值不能变,因为改变其变量的值是直接改变变量指向的内存上的数据,这是const关键字不允许的

那为什么复杂类型的又可以呢,看下文

复杂类型变量的存储

先说一下,复杂类型的值的更改指的是

复杂类型变量里属性可以更改,整个对象的更改const关键字是不允许的!!!

比如

const ob={
a:100,
b:200
}
const ob1={
c:100
}
ob.a=200         //   successful ! ! !
ob=ob1           //   fail ! ! !

如果需要替换整个对象,const关键字是不允许的,但是属性值的更改是可以的

那这又是为什么 ? 看下面

我们先要记住const关键字是不允许更改变量的哪个地方,是变量在栈中存储变量值的内存地址上的值

对,没错 !!!这也是普通变量值不能更改的原因

但是为什么复杂变量的可以更改呢,但是不可以替换呢

主要原因是:

复杂变量的值不是存储在栈中,而是存储在堆里,复杂变量在栈中内存上的值是指向存储该复杂类型变量值的堆上的地址

如果这句话看不懂的话,可以看下图

所以更改对象的属性值是更改在堆上的值,而替换对象则是要更改存储在栈中内存地址上变量在堆上存储数据的地址值,而这个更改恰恰是const关键字不允许的!!!

这也是为什么会有对象的浅拷贝和深拷贝的原因,因为你把一个对象直接赋值给另一个对象,准确来说是把对象变量在栈中的存储的指向改变了,指向了同一个在堆里存储的数据,所以你改变其中一个变量的值,会造成其堆上存储的数据改变,所以另外一个对象的值也会改变,这就是为啥会有浅拷贝!!!

以上就是JS中const对于复杂类型变量和普通类型变量的区别详解的详细内容,更多关于JS const复杂类型和普通类型变量区别的资料请关注脚本之家其它相关文章!

相关文章

  • Javascript实现简易天数计算器

    Javascript实现简易天数计算器

    这篇文章主要为大家详细介绍了Javascript实现简易天数计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • js实现鼠标滑动到某个div禁止滚动

    js实现鼠标滑动到某个div禁止滚动

    这篇文章主要为大家详细介绍了js实现鼠标滑动到某个div禁止滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 详解TypeScript中type与interface的区别

    详解TypeScript中type与interface的区别

    在写 ts 相关代码的过程中,总能看到 interface 和 type 的身影。它们的作用好像都一样的,相同的功能用哪一个都可以实现,也都很好用,所以也很少去真正的理解它们之间到底有啥区别,因此本文将详细讲解二者的区别,需要的可以参考一下
    2022-04-04
  • Layui 解决表格异步调用后台分页的问题

    Layui 解决表格异步调用后台分页的问题

    今天小编就为大家分享一篇Layui 解决表格异步调用后台分页的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 详解js location.href和window.open的几种用法和区别

    详解js location.href和window.open的几种用法和区别

    这篇文章主要介绍了详解js location.href和window.open的几种用法和区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • uniapp中解析markdown支持网页和小程序实现示例

    uniapp中解析markdown支持网页和小程序实现示例

    这篇文章主要为大家介绍了uniapp中解析markdown支持网页和小程序实现示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • JavaScript学习笔记之ES6数组方法

    JavaScript学习笔记之ES6数组方法

    ES6给数组添加了一些新特性,而这些新特性到目前为止完全可以运用到自己的业务层。在这一节中将总结有关于ES6给数组提供一些新特性的使用方法
    2016-03-03
  • JavaScript this关键字指向常用情况解析

    JavaScript this关键字指向常用情况解析

    这篇文章主要介绍了JavaScript this关键字指向常用情况解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • uniapp H5遮罩层、弹窗以及蒙层滚动穿透/滑动穿透解决办法

    uniapp H5遮罩层、弹窗以及蒙层滚动穿透/滑动穿透解决办法

    最近用uin-app做项目遇到了不少问题,下面这篇文章主要给大家介绍了关于uniapp H5遮罩层、弹窗以及蒙层滚动穿透/滑动穿透的解决办法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • Javascript 链式作用域详细介绍

    Javascript 链式作用域详细介绍

    这篇文章主要介绍了Javascript 链式作用域详细介绍的相关资料,需要的朋友可以参考下
    2017-02-02

最新评论