コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > JS の var、let、const を理解する

JS の var、let、const を理解する

青灯夜游
リリース： 2020-10-20 17:13:25
転載
2589 人が閲覧しました

JS の var、let、const を理解する

この記事では、JavaScript の var、let、const について紹介します。一定の参考値があり、困っている友人は参考にしてください。皆さんのお役に立てれば幸いです。

var

var ステートメントは、JavaScript で変数を宣言するために使用され、次のルールに従います。

  • スコープは関数スコープまたはグローバルスコープ。
  • 一時的なデッド ゾーン (TDZ) による制限はありません。
  • 同じ名前のグローバル プロパティが window に作成されます。
  • は 割り当て可能な です。
  • は 宣言可能です。

関数スコープとグローバル スコープ

グローバル スコープに出現する場合、var はグローバル変数を作成します。さらに、window 上に同じ名前の グローバル プロパティ を作成します: 

var city = "Florence";

console.log(window.city); // "Florence"
ログイン後にコピー

関数内で宣言すると、変数のスコープはその関数に設定されます: 

var city = "Florence";

function bubble() {
  var city = "Siena";
  console.log(city);
}

bubble(); // "Siena"

console.log(city); // "Florence"
ログイン後にコピー

var 宣言はプロモートされます: 

function bubble() {
  city = "Siena";
  console.log(city);
  var city; // hoists
}

bubble(); // "Siena"
ログイン後にコピー

予期しないグローバル変数

宣言なしで割り当てられた変数 (var、 のいずれか) let または const) はデフォルトで グローバル変数になります: 

function bubble() {
  city = "Siena";
  console.log(window.city);
}

bubble(); // "Siena"
ログイン後にコピー

この動作を排除するには、strict モード#の使用が必要です##: 

"use strict";

function bubble() {
  city = "Siena";
  console.log(window.city);
}

bubble(); // ReferenceError: assignment to undeclared variable city
ログイン後にコピー
再割り当ておよび再宣言可能

var で宣言された変数は後で##Reassign または Redeclare で作成できます。再宣言の例: 

function bubble() {
  var city = "Florence";
  var city = "Siena";
  console.log(city);
}

bubble(); // "Siena"
ログイン後にコピー
再代入の例: 

function bubble() {
  var city = "Siena";
  city = "Florence";
  console.log(city);
}

bubble(); // "Florence"
ログイン後にコピー

let

let

ステートメントは、次の規則に従う JavaScript の変数を宣言します:

はブロック スコープに属します。
  • は
    • 一時的なデッド ゾーン
  • の対象となります。 これは、
    • window
  • にグローバル プロパティを作成しません。 は
    • 割り当て可能な
  • です。
    • 再宣言することはできません
  • 。
    • ブロック スコープ

let

で宣言された変数は、window にグローバル プロパティを作成しません: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">let city = &quot;Florence&quot;; console.log(window.city); // undefined</pre><div class="contentsignin">ログイン後にコピー</div></div>When関数内で宣言された場合、変数のスコープは関数になります。 

let city = "Florence";

function bubble() {
  let city = "Siena";
  console.log(city);
}

bubble(); // "Siena"

console.log(city); // "Florence"
ログイン後にコピー

ブロック

内で宣言された場合、変数のスコープはブロックになります。ブロックでの使用例: 

let city = "Florence";

{
  let city = "Siena";
  console.log(city); // "Siena";
}

console.log(city); // "Florence"
ログイン後にコピー

if

ブロックでの使用例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">let city = &quot;Florence&quot;; if (true) {   let city = &quot;Siena&quot;;   console.log(city); // &quot;Siena&quot;; } console.log(city); // &quot;Florence&quot;</pre><div class="contentsignin">ログイン後にコピー</div></div> 逆に、

var

は次の影響を受けません。ブロックの制限: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var city = &quot;Florence&quot;; {   var city = &quot;Siena&quot;;   console.log(city); // &quot;Siena&quot;; } console.log(window.city); // &quot;Siena&quot;</pre><div class="contentsignin">ログイン後にコピー</div></div>一時的なデッド ゾーン

let

ステートメントはプロモートできますが、 は一時的なデッド ゾーンを生成します: 

function bubble() {
  city = "Siena";
  console.log(city); // TDZ
  let city;
}

bubble();

// ReferenceError: can't access lexical declaration 'city' before initialization
ログイン後にコピー
ステージング デッド ゾーンにより、初期化前の

let

ステートメントへのアクセスが妨げられます。別の例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function bubble() {   console.log(city); // TDZ   let city = &quot;Siena&quot;; } bubble(); // ReferenceError: can't access lexical declaration 'city' before initialization</pre><div class="contentsignin">ログイン後にコピー</div></div> 2 つの例で生成された例外は同じであることがわかり、「一時的なデッド ゾーン」の出現が証明されています。

再割り当て可能ですが、再宣言はできません

let

で宣言された変数 は再宣言できません 。例外をスローする再宣言の例: 

function bubble() {
  let city = "Siena";
  let city = "Florence";
  console.log(city);
}

bubble(); // SyntaxError: redeclaration of let city
ログイン後にコピー
これは有効な再宣言の例です: 

function bubble() {
  let city = "Siena";
  city = "Florence";
  console.log(city);
}

bubble(); // "Florence"
ログイン後にコピー

const

const

ステートメントは以下で使用されます。 JavaScript で変数を宣言します。これは次の規則に従います。

はブロック スコープに属します。
  • は「一時的なデッドゾーン」の対象となります。
  • これは、
    • window
  • にグローバル プロパティを作成しません。
    • 再割り当てできません
  • 。
    • 再宣言することはできません
  • 。
    • ブロック スコープ

const で宣言された変数は、

window

: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const city = &quot;Florence&quot;; console.log(window.city); // undefined</pre><div class="contentsignin">ログイン後にコピー</div></div>関数内で宣言された場合、グローバル プロパティを作成しません。変数のスコープは関数です。 

const city = "Florence";

function bubble() {
  const city = "Siena";
  console.log(city);
}

bubble(); // "Siena"

console.log(city); // "Florence"
ログイン後にコピー

ブロック

で宣言された場合、変数のスコープはブロックです。ブロック ステートメント {} の例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const city = &quot;Florence&quot;; {   const city = &quot;Siena&quot;;   console.log(city); // &quot;Siena&quot;; } console.log(city); // &quot;Florence&quot;</pre><div class="contentsignin">ログイン後にコピー</div></div>

if

ブロック内の例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const city = &quot;Florence&quot;; if (true) {   const city = &quot;Siena&quot;;   console.log(city); // &quot;Siena&quot;; } console.log(city); // &quot;Florence&quot;</pre><div class="contentsignin">ログイン後にコピー</div></div>一時的なデッド ゾーン

const

宣言は昇格できますが、 は一時的なデッド ゾーンに入ります: 

function bubble() {
  console.log(city);
  const city = "Siena";
}

bubble();

// ReferenceError: can't access lexical declaration 'city' before initialization
ログイン後にコピー
は再割り当てできず、再宣言できません

Use

const

宣言された変数 は再宣言したり、再割り当てしたりすることはできません 。再宣言時にスローされる例外の例: 

function bubble() {
  const city = "Siena";
  const city = "Florence";
  console.log(city);
}

bubble(); // SyntaxError: redeclaration of const city
ログイン後にコピー
再割り当ての例 例: 

function bubble() {
  const city = "Siena";
  city = "Florence";
  console.log(city);
}

bubble(); // TypeError: invalid assignment to const 'city'
ログイン後にコピー

summary

##var✅❌✅❌ #const##✅✅❌❌英語の元のアドレス: https://www.valentinog.com/blog/var/ 著者: Valentino

ブロック スコープ		 一時的なデッド ゾーン グローバル プロパティの作成 再割り当て可能 再宣言可能
##❌❌ ✅ ✅ ✅ #let
✅
❌

関連する無料学習の推奨事項:

js ビデオ チュートリアル

以上がJS の var、let、const を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
const javascript let var フロントエンド
ソース：segmentfault.com
前の記事：インタラクティブなアプリケーションを構築する方法を紹介します 次の記事：JS で関数を定義するいくつかの方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1361
CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...
から 2024-04-06 20:45:26
0
2
386
livewire遅延プレースホルダーでlaravelコンポーネントを使用する方法 laravel コンポーネントのスケルトンを livewire3 プレースホルダー内に追加したい これまでに試したこと: Laravel コンポーネントを含めることによる Live...
から 2024-04-06 20:02:10
0
2
543
Web サイトから入力要素を取得できません そこで、Twitter から入力要素を取得しようとしていますが、それを実行すると、ノード ターミナルでこのようなエラーが表示され続け、その結果、このコードによって作成されたブラウザ...
から 2024-04-06 18:59:57
0
1
442
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート