JavaScriptのconstとObject.freeze()の違い-jsチュートリアル-php.cn

JavaScriptのconstとObject.freeze()の違い

青灯夜游

リリース： 2020-11-23 17:40:03

転載

3218 人が閲覧しました

JavaScriptのconstとObject.freeze()の違い

この記事では、const と Object.freeze() を使用して JS で定数と構成値を定義する方法をいくつか紹介します。、およびそれらの違い。

JS アプリケーションで定数や設定値を定義するとき。これらは次の特性を持つ必要があります:

アプリケーション間でアクセス可能
変数の値は不変である必要があります
変数への参照は不変である必要があります

次に、上記 3 つの機能を 1 つずつ見てみましょう。

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) // 他是谁?

ログイン後にコピー

上の 2 つの例からわかるように、const を使用した場合でも、配列またはオブジェクトの値を変更することもできます。

const は、変数の値を不変にするのではなく、変数の参照アドレスを使用して変数を可変にします。

配列とオブジェクトの場合、参照は変更できませんが、値は変更できることがわかりました。配列やオブジェクトの値が変更されないようにするにはどうすればよいですか?

Use 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"

ログイン後にコピー

要約:

const オブジェクトまたは配列の参照を変更することはできませんが、その値は変更できます。
Object.freeze() オブジェクトまたは配列の値の変更を無視します。

それらをグループ化すると、オブジェクトまたは配列の参照と値が変更されなくなります。

Object.freeze() で const を使用する

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

constants.APP_NAME = "Unknown App"; // 这被忽略

constants = { 
  APP_NAME : "Unknown App" 
}; // 这将抛出TypeError

ログイン後にコピー

上記の例は、const を Object.freeze() で使用することが JS で役立つことを示しています。で定数と構成を定義すると非常に便利です。