In diesem Artikel werden einige Methoden zur Verwendung von const
und Object.freeze()
zum Definieren von Konstanten und Konfigurationswerten in JS sowie die Unterschiede vorgestellt zwischen ihnen. const
和Object.freeze()
在 JS中定义常量和配置值一些做法,以及它们之间的区别。
当我们在 JS 应用程序中定义常量和配置值时。它们应具有以下特点:
接下来,我们来一个个看下上面三个特征。
我们使用 let
来定义变量。
let APP_NAME = "前端小智@大迁世界" function getApplicationName() { APP_NAME = "他是谁?" return APP_NAME } getApplicationName() // "他是谁?"
在上面的示例中,函数getApplicationName()
更改了APP_NAME
的值。 我们要如何防止全局变量被更改?
我们可以使用 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
忽略对象和数组的值更改。
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 constants = Object.freeze({ APP_NAME : "Coding N Concepts" }); constants.APP_NAME = "Unknown App"; // 这被忽略 constants = { APP_NAME : "Unknown App" }; // 这将抛出TypeError
上面的示例表明,将const
和Object.freeze()
Können wir
- Applikationsübergreifend zugänglich
- Der Wert der Variablen sollte unveränderlich sein
- Der Verweis auf die Variable sollte unveränderlich sein
Als nächstes schauen wir uns die oben genannten drei Funktionen einzeln an.
Verwenden Sie let
Wir verwenden
rrreeelet
, um Variablen zu definieren.Im obigen Beispiel ändert die Funktion
getApplicationName()
den Wert vonAPP_NAME
. Wie verhindern wir, dass globale Variablen geändert werden?Verwenden Sie const
const
verwenden, um zu definieren, dass globale Variablen nicht geändert werden? rrreeeDer Versuch, den Wert einer mit const
definierten Variablen zu ändern, führt zu diesem Fehler:
const
kann dies verhindern der Variablenwert Wurde er geändert? , siehe die folgende Operation: 🎜rrreeerrreee🎜Wie Sie an den beiden obigen Beispielen sehen können, können Sie auch mit const
den Wert eines Arrays oder Objekts ändern. 🎜🎜const verwendet nicht den Wert der Variablen, um unveränderlich zu sein, sondern die Referenzadresse der Variablen, um sie variabel zu machen. 🎜🎜Jetzt wissen wir, dass wir bei Arrays und Objekten die Referenz nicht ändern können, aber wir können den Wert ändern. Wie kann verhindert werden, dass die Werte von Arrays und Objekten geändert werden? 🎜Object.freeze()
ins Spiel, Object.freeze ignoriert die Werte von Objekten und Arrays Ändern. 🎜rrreee🎜 Wie Sie dem Beispiel entnehmen können, wird beim Ändern des Werts kein Fehler ausgegeben und der Objektstatus wird nicht beeinträchtigt. 🎜🎜Object.freeze()
kann verhindern, dass der Wert des Objekts geändert wird, aber es kann nicht die Änderung der Referenz verhindern: 🎜rrreee🎜Zusammenfassend: 🎜const
nicht Es ist erlaubt, die Referenz eines Objekts oder Arrays zu ändern, nicht jedoch seinen Wert. Object.freeze()
Wertänderungen eines Objekts oder Arrays ignorieren const
mit Object.freeze()
nützlich ist, wenn Das Definieren von Konstanten und Konfigurationen in JS ist sehr nützlich. 🎜🎜🎜Originaladresse: https://codingnconcepts.com/javascript/const-vs-object-freeze/🎜🎜Autor: Ashish Lahoti🎜🎜Übersetzungsadresse: https://segmentfault.com/a/1190000038140180🎜🎜🎜Mehr Für mehr Programmierwissen besuchen Sie bitte: 🎜Programming Learning Website🎜! ! 🎜Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen const und Object.freeze() in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!