js object转数组_const 和 Object.freeze() 的区别 ?
【送5本好书】你应该知道的 5 种 TypeScript设计模式
这篇文章介绍了使用const
和Object.freeze()
在 JS中定义常量和配置值一些做法,以及它们之间的区别。
当我们在 JS 应用程序中定义常量和配置值时。它们应具有以下特点:
- 跨应用程序可访问
- 量的值是不可变的
- 变量的引用应该是不可变的
接下来,我们来一个个看下上面三个特征。
使用 let
我们使用 let
来定义变量。
let APP_NAME = "前端小智@大迁世界"
function getApplicationName() { APP_NAME = "他是谁?" return APP_NAME}
getApplicationName() // "他是谁?"
在上面的示例中,函数getApplicationName()
更改了APP_NAME
的值。我们要如何防止全局变量被更改?
使用 const
我们可以使用 const
来定义,这样全局变量就不会被更改到?
const APP_NAME = "前端小智@大迁世界"
function getApplicationName() { APP_NAME = "他是谁?" return APP_NAME // 这里会抛出 TypeError 错误}
试图更改使用const
定义的变量的值,会导致此错误:
“TypeError: Assignment to constant variable.”
const
能防止变量值被更改吗?,看下面操作:
const fruites = ['葡萄', '哈密瓜']fruites.push('香蕉')
console.log(fruites ) // ["葡萄", "哈密瓜", "香蕉"]
const constants = { APP_NAME: "前端小智@大迁世界"}constants.APP_NAME = "他是谁?"console.log(constants.APP_NAME) // 他是谁?
从上面的两个例子中可以看出,即使使用const
,也可以改变数组或对象的值。
const 不是使用变量的值不可变,而是变量的引用地址来可变。
现在我们知道,在数组和对象的情况下,我们不能改变引用,但可以改变值。如何防止数组和对象的值被改变?
使用 Object.freeze()
这是Object.freeze()
起作用的地方,Object.freeze
忽略对象和数组的值更改。
let constants = Object.freeze({ APP_NAME: "前端小智@大迁世界"})constants.APP_NAME = "他是谁?"console.log(constants.APP_NAME) // "前端小智@大迁世界"
可以从示例中看到,如果更改值,它不会抛出任何错误,也不会影响对象状态。
Object.freeze()
可以防止更改对象的值,但不能阻止引用的更改:
let constants = Object.freeze({ APP_NAME: "前端小智@大迁世界"})constants = { APP_NAME : "Unknown App"}console.log(constants.APP_NAME); // "Unknown App"
小结一下:
const
不允许改变对象或数组的引用,但可以改变其值。Object.freeze()
忽略对象或数组的值更改
把它们组合在一起将防止更改对象或数组的引用和值
一起使用 const 和 Object.freeze()
const constants = Object.freeze({ APP_NAME : "Coding N Concepts"});
constants.APP_NAME = "Unknown App"; // 这被忽略
constants = { APP_NAME : "Unknown App" }; // 这将抛出TypeError
上面的示例表明,将const
和Object.freeze()
结合使用对于在 JS 中定义常量和配置非常有用。
作者:Ashish Lahoti 译者:前端小智 来源:codingnconcepts 原文:https://codingnconcepts.com/javascript/const-vs-object-freeze/
❤️爱心三连击
1.看到这里了就点个在看支持下吧,你的「点赞,在看」是我创作的动力。
2.关注公众号大迁世界
,回复「1」加入前端进阶交流群!「在这里有好多 前端 开发者,会讨论 前端 知识,互相学习」!
3.也可添加微信【qq449245884】,一起成长。
“在看转发”是最大的支持
js object转数组_const 和 Object.freeze() 的区别 ?相关推荐
- php object 数组赋值,php object转数组示例
原本是这样格式的数据: object(Thrift\Server\PageCards)#32 (3) { ["cards"]=> array(10) { [0]=> o ...
- JS高级开发-内置对象Object梳理
Object 构造函数创建一个对象包装器.在JavaScript中,几乎所有的对象都是Object类型的实例,它们都会从Object.prototype继承属性和方法.Object构造函数为给 ...
- 【前端】Object.keys()的使用方法及数组遍历,Object.keys(object).forEach(e => {您的代码})
本文目录 Object.keys()的使用方法及数组遍历 方法一:forEach() 方法二:for()方法 Object.keys()的使用方法及数组遍历 Object.keys()用于获得由对象属 ...
- Object类 任何类都是object类的子类 用object对象接收数组 object类的向上向下转型...
任何类都是object类的子类 用object对象接收数组 object类的向上向下转型 转载于:https://www.cnblogs.com/qingyundian/p/7744351.html
- vb 使用Array.ConvertAll将object类型数组转为string类型数组
vb 使用Array.ConvertAll将object类型数组转为string类型数组有两种方法 1. 方法1 1 Dim int_array() As Object = {1, 2, 3} ...
- calendar控件使用 extjs_extjs年月选择日历及通用js同步ajax调用返回json object
前段做报表,要按年月统计结果,之前的报表用的都是这种年月选择框: ,这在弹框里很难看,我在网上查找了很多资料,找到了别人重写的datepicker方法,开始测试没发现什么问题,后来再上线后发现只要到月 ...
- java object 数组_Java用Object实现数组队列的泛思与理解
1.数组队列:能够限定只存一种数据或(不限定数据类型)同时存储多种数据的一个数组封装类 2.实现:使用泛型,创建对象时若指定数据类型,则只能存储一种数据,否则可以存储多种数据: 2.1.前者:类似于C ...
- 第二十九节:Java基础知识-类,多态,Object,数组和字符串
前言 Java基础知识-类,多态,Object,数组和字符串,回顾,继承,类的多态性,多态,向上转型和向下转型,Object,数组,多维数组,字符串,字符串比较. 回顾 类的定义格式: [类的修饰符] ...
- 字符串对象转数组对象_js对象转数组的方法 js怎么将数组对象转变成字符串
只需要一句,arr.__proto__=[];但是要注意浏览器支持__proto__才行,最新的浏览器应该都支持. 以下两种都可以解决此问题: function transform(obj){ var ...
最新文章
- 开发者如何构建技术影响力
- 项目展示文案生成设计
- LPC单片机IO口默认状态、复位状态、未初始化时输出高电平处理
- 《C和指针》学习备忘
- DOS命令大全(转)
- 【NLP】使用Python可视化Word2vec的结果
- C#-datagriview的表头高度的设置
- Cocos2d-x编程中CCRemoveSelf与CCCallFunc系列函数不能一起使用
- linux live cd ubuntu,在Windows 7上体验Ubuntu Live CD
- net能和python结合吗_如何不用安装python就能在.NET里调用Python库
- 订阅发布系统得解耦与冗余
- 往远程mysql传数据库_三、Navicat将远程MySql数据库数据导入本地
- 数据:昨日BTC和ETH期货持仓均减少约三成,波动率创3月以来新高
- Confluence 6 禁用或者重新启用一个任务
- 警告: [SetPropertiesRule]{Server/Service/Engine/Host/Context} Setting property ..
- matlab做简单的信号处理分析
- python隐藏窗口_python怎么隐藏界面?
- vue router 嵌套、父子、多个路由跳转传值获取不到参数undefined
- idea查看代码行数Statistic
- 有哪些产品适合做引流?什么样的产品才适合做引流款
热门文章
- uhd630黑苹hdmi_【EFI】联想 ThinkCentre M920t-N000 i5-9500 UHD630 ALC662 10.14.6 HDMI 黑苹果Hackintosh 引导下载...
- 测试面试题,自动化测试与性能测试篇(附答案)
- 计算机动画专业哪个大学排名,哪些大学院校数字媒体艺术、动画专业比较排名...
- rds本地库到rds恢复_阿里云rds 备份和还原
- php数组插入mysql,php mysql:将一个php数组插入mysql
- python刷新显示_Python在同一位置刷新显示进度信息
- 面试问题记录1:IP子网规划
- matlab2014调用vs2015进行混合编译生成mex文件
- 华为p40pro如何升级鸿蒙,可以升级到鸿蒙OS的四款华为手机,相信都没有后悔入手!...
- qtcreator 用cmake找不到userPath的解决方法