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 相关文章推荐
简单JS代码压缩器
Oct 12 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
浅谈webpack-dev-server的配置和使用
May 17 Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 Javascript
微信小程序textarea层级过高的解决方法
Mar 04 Javascript
ES11新增的这9个新特性,你都掌握了吗
Oct 15 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
php获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
php遍历数组的4种方法总结
2014/07/05 PHP
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
php去除二维数组的重复项方法
2015/11/03 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
Javascript 读书笔记索引贴
2010/01/11 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
JQuery实现table行折叠效果以JSON做数据源
2014/05/26 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
2015/07/28 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
Node.js 回调函数实例详解
2017/07/06 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
openlayers实现地图弹窗
2020/09/25 Javascript
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
python绘制多个子图的实例
2019/07/07 Python
python 表格打印代码实例解析
2019/10/12 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
Python无头爬虫下载文件的实现
2020/04/02 Python
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
abstract class和interface有什么区别
2013/08/04 面试题
先进集体事迹材料
2014/02/17 职场文书
安全生产中长期规划实施方案
2014/02/21 职场文书
个人工作年终总结
2015/03/09 职场文书