JS中的const命令你真懂它吗


Posted in Javascript onMarch 08, 2020

const 定义

const声明一个只读的常量 。一旦声明, 常量的值就不能改变。
常量 所谓的常量就是不能改变的值

const PI = 3.1415;
PI // 3.1415
PI = 3;
// TypeError: Assignment to constant variable.

上面代码表明改变常量的值会报错。

const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。

我们都知道const一般声明一个只读的常量,声明之后就不能修改了,并且声明时必须初始化

const message = 'hello'
message // hello
const message 
// ❌报错SyntaxError: Missing initializer in const declaration
const message = 'hello'
message ='world'
// 报错TypeError: Assignment to constant variable.

那大家有没有遇到这样的情况

const dog = {}
dog.name = 'wangcai'
dog // {name: "wangcai"}

奇怪,上面的例子明明改变了变量的值,为什么没有报错?

下面我们就探究一下const的本质

本质

其实const保证的并不是变量的值不动,而是变量指向的内存地址不得改动
可能有点抽象,我们来细细分析一下const声明的全过程

const message = 'hello'
  1. js看到变量message后,会给message分配一个空房间(内存空间)
  2. 看到等号右侧的字符串‘hello'时,会立马给它安排另一个房间,并把‘hello'放到这个房间
  3. js会拿小本本抄下这个房间的房间号(内存地址)
  4. 把这个房间号放到message这个房间里面,这时message中存储的就是hello字符串的存储地址(即指针)

当我们再次赋值时

message = 'word'

js会将存储‘word'字符串的地址赋给message,而message又是用const定义的变量,不可以改变变量里存储的内存地址,这时就会❌报错

而当遇到下面这种情况

const dog = {}
dog.name = 'wangcai'
dog // {name: "wangcai"}

则可以理解为
dog中存储的是对象的房间号(内存地址)
dog.name= 'wangcai',在给对象添加属性的过程,并没有改变这个地址,所以结果正常显示

划重点
const保证的并不是变量的值不动,而是变量指向的内存地址不得改动

到此这篇关于JS中的const命令你真懂它吗的文章就介绍到这了,更多相关JS const命令内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Jquery插件编写简明教程
Mar 25 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
Jul 27 Javascript
jQuery插件制作的实例教程
May 16 Javascript
js验证框架之RealyEasy验证详解
Jun 08 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
js实现轮播图的完整代码
Oct 26 Javascript
如何通过JS实现转码与解码
Feb 21 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
Vue 封装防刷新考试倒计时组件的实现
Jun 05 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 #Javascript
Vue vm.$attrs使用场景详解
Mar 08 #Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
Mar 08 #Javascript
vue-cli点击实现全屏功能
Mar 07 #Javascript
vue全屏事件开发详解
Jun 17 #Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 #Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
Mar 07 #Javascript
You might like
第十三节 对象串行化 [13]
2006/10/09 PHP
7个超级实用的PHP代码片段
2011/07/11 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
PHP数组实例详解
2016/06/26 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
Python开发之基于模板匹配的信用卡数字识别功能
2020/01/13 Python
Python新手如何理解循环加载模块
2020/05/29 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
2015/01/04 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
标签和贴纸印刷:Lightning Labels
2018/03/22 全球购物
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
eBay比利时购物网站:eBay.be
2019/08/09 全球购物
销售提升方案
2014/06/07 职场文书
意向书范本
2014/07/29 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
2014年标准化工作总结
2014/12/17 职场文书
护士自荐信怎么写
2015/03/06 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript