JavaScriptのvarとletの違いは何ですか-フロントエンドQ&A-php.cn

JavaScriptのvarとletの違いは何ですか

青灯夜游

リリース： 2021-10-13 17:25:24

オリジナル

29185 人が閲覧しました

相違点: 1. var には変数のプロモーションがありますが、let にはありません; 2. let は同じスコープ内での繰り返し宣言を許可しませんが、var には許可します; 3. let には一時的なデッドゾーンの問題がありません; 4 . let 作成されたグローバル変数は、ウィンドウに対応する属性を設定しません; 5. let はブロックレベルのスコープを生成しますが、var は生成しません。

JavaScriptのvarとletの違いは何ですか

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

var (ES5) と let (ES6) の違いを理解したい場合は、まず ES5

での JS の変数プロモーションを理解する必要があります。

1. 変数プロモーション (サウンド)

ブラウザがコード実行のためにスタックメモリを開くとき、コードは上から下まですぐに実行されるのではなく、いくつかの処理を継続します。もの: 現在のスコープ内で var/function キーワードを持つものをすべて事前に宣言して定義します => 変数の昇格メカニズム

var を持つものは事前に宣言するだけです var a;、代入なしで宣言された場合のみ、デフォルト値は 未定義
例:

console.log(a);
var a = 13;

ログイン後にコピー

出力: unknown
同等:

var a;		// 只声明没有赋值，默认为undefined
console.log(a);
a = 13;

ログイン後にコピー

関数では、宣言だけでなく定義も行われ、正確には、変数を特定の値に関連付けます。

2. let と var

1. let と const# の違い# #変数の昇格メカニズムはありません

変数を作成する 6 つの方法のうち、

var/function には変数の昇格があり、let/const/class には変数の昇格があります。 /import このメカニズムは存在しません

2. var<span style="font-size: 18px;"></span> は繰り返しの宣言を許可しますが、let<span style="font-size: 18px;"></span>同じスコープ (または実行コンテキスト) 内での重複した宣言は許可されません

#var/function

キーワードを使用して変数を宣言し、それを繰り返し宣言しても、影響はありません (最初の宣言の後、後で見つかっても再度宣言されません)

let/const の使用は機能しません。ブラウザは、この変数が現在のスコープにすでに存在するかどうかを確認します。すでに存在する場合は、let# に基づいて再宣言されます。 ## など。エラーが報告されます。
ブラウザがコードのトップダウン実行のためにスタックメモリを開く前に、変数のプロモーション操作だけでなく、他の多くの操作も行われます。 => 「字句解析」または「字句検出」: 実行しようとしているコードに「SyntaxError」が発生するかどうかを検出します。エラーが発生した場合、コードは再度実行されません(1行目)実行されません)
```
console.log(1)  // => 这行代码就已经不会执行了
let a = 12
console.log(a)
let a = 13      // => 此行出错：SyntaxError: Identifier &#39;a&#39; has already been declared
console.log(a)
```
ログイン後にコピー

let/const

を使用して繰り返しを待機し、この変数を宣言します。例:
console.log(a)
var a = 12
let a = 13  // => SyntaxError: Identifier &#39;a&#39; has already been declared
console.log(a)
ログイン後にコピー
console.log(a)
let a = 13
var a = 12  // => SyntaxError: Identifier &#39;a&#39; has already been declared
console.log(a)
ログイン後にコピー

3. let は、typeof 検出中に発生する一時的なデッドゾーンの問題を解決できます (let は var よりも厳密です)

console.log(a)
// => ReferenceError: a is not defined

ログイン後にコピー

typeof a エラーは報告されません

console.log(typeof a)
// =>  &#39;undefined&#39; 这是浏览器的bug，本应报错，因为没有a（暂时性死区）

ログイン後にコピー

let

を使用した後: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">console.log(typeof a) // => ReferenceError: Cannot access &#39;a&#39; before initialization let a</pre><div class="contentsignin">ログイン後にコピー</div></div> は、

が定義される前は使用できないことを返します、一時的な解決策性的デッドゾーンの問題。

4. let で作成されたグローバル変数は、ウィンドウに対応する属性を設定しません

まず、var またはで作成されたグローバル変数を確認してください。 var なしの場合の違い

/*
 * JavaScriptのvarとletの違いは何ですか的：相当于给全局对象window设置了一个属性a
 *      window.a = 13
 */
a = 13
console.log(a)  // => window.a 13
/*
 * 栈内存变量存储空间
 *            b
 * JavaScriptのvarとletの違いは何ですか：是在全局作用域下声明了一个变量b（全局变量），
 * 但是在全局下声明的变量也相当于给全局对象window增加了一个对应的
 * 属性b（只有全局作用域具备这个特点）
 */
var b = 14
console.log(b)
console.log(window.b)

ログイン後にコピー

let を使用して作成した場合:

/*
 * 栈内存变量存储空间
 *   c
 * 带let的：仅仅在全局作用域下声明了一个变量b（全局变量），
 * 并未给全局对象window增加对应的属性c
 */
let c = 15
console.log(c)                          // => 15
console.log(window.c)                   // => undefined

ログイン後にコピー

JavaScriptのvarとletの違いは何ですか

#5 . ブロックレベルのスコープを生成します

JavaScriptのvarとletの違いは何ですか

#次のコードは、ボタンがクリックされたときに本体の背景色をボタンに対応する色に変更できますか? 変更できない場合は、その方法を教えてください。改善してください (Tencent)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100%;
      overflow: hidden;
    }

    button {
      padding: 5px 10px;
      cursor: pointer;
    }
  </style>
</head>

<body>
<!---->
<button value="red">红</button>
<button value="green">绿</button>
<button value="blue">蓝</button>

<script>
  var body = document.querySelector(&#39;body&#39;),
    buttons = document.querySelectorAll(&#39;button&#39;),
    arr = [&#39;red&#39;, &#39;green&#39;, &#39;blue&#39;]
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function () {
      body.style.background = arr[i]
    }
  }
</script>
</body>

</html>

ログイン後にコピー

答えはもちろんノーです。for ループ内の var, i で定義された変数はグローバルであり、変数がプロモートされて 3 回ループされた後は、i=3 になります。それぞれをクリックすることは、最後のものをクリックすることと同じです。 [推奨学習: JavaScript 上級チュートリアル]

以上がJavaScriptのvarとletの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。