const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址不得改动。

效果

  • 对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量
  • 对于复合类型的数据(主要是对象和数组),变量指向的内存地址,const只能保证这个指针是固定的,不能保证它指向的数据结构是不可变得
'use strict'
const obj = {}
const arr = []
obj.prop = 123 // 不改动指针
arr.push('Hello') // 只改变数据结构 try{
obj = {} // obj重指向新对象
} catch (err) {
console.log(err.message) // 失败
} try{
arr = []
} catch (err) {
console.log(err.message) // 失败
}

彻底冻结

除了将对象本身冻结,对象的属性也应该冻结

关于Object.freeze

方法可以冻结一个对象。冻结对象是指那些不能添加新的属性,不能修改已有属性的值,不能删除已有属性,以及不能修改已有属性的可枚举性、可配置性、可写性的对象。

'use strict'
const foo = {}
foo.prop = 1
foo.config = {
prop:1
} const freeze = obj => {
Object.freeze(obj)
Object.keys(obj).forEach( key=>{
if(typeof obj[key] === 'object') {
freeze(obj[key])
}
})
} freeze(foo) // 完全冻结
try {
foo.prop = 'test'
} catch (err) {
console.log(err.message)
}

欢迎技术交流,引用请注明出处。

个人网站:godbmw.com

Github:godbmw

理解es6中的const与“不变”的更多相关文章

  1. 前端知识体系:JavaScript基础-原型和原型链-理解 es6 中class构造以及继承的底层实现原理

    理解 es6 中class构造以及继承的底层实现原理 原文链接:https://blog.csdn.net/qq_34149805/article/details/86105123 1.ES6 cla ...

  2. es6中let,const区别与其用法

    ECMAScript 是什么? 首先,我们都知道JavaScript由三部分组成:ECMAScript,DOM,BOM: 其中的ECMAScript是Javascript的语法规范. ECMAScri ...

  3. 【JS】325- 深度理解ES6中的解构赋值

    点击上方"前端自习课"关注,学习起来~ 对象和数组时 Javascript 中最常用的两种数据结构,由于 JSON 数据格式的普及,二者已经成为 Javascript 语言中特别重 ...

  4. 理解ES6中的Iterator

    一.为什么使用Iterator 我们知道,在ES6中新增了很多的特性,包括Map,Set等新的数据结构,算上数组和对象已经有四种数据集合了,就像数组可以使用forEach,对象可以使用for...in ...

  5. 理解ES6中的Symbol

    一.为什么ES6引入Symbol 有时候我们在项目开发的过程中可能会遇到这样的问题,我写了一个对象,而另外的同时则在这个对象里面添加了一个属性或是方法,倘若添加的这个属性或是方法是原本的对象中本来就有 ...

  6. 深入理解 ES6中的 Reflect

    阅读目录 一:Reflect.get(target, name, receiver) 二:Reflect.set(target,name,value,receiver) 三:Reflect.apply ...

  7. 深入理解C++中的Const,Mutable以及Volatile

    我一直认为const表示一个常量,常量就是一个无法被修改的值,但是没有深入理解const的实现,甚至不知道mutable和volatile的存在,最近在书中看到了这一部分的知识,所以本文将详细解析这几 ...

  8. (1)ES6中let,const,对象冻结,跨模块常量,新增的全局对象介绍

    1.let声明变量,var声明变量,而const声明的常量 2.let与var的区别 let可以让变量长期驻扎在内存当作 let的作用域是分块[ {快1  {快2 }  }每个大括号表示一个独立的块 ...

  9. 理解ES6中的Promise

    一.Promise的作用 在ajax请求数据的过程中,我们可以异步拿到我们想要的数据,然后在回调中做相应的数据处理. 这样做看上去并没有什么麻烦,但是如果这个时候,我们还需要做另外一个ajax请求,这 ...

随机推荐

  1. dubbo实现示例

    创建MAVEN项目 项目结构: 在项目pom.xml中添加依赖 <dependency> <groupId>org.apache.zookeeper</groupId&g ...

  2. Mac键盘按键符号

    通过修饰键来查看 像command.option.control.shift这些按键在Mac下叫做修饰键,一般情况下他们大都用来辅助输入或者用作快捷键的修饰键. 打开“系统偏好设置”,点击“键盘→键盘 ...

  3. Java 实现字符串的加密与解密

    package com.wangbo.util; import java.security.Key; import java.security.Security; import javax.crypt ...

  4. USB插入电脑的硬件检测和枚举流程

    USB协议定义了设备的6种状态,仅在枚举过程种,设备就经历了4个状态的迁移:上电状态(Powered),默认状态(Default),地址状态(Address)和配置状态(Configured)(其他两 ...

  5. centos7配置apache服务

    首先写下基本的步骤: 1.环境准备:关闭防火墙(不关闭无法访问,我这里只是简单的配置,实际部署项目应该会有具体的设置),关闭selinux(试过,不关闭也没事,一般都关闭) 配置 ip 2.安装软件包 ...

  6. HttpClient和HttpURLConnection的使用和区别(下)

    转自来自点击打开链接 接着上一篇,我们继续来分析HttpURLConnection的使用,以及两者的共同点和区别. 目录 用法 HttpURLConnection 区别 引用资料 用法 HttpURL ...

  7. LeetCode:105_Construct Binary Tree from Preorder and Inorder Traversal | 根据前序和中序遍历构建二叉树 | Medium

    要求:通过二叉树的前序和中序遍历序列构建一颗二叉树 代码如下: struct TreeNode { int val; TreeNode *left; TreeNode *right; TreeNode ...

  8. Liferay7 BPM门户开发之6: Activiti数据库换为mysql

    第一步: 在mysql中创建数据库名字叫 'activiti' 执行D:\activiti-5.21.0\database\create下的脚本 第二步: 打开=> apache-tomcat/ ...

  9. 08-部署node节点

    部署kubernetes node节点 kubernetes node 节点包含如下组件: Flanneld: 省略,参照之前部署的文档 Docker1.12.5: 省略,参照之前部署的文档 kube ...

  10. apache和tomcat的区别和联系

    两者既有联系又有区别,是两个软件,可独立使用,也可整合使用.Apache是web服务器(静态解析,如HTML),本身只支持html,Web服务器专门处理HTTP请求(request),可以通过插件支持 ...