JS変数宣言var、let.constの使い方詳細

今回はJSの変数宣言varとlet.constの注意事項について詳しく解説します。

var 宣言変数のスコープは、それが宣言されている場所のコンテキストに制限されます

var x = 0; // x是全局变量，并且赋值为0。
console.log(typeof z); // undefined，因为z还不存在。
function a() { // 当a被调用时，
 var y = 2;  // y被声明成函数a作用域的变量，然后赋值成2。
 console.log(x, y);  // 0 2 
 function b() {    // 当b被调用时，
  x = 3; // 全局变量x被赋值为3，不生成全局变量。
  y = 4; // 已存在的外部函数的y变量被赋值为4，不生成新的全局变量。
  z = 5; // 创建新的全局变量z，并且给z赋值为5。 
 }     // (在严格模式下（strict mode）抛出ReferenceError)
 b();   // 调用b时创建了全局变量z。
 console.log(x, y, z); // 3 4 5
}
a();          // 调用a时同时调用了b。
console.log(x, z);   // 3 5
console.log(typeof y); // undefined，因为y是a函数的本地（local）变量。

let 宣言された変数は、それが宣言されているブロックまたはサブブロック内でのみ使用できます。var のスコープは囲んでいる関数全体

function varTest() {
 var x = 1;
 if (true) {
  var x = 2; // 同样的变量!
  console.log(x); // 2
 }
 console.log(x); // 2
}
function letTest() {
 let x = 1;
 if (true) {
  let x = 2; // 不同的变量
  console.log(x); // 2
 }
 console.log(x); // 1
}

ECMAScript 2015 では、let バインディングは変数ホイスティングの対象になりません。これは、let 宣言が現在の実行コンテキストの先頭にホイストされないことを意味します。
ブロック内の変数が初期化される前にそれを参照すると ReferenceError が発生します (逆に、var を使用して変数を宣言すると未定義です)
ブロック内で使用する場合、変数のスコープをそのブロックに制限します。 var のスコープは、宣言された関数内にあることに注意してください。

const 宣言時に、定数はその値を指定する必要があります。値への読み取り専用の参照が作成されます。ただし、これは保持する値が不変である (参照内容がオブジェクトであるなど) という意味ではありませんが、変数識別子はスコープ内の他の変数や関数と同じ名前を持つことができません

var a = 1;
var b = 2;
if (a === 1) {
 var a = 11; // the scope is global
 let b = 22; // the scope is inside the if-block
 console.log(a); // 11
 console.log(b); // 22
} 
console.log(a); // 11
console.log(b); // 2

。

以下では、javascriptで変数を宣言する3つの方法、var、let、constを紹介します。 var はグローバル変数を宣言します。つまり、

for ループ

で宣言された変数は for ループの外でも使用できます。

// 注意: 常量在声明的时候可以使用大小写，但通常情况下全部用大写字母。 
// 定义常量MY_FAV并赋值7
const MY_FAV = 7;
// 报错
MY_FAV = 20;
// 输出 7
console.log("my favorite number is: " + MY_FAV);
// 尝试重新声明会报错 
const MY_FAV = 20;
// MY_FAV 保留给上面的常量，这个操作会失败
var MY_FAV = 20; 
// 也会报错
let MY_FAV = 20;
// 注意块范围的性质很重要
if (MY_FAV === 7) { 
  // 没问题，并且创建了一个块作用域变量 MY_FAV
  // (works equally well with let to declare a block scoped non const variable)
  let MY_FAV = 20;
  // MY_FAV 现在为 20
  console.log('my favorite number is ' + MY_FAV);
  // 这被提升到全局上下文并引发错误
  var MY_FAV = 20;
}
// MY_FAV 依旧为7
console.log("my favorite number is " + MY_FAV);
// 常量要求一个初始值
const FOO; // SyntaxError: missing = in const declaration
// 常量可以定义成对象
const MY_OBJECT = {"key": "value"};
// 重写对象和上面一样会失败
MY_OBJECT = {"OTHER_KEY": "value"};
// 对象属性并不在保护的范围内，下面这个声明会成功执行
MY_OBJECT.key = "otherValue";
// 也可以用来定义数组
const MY_ARRAY = [];
// It's possible to push items into the array
// 可以向数组填充数据
MY_ARRAY.push('A'); // ["A"]
// 但是，将一个新数组赋给变量会引发错误
MY_ARRAY = ['B']

for ループ内で宣言された sum は、for ループから飛び出すときに使用でき、結果はエラーなしで通常どおりポップアップ表示されます

let: ブロックレベルの変数、つまりローカル変数を宣言します。

for ループから抜け出して sum 変数を再度使用すると、エラーが報告されます。この変数には、現在属しているコード ブロックのみがスコープされます。繰り返し定義する必要があり、宣言する前に呼び出すことはできません。最初に定義してから使用すると、エラーが報告されます

注: 'use strict' を宣言する必要があります。 let を使用して変数を宣言する前に、そうしないと、ブラウズ時に結果が表示されません。

const: 定数の宣言に使用され、ブロック レベルのスコープもあり、ブロック レベルも宣言できます。

for(var i=0;i<=1000;i++){ 
var sum=0; 
sum+=i; 
} 
alert(sum);

letと同じで、constは一度定義すると同じ変数を繰り返し定義することができません。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JS で DOM 要素の位置を取得する方法

Vue フロントエンド開発で注意すべきこと

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