const 和 Object.freeze() 的区别 ?

前端小智 2020/11/20 14:25:32

作者:Ashish Lahoti译者:前端小智来源:codingnconcepts点赞再看,养成习惯本文 GitHub https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。…
作者:Ashish Lahoti
译者:前端小智
来源:codingnconcepts
点赞再看,养成习惯

本文 GitHub https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。

最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了。

github 地址:https://github.com/qq44924588...

这篇文章介绍了使用constObject.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"

小结一下:

  1. const不允许改变对象或数组的引用,但可以改变其值。
  2. 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

上面的示例表明,将constObject.freeze()结合使用对于在 JS 中定义常量和配置非常有用。


原文:https://codingnconcepts.com/j...

交流

文章每周持续更新,可以微信搜索「 大迁世界 」第一时间阅读和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习,另外关注公众号,后台回复福利,即可看到福利,你懂的。

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[const 和 Object.freeze() 的区别 ?]http://www.zyiz.net/tech/detail-149185.html

上一篇:把 Node.js 中的回调转换为 Promise

下一篇:ES6(十一)—— Promise(更优的异步编程解决方案)

赞(0)

共有 条评论 网友评论

验证码: 看不清楚?
    关注微信小程序
    程序员编程王-随时随地学编程

    扫描二维码或查找【程序员编程王】

    可以随时随地学编程啦!

    技术文章导航 更多>
    扫一扫关注最新编程教程