jsobject转数组_const和Object.freeze()的区别?

【送5本好书】你应该知道的 5 种 TypeScript设计模式

这篇文章介绍了使用const和Object.freeze()在 JS中定义常量和配置值一些做法&＃xff0c;以及它们之间的区别。

当我们在 JS 应用程序中定义常量和配置值时。它们应具有以下特点:

• 跨应用程序可访问
• 量的值是不可变的
• 变量的引用应该是不可变的

接下来&＃xff0c;我们来一个个看下上面三个特征。

使用 let

我们使用 let 来定义变量。

let APP_NAME &＃61; "前端小智&＃64;大迁世界"

function getApplicationName() {
   APP_NAME &＃61; "他是谁&＃xff1f;"
   return APP_NAME
}

getApplicationName() // "他是谁&＃xff1f;"


在上面的示例中&＃xff0c;函数getApplicationName()更改了APP_NAME的值。我们要如何防止全局变量被更改&＃xff1f;

使用 const

我们可以使用 const 来定义&＃xff0c;这样全局变量就不会被更改到&＃xff1f;

const  APP_NAME &＃61; "前端小智&＃64;大迁世界"

function getApplicationName() {
   APP_NAME &＃61; "他是谁&＃xff1f;"
   return APP_NAME // 这里会抛出 TypeError 错误
}



试图更改使用const定义的变量的值&＃xff0c;会导致此错误&＃xff1a;

“TypeError: Assignment to constant variable.”

const 能防止变量值被更改吗&＃xff1f;&＃xff0c;看下面操作&＃xff1a;

const fruites &＃61; [&＃39;葡萄&＃39;, &＃39;哈密瓜&＃39;]
fruites.push(&＃39;香蕉&＃39;)

console.log(fruites ) //  ["葡萄", "哈密瓜", "香蕉"]


const constants &＃61; {
  APP_NAME: "前端小智&＃64;大迁世界"
}
constants.APP_NAME &＃61; "他是谁?"
console.log(constants.APP_NAME) // 他是谁?


从上面的两个例子中可以看出&＃xff0c;即使使用const&＃xff0c;也可以改变数组或对象的值。

const 不是使用变量的值不可变&＃xff0c;而是变量的引用地址来可变。

现在我们知道&＃xff0c;在数组和对象的情况下&＃xff0c;我们不能改变引用&＃xff0c;但可以改变值。如何防止数组和对象的值被改变&＃xff1f;

使用 Object.freeze()

这是Object.freeze()起作用的地方&＃xff0c;Object.freeze 忽略对象和数组的值更改。

let constants &＃61; Object.freeze({
  APP_NAME: "前端小智&＃64;大迁世界"
})
constants.APP_NAME &＃61; "他是谁?"
console.log(constants.APP_NAME) // "前端小智&＃64;大迁世界"


可以从示例中看到&＃xff0c;如果更改值&＃xff0c;它不会抛出任何错误&＃xff0c;也不会影响对象状态。

Object.freeze() 可以防止更改对象的值&＃xff0c;但不能阻止引用的更改&＃xff1a;

let constants &＃61; Object.freeze({
  APP_NAME: "前端小智&＃64;大迁世界"
})
constants &＃61; {
   APP_NAME : "Unknown App"
}
console.log(constants.APP_NAME); // "Unknown App"


小结一下&＃xff1a;

1. const不允许改变对象或数组的引用&＃xff0c;但可以改变其值。

2. Object.freeze() 忽略对象或数组的值更改

把它们组合在一起将防止更改对象或数组的引用和值

一起使用 const 和 Object.freeze()

const constants &＃61; Object.freeze({
  APP_NAME : "Coding N Concepts"
});

constants.APP_NAME &＃61; "Unknown App"; // 这被忽略

constants &＃61; { 
  APP_NAME : "Unknown App" 
}; // 这将抛出TypeError


上面的示例表明&＃xff0c;将const和Object.freeze()结合使用对于在 JS 中定义常量和配置非常有用。

作者&＃xff1a;Ashish Lahoti  译者&＃xff1a;前端小智  来源&＃xff1a;codingnconcepts 原文&＃xff1a;https://codingnconcepts.com/Javascript/const-vs-object-freeze/

❤️爱心三连击

1.看到这里了就点个在看支持下吧&＃xff0c;你的「点赞&＃xff0c;在看」是我创作的动力。

2.关注公众号大迁世界&＃xff0c;回复「1」加入前端进阶交流群&＃xff01;「在这里有好多 前端 开发者&＃xff0c;会讨论 前端 知识&＃xff0c;互相学习」&＃xff01;

3.也可添加微信【qq449245884】&＃xff0c;一起成长。

“在看转发”是最大的支持