자바스크립트에서 const와 Object.freeze()의 차이점

이 글에서는 const와 Object.freeze()를 사용하여 JS에서 상수와 구성 값을 정의하는 몇 가지 방법과 차이점을 소개합니다. 그들 사이. 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"

小结一下：

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

上面的示例表明，将const和Object.freeze()

JS 애플리케이션에서 상수와 구성 값을 정의할 때. 다음과 같은 특징을 가져야 합니다:

• 애플리케이션 전반에 걸쳐 액세스 가능
• 변수의 값은 변경 불가능해야 합니다.
• 변수에 대한 참조는 변경 불가능해야 합니다.

다음으로 위의 세 가지 기능을 하나씩 살펴보겠습니다.

let 사용

let을 사용하여 변수를 정의합니다.

rrreee

위의 예에서 getApplicationName() 함수는 APP_NAME의 값을 변경합니다. 전역 변수가 변경되는 것을 어떻게 방지합니까?

const를 사용하세요

전역 변수가 변경되지 않도록 const를 사용하여 정의할 수 있나요?

rrreeeconst를 사용하여 정의된 변수의 값을 변경하려고 하면 다음 오류가 발생합니다.

"TypeError: Assignment to Constant Variable."🎜🎜const는 방지할 수 있습니다. 변수 값이 변경되었나요? , 다음 작업을 참조하세요. 🎜rrreeerrreee🎜위의 두 예에서 볼 수 있듯이 const를 사용하더라도 배열이나 개체의 값을 변경할 수도 있습니다. 🎜🎜const는 변수의 값을 불변으로 사용하는 것이 아니라 변수의 참조 주소를 사용하여 변수로 만듭니다. 🎜🎜이제 우리는 배열과 객체의 경우 참조를 변경할 수 없지만 값은 변경할 수 있다는 것을 알았습니다. 배열과 객체의 값이 변경되는 것을 방지하는 방법은 무엇입니까? 🎜

Object.freeze() 사용

🎜여기서 Object.freeze()가 사용되며, Object.freeze는 객체와 배열의 값을 무시합니다. 변화. 🎜rrreee🎜 예제에서 볼 수 있듯이 값을 변경해도 오류가 발생하지 않으며 개체 상태에 영향을 미치지 않습니다. 🎜🎜Object.freeze()는 객체의 값이 변경되는 것을 방지할 수 있지만 참조의 변경은 방지할 수 없습니다: 🎜rrreee🎜요약: 🎜

1. const는 객체나 배열의 참조를 변경할 수 있지만 해당 값은 변경할 수 없습니다.
2. Object.freeze() 객체 또는 배열의 값 변경을 무시합니다.

🎜이를 그룹화하면 객체의 참조 및 값이 변경되지 않습니다. 또는 배열 🎜

const 및 Object.freeze() 사용

rrreee🎜위의 예는 Object.freeze()와 함께 const를 사용하는 것이 다음과 같은 경우에 유용하다는 것을 보여줍니다. JS에서 상수와 구성을 정의하는 것은 매우 유용합니다. 🎜🎜🎜원본 주소: https://codingnconcepts.com/javascript/const-vs-object-freeze/🎜🎜저자: Ashish Lahoti🎜🎜번역 주소: https://segmentfault.com/a/1190000038140180🎜🎜🎜더 보기 더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 학습 웹사이트🎜를 방문하세요! ! 🎜

위 내용은 자바스크립트에서 const와 Object.freeze()의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!