ECMAScript6 ブロックレベルのスコープと新しい変数宣言 (let)_javascript スキル

多くの言語にはブロックレベルのスコープがありますが、JS にはありません。変数を宣言するために var を使用し、スコープを分割するために中括弧 "{}" を使用して var のスコープを制限することはできません。 var で宣言された変数には、変数の巻き上げ (宣言の巻き上げ) の効果があります。

ES6 では let が追加されており、{}、if、または for で宣言できます。使い方は var と同じですが、スコープはブロック レベルに制限されており、let で宣言された変数の変数昇格はありません。

例 1: ブロックレベルのスコープ if

function getVal(boo) {
  if (boo) {
    var val = 'red'
    // ...
    return val
  } else {
    // 这里可以访问 val
    return null
  }
  // 这里也可以访问 val
}

変数 val は if ブロック内で宣言されていますが、val は else ブロックと if の外側からアクセスできます。

var を let に置き換えると次のようになります

function getVal(boo) {
  if (boo) {
    let val = 'red'
    // ...
    return val
  } else {
    // 这里访问不到 val
    return null
  }
  // 这里也访问不到 val
}　

例 2:

のブロックレベルのスコープ

function func(arr) {
  for (var i = 0; i < arr.length; i++) {
    // i ...
  }
  // 这里也可以访问到i
}

変数 i は for ブロック内で宣言されていますが、for ブロックの外からもアクセスできます。

var を let に置き換えると、

の外部からはアクセスできなくなります

function func(arr) {
  for (let i = 0; i < arr.length; i++) {
    // i ...
  }
  // 这里访问不到i
}

例 3: 変数のプロモーション (最初に使用し、後で宣言)

function func() {
  // val先使用后声明，不报错
  alert(val) // undefined
  var val;
}

変数 val が最初に使用され、次に宣言されます。この変数は unknown を出力し、エラーは報告されません。

var を let に置き換えると、エラーが報告されます

function func() {
  // val先使用后声明，报语法错
  alert(val)
  let val;
}　

例 4: 変数の昇格 (最初に判断してから宣言)

function func() {
  if (typeof val == 'undefined') {
    // ...
  }
  var val = ''
}

typeof 判定を使用する場合、var ステートメントの前に置くこともできます

ただし、var を let に置き換えると、if で構文エラーが報告されます

function func() {
  if (typeof val == 'undefined') {
    // ...
  }
  let val = '';
}

ES6 では、コード ブロック内に let が存在する場合、このブロックは最初から閉じたスコープを形成することが規定されています。宣言前に使用すると、エラーが報告されます。つまり、コード ブロック内では、let が宣言される前に使用された変数は使用できません。文法には「時間的デッドゾーン」、または略して TDZ と呼ばれる用語があります。もちろん、TDZ は ES 仕様には登場せず、視覚的な説明にのみ使用されます。

レットに関する注意事項

1. 繰り返しの宣言は許可されません

// var和let重复声明
var name = 'Jack';
let name = 'John';
 
// 两个let重复声明
let age = 24;
let age = 30;

実行時の構文エラー

2. let を使用すると、匿名関数の自己実行を排除できます

// 匿名函数写法
(function () {
 var jQuery = function() {};
 // ...
 window.$ = jQuery
})();
 
// 块级作用域写法
{
 let jQuery = function() {};
 // ...
 window.$ = jQuery;
}

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。