検索

ホームページ >ウェブフロントエンド >フロントエンドQ&A >JavaScriptのvarとletの違いは何ですか

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

青灯夜游
青灯夜游オリジナル
2021-10-13 17:25:2429242ブラウズ

相違点: 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

を使用した後: <pre class="brush:js;toolbar:false;">console.log(typeof a) // =&gt; ReferenceError: Cannot access &amp;#39;a&amp;#39; before initialization let a</pre> は、

a

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

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の違いは何ですか
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 サイトの他の関連記事を参照してください。

JavaScript es6 for const 全局变量 循环 栈 class var JS undefined function 作用域 typeof 变量提升
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JavaScript の基本的な種類は何ですか?次の記事：JavaScript の基本的な種類は何ですか?

関連記事

続きを見る