javascript中const和Object.freeze()的差異

這篇文章介紹了使用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中定義常數和配置非常有用。

原文網址：https://codingnconcepts.com/javascript/const-vs-object-freeze/

作者：Ashish Lahoti

#翻譯網址：https ://segmentfault.com/a/1190000038140180

更多程式相關知識，請造訪：程式設計學習網站！ ！

以上是javascript中const和Object.freeze()的差異的詳細內容。更多資訊請關注PHP中文網其他相關文章！