ES6アクション:Let and Const

Lisa Kudrow
Lisa Kudrowオリジナル
2025-02-15 10:12:11898ブラウズ

ES6 in Action: let and const

ES6の

letconst

の重要なポイント

let constES6は、ブロックスコープされた変数と定数を定義する方法を提供し、JavaScriptの機能を強化し、潜在的なエラーを減らす方法を提供する2つの新しいキーワード

を導入します。 let let

キーワードにより、特定のブロックスコープ内で変数を宣言することができます。これは、関数とグローバルスコープに限定されたJavaScriptの以前の制限からの大幅な変更です。

で宣言された変数は巻かれていません。つまり、ブロック内で宣言される前に参照することはできません。 const constObject.freeze()キーワードは、再宣言できない定数を定義するために使用されます。 letは不変の結合を作成しますが、価値自体を不変にしません。価値の不変性を達成するには、constを使用する必要があります。

および

は、ノードおよびすべての最新のブラウザでサポートされています。 let このチュートリアルでは、ES6のjavaScriptに追加された新しいキーワードである2つのキーワードをconst

を紹介します。それらは、ブロックスープされた変数と定数を定義する方法を提供することにより、JavaScriptを強化します。

この記事は、ES6で紹介された新しいJavaScriptに関する多くの記事の1つです。これには、MapWeakMapSetWeakSetなどがあり、StringNumberArray新しい方法で利用可能です。関数に使用できる新しい構文。

let

ES5の前に、JavaScriptには関数スコープとグローバルスコープの2つのスコープしかありませんでした。これにより、C、C、Javaなどの他の言語の開発者に多くのフラストレーションと予期せぬ行動がもたらされます。 JavaScriptにはブロックスコープがありません。つまり、変数は定義するブロック内でのみアクセスできます。ブロックは、巻き毛の装具のすべてのものです。次の例を見てみましょう:

<code class="language-javascript">function foo() {
  var par = 1;
  if (par >= 0) {
    var bar = 2;
    console.log(par); // 输出 1
    console.log(bar); // 输出 2
  }
  console.log(par); // 输出 1
  console.log(bar); // 输出 2
}
foo();</code>
このコードを実行した後、コンソールに次の出力が表示されます。

上記の言語のほとんどの開発者は、
<code>1
2
1
2</code>
ブロックの外側で

変数にアクセスできないと予想しています。たとえば、cで等価コードを実行すると、ifブロックの外側でbarを使用することを指します。 bar

この状況は、ブロックスコープが可用性でES6で変化します。 ECMA組織のメンバーは、キーワードの動作を変更できないことを知っていますvarそこで彼らは、letという新しいキーワードを導入することにしました。後者を使用して変数を定義し、それらを宣言するブロックに範囲を制限します。さらに、varとは異なり、letを使用して宣言された変数は宣伝されません。変数のlet宣言に遭遇する前に、ブロック内の変数を参照すると、ReferenceErrorになります。しかし、これは実際にはどういう意味ですか?それは初心者にのみ良いですか?全くない!

letが好きな理由を説明するには、次のコードを検討してください。私の記事「5 javascriptインタビューエクササイズ」から抜粋した:

<code class="language-javascript">function foo() {
  var par = 1;
  if (par >= 0) {
    var bar = 2;
    console.log(par); // 输出 1
    console.log(bar); // 输出 2
  }
  console.log(par); // 输出 1
  console.log(bar); // 输出 2
}
foo();</code>

ここでは、可変宣言、スコープ、イベントハンドラーに関連するよく知られている問題を特定できます。私が何について話しているのかわからない場合は、戻ってくる前に私が言及した記事をチェックしてください。

ES6のおかげで、この問題を簡単に解決できます。 for letiステートメントは、ノードおよびすべての最新のブラウザでサポートされています。ただし、Internet Explorer 11には、ES6互換性テーブルで読むことができることがいくつかあります。

<code>1
2
1
2</code>

letの違いのリアルタイムデモを以下に示します。これはJSBINにもあります。

var let

const、開発者がニーモニックを特定の値に関連付けて、値を変更できないようにするための一般的な要求に対処します(または、より簡単に定義する)。たとえば、数式を使用している場合は、オブジェクトを作成することをお勧めします。このオブジェクトでは、πとEの値をニーモニックに関連付けます。

この目標を達成することができます。それを使用すると、それを宣言する関数のグローバル変数またはローカル変数になる可能性のある定数を作成できます。

で定義された定義の定数は、変数と同じスコープルールに従いますが、再宣言することはできません。定数はまた、constを使用して宣言された変数とプロパティを共有しています。つまり、機能スコープではなくブロックスコープされています(したがって、宣伝されていません)。宣言する前に定数にアクセスしようとすると、Mathを受け取ります。 constで宣言された変数に別の値を割り当てようとすると、

を受け取ります。

constただし、letは不変性とは何の関係もないことに注意してください。 Mathias Bynensが彼のブログ投稿でES2015 Constが不変性とは何の関係もないと言ったように、ReferenceErrorは不変のバインディングを作成しますが、これは次のコードに示すように、値が不変であることを意味するものではありません。 const TypeErrorオブジェクトの値を本当に不変にしたい場合は、

を使用してください。

constのブラウザのサポートはletと同じくらい優れています。 constステートメントは、ノードおよびすべての最新のブラウザでサポートされています。ただし、ここでは、Internet Explorer 11にも注意すべきことがいくつかあり、ES6互換性テーブルの関連情報を読むことができます。

constのサンプル使用量を以下に示します

<code class="language-javascript">function foo() {
  var par = 1;
  if (par >= 0) {
    var bar = 2;
    console.log(par); // 输出 1
    console.log(bar); // 输出 2
  }
  console.log(par); // 输出 1
  console.log(bar); // 输出 2
}
foo();</code>
以下は、JSBINにもある前のコードのライブデモンストレーションを示しています。

結論 このチュートリアルでは、ES6で導入された変数を宣言する2つの新しい方法を

を紹介しました。 letはすぐには消えませんが、コードエラーの可能性を減らすために、可能な限りconstおよびvarを使用することをお勧めします。さらに読むと、javaScriptの変数を宣言する方法を迅速なヒントが好きかもしれません。 const ES6 let

の違いは何ですか? let JavaScript es6、const、および

では、変数を宣言するために使用されます。それらの主な違いは、その範囲と再割り当てです。

は機能スコープされています。つまり、宣言する関数内でのみ使用できます。一方、varおよびletはブロックスコープされています。つまり、宣言するブロック内でのみ使用できます。再割り当てに関しては、constおよび

で宣言された変数を再割り当てすることができますが、変数は

で宣言できません。これにより、プログラム全体で変更されないようにする必要がある価値にvarが非常に適しています。 let constコードでvarletをいつ使用する必要がありますか? const varループ内のカウンターやアルゴリズムのバリュースワップなど、時間とともに変化する変数を宣言する必要がある場合は、letを使用する必要があります。構成の設定やDOM要素への参照など、変更されないことが知られている値がある場合は、constを使用する必要があります。 constを使用すると、コードが読みやすくなり、理解しやすくなり、値を変更しないでください。

javaScriptES6のlet変数を再割り当てできますか? const

いいえ、JavaScriptES6で

変数を再割り当てすることはできません。 let変数が割り当てられると、再割り当てを試みるとconstになります。ただし、const変数がオブジェクトである場合、オブジェクトのプロパティを変更できますが、オブジェクト自体は変更できません。

javaScriptES6のconst変数の範囲は何ですか?

JavaScript ES6では、

変数にはブロックスコープがあります。これは、定義するコードブロック内でのみアクセスできることを意味します。ブロックの外側にアクセスしようとすると、constを受け取ります。 const

初期化なしでletまたはconstを使用して変数を宣言するとどうなりますか?

初期化なしでletまたはconstを使用して変数を宣言すると、undefinedになります。ただし、varとは異なり、それらを宣言する前にletまたはconst変数を使用することはできません。そうすることで、ReferenceErrorになります。

同じ範囲内でletまたはconstを使用して同じ名前の変数を宣言できますか?

いいえ、同じ範囲内でletまたはconstを使用して同じ名前の変数を宣言することはできません。そうすることで、SyntaxErrorになります。これは「時間的デッドゾーン」ルールと呼ばれます。

letconstのコンテキストでは、プロモーションは何ですか?

標高は、コンパイルフェーズ中に変数と関数宣言が含まれるスコープの上部に移動されるJavaScriptのメカニズムです。ただし、varとは異なり、letおよびconst宣言は初期化されません。それらは昇進しますが、宣言の前にブロックの開始から宣言が処理されるまで「一時的なデッドゾーン」にあるため、宣言の前にアクセスすることはできません。

すべてのブラウザでletおよびconstを使用できますか?

letおよびconstは、ES6(ES2015)仕様の一部であり、すべての最新のブラウザでサポートされています。ただし、ES6をサポートしていない古いブラウザの場合、Babelなどの翻訳者を使用してES6コードをES5コードに変換する必要があります。

letconstを使用することのパフォーマンスへの影響は何ですか?

letおよびconstを使用することのパフォーマンスへの影響は無視できます。 JavaScriptエンジンはこれらのキーワードのために最適化されるため、それらとvarの間に大きなパフォーマンスの違いはありません。 letconst、およびの選択は、パフォーマンスではなく、スコープルールと再割り当て動作に基づいている必要があります。 var

javascript es6で

およびletを使用するためのベストプラクティスは何ですか? const JavaScript ES6で

および

を使用するためのいくつかのベストプラクティスには、デフォルトでletを使用することが含まれます。これにより、コードがより予測可能で理解しやすくなります。また、常に範囲の最上部に変数を宣言して、利用可能な場所を明確にします。 const

以上がES6アクション:Let and Constの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。