面接官:let const Objectを紹介してください.freeze(),set,get

フロントエンドのピークは毎日1題です.
このシリーズでは、各パートナーが出題に参加することができ、あなたの答えをコメントエリアで披露することができます.javaScriptはかなりダイナミックな言語で、誰もが自分のスタイルと見解を持っています.皆さんが毎日の問題を積極的に提供し、次のように異なる答えを提供することを歓迎します.
私は毎日いくつかの人を招待して質問に答えて、質問に答えさえすれば、評論区で広告をすることができます.
不定期に賞品(と )を配布します
第1四半期:ES6基礎シリーズ:
思考問題:let , const , object.freeze()の違い
最も簡単なconstから始めます.
上のように書くと間違いを報告する
ヒント:Assignment to constant variable.
しかし、私たちが
コードが正常に動作していることを確認し、エラーは発生しませんでした.
では、相手をもう一度試してみます.
すべてが正常に動作していることを発見
次にletを試します.
コードが正常に動作していることを確認
チェン一峰先生のES 6入門を見てみましょう.
const:
let: constが実際に保証しているのは、変数の値が変更できないのではなく、変数が指すメモリアドレスに保存されているデータが変更できないことです.
単純なタイプのデータ(数値、文字列、ブール値)については、変数が指すメモリアドレスに値が保存されるため、定数に等しい.
しかし、複合型のデータ(主にオブジェクトと配列)については、変数が指すメモリアドレスは、実際のデータを指すポインタだけが保存されており、constはこのポインタが固定されている(すなわち、常に別の固定されたアドレスを指している)ことを保証するしかなく、その指向するデータ構造が可変であるかどうかは、完全に制御できません.
まとめて言えば、constは本当の意味で「変わらない」ことを保証することはできません.
ES 5の浅い凍結はAPI Objectを用いる.freeze()
通常、次のコードは次のとおりです.
最終出力: {a: "a", b: {…}}
aの値は変更されたがコメントを開くコード Object.freeze(obj)である
最終出力:{a: 1, b: {…}}
このときaの値は「凍結」されているため、変更されません.
浅い凍結については、bの値を変更すると効果があるかどうかを見てみましょう.
最終出力は次のとおりです.

{a: 1, b: {…}}
a: 1
b: {c: 2}

証明bも凍結されましたCの値を変更してみます.
出力:

{a: 1, b: {…}}
a: 1
b: {c: 2}

Object.freeze()も完全に凍結できないようですが、万能のプログラマーのお兄さんは屈服することはできません.簡単で乱暴な再帰、深い凍結:
このとき、cの値を変更しました.
検出出力:

{a: 1, b: {…}}
a: 1
b: {c: 2}

今回は本当に凍っているようですが、深い凍結もデータのタイプによって判断して凍結しなければなりません.そうしないと、本当の意味で完全に凍結することはできません.vue 1.0.18+はObject.freeze()をサポートし、dataまたはvuexでfreezeを使用して凍結されたオブジェクトに対してvueはgetterおよびsetterの変換をしません.
大きな配列やObjectがあり、データが変更されないと確信している場合は、Object.freeze()を使用するとパフォーマンスが大幅に向上します.Object.freeze()メソッドは、オブジェクトをフリーズすることができます.凍結されたオブジェクトは二度と修正されません.オブジェクトをフリーズすると、そのオブジェクトに新しいプロパティを追加することはできません.既存のプロパティを削除することはできません.オブジェクトの既存のプロパティの列挙性、構成性、書き込み性、および既存のプロパティの値を変更することはできません.また、オブジェクトをフリーズしても、そのオブジェクトのプロトタイプは変更できません.
しかし、値は凍結されており、変数の参照を置き換えることができます.
上記: 、 、 ，
以上、Object.defineProperty()で定義した属性により、印刷出力2にアクセスする
3つの属性記述子を解析します.writable:属性の値を変更できるかどうかを決定します.
印刷出力は2で、属性aの値は変更できません
解析:writable:falseは属性として変更できないと見ることができ、厳格なモード(「use strict」;)では、エンジンはTypeErrorの異常を投げ出します.これは、書き込み不可のプロパティを変更できないことを示しています.configurable:属性が構成可能である限り、defineProperty(...)メソッドを使用して属性記述子を変更できます.
に注意⚠️ falseの場合、修正すると厳格モードかどうかにかかわらずTypeErrorのエラーが投げ出されます
この場合も、書き込み可能な状態をtrueからfalseに変更することができます.delete属性も(delete myObject.a;)禁止されますemumerable:列挙可能であり、falseに設定されている場合、この属性は列挙には表示されませんが、正常にアクセスできます.
プロパティ記述子について説明し、最後にアクセス記述子について説明します.
オブジェクトを定義するときにアクセス記述子を追加します.
通常、p.age出力18にアクセス
ただし、p.age=101を設定すると、
間違いを投げ出す

index.html:65 Uncaught Error: invalid value
    at Object.set age [as age] (index.html:65)
    at index.html:71

アクセス記述子の役割:
get:属性を取得するたびにconsole.log(p.age)はgetを呼び出す
set:プロパティを設定するたびにp.age=101などの2つを呼び出すと、まったく関係なく呼び出すことができます.
特に,それら2つの呼び出しロジックは,結合度が高すぎてデッドサイクルに入りやすいことを明らかにしなければならない.
有名なVueフレームワークは2.xバージョンはこれにより実現される応答式～
例:
このデータの変更を購読したすべてのコンポーネントに更新を通知し、新しい値～を渡すだけです.
上は偽のコードですが、大体そう思います.
うまく書けたと感じたら、ぜひ見てください.モーメンツにお勧めします.
またオープンソースプロジェクトPalantirは現在マイクロフロントエンドに接続されており、マイクロフロントエンドフレームワークは作成中～
倉庫住所:

https://github.com/JinJieTan/Palantir

Palantir倉庫住所
私達の大きい群体に参加することを歓迎して、および群を交流して、公衆番号の返事:群をプラスします
グループ化