es6 の 6 つの変数定義方法とは何ですか

es6 で変数を定義する 6 つの方法: 1. キーワード var を使用して変数を定義します。構文は「var 変数名 = 値;」です。 2. キーワード関数を使用して変数を定義します。 3.キーワード const を使用して変数を定義します (構文 "const 変数名 = value;"; 4. キーワード let を使用して変数を定義します (構文 "let 変数名 = value;")。 5. キーワード import を使用して定義します変数; 6. キーワード class を使用して変数を定義します。

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

es6 変数を宣言する 6 つの方法

---

es5 では、変数を宣言する 2 つの方法、つまり var と function のみを提供します。

ES6 let および const コマンドの追加に加えて、変数を宣言するには、import コマンドと class コマンドという 2 つの方法があります。

つまり、ES6 には変数を宣言するための方法が合計 6 つあります 、つまり var / function / let / const / import / class

##(1) var command

var a ;　　//undefined
var b = 1;

• var で宣言された変数スコープは、global または function level です。 。
• var で定義された変数は変更可能です。初期化されていない場合は、unknown が出力され、エラーは報告されません。
• var で宣言された変数はウィンドウ上にあります。let または const を使用して変数を宣言してください。この変数はウィンドウ上には配置されません。
• 多くの言語にはブロック レベルのスコープがありますが、JS にはありません。var を使用して変数を宣言し、関数を使用して (波括弧 '{ }' を使用するとも言えます)ただし、中括弧 "{ }" は var のスコープを制限できないため、var で宣言された変数には変数の昇格の効果があります。

(2)関数コマンド

function add(a) {
　　var sum = a + 1;
　　return sum;
}

• は、addという名前の新しい変数を宣言し、それに関数定義を割り当てます。
• { } の間のコンテンツが追加に割り当てられます。
• 関数 内のコードは、宣言されてもすぐには実行されません が、将来の使用に備えて変数に保存されるだけです。

(3) cosnt コマンド

const a;     //报错，必须初始化
const b = 1; 
b = 2;      //报错，TypeError: Assignment to constant variable.

• const は定数を定義するため、初期化する必要があります。
• const キーワードで宣言された定数の ポインタは変更できません。ここで言われているのは、定数ポインタは変更できないが、ポインタが指すメモリ空間の値は変更できるということです。 例:
  

const obj = {};
obj.n = 123;
obj; // { n: 123 }
obj = { x: 1 }; // TypeError: Assignment to constant variable.

const は、obj という名前のオブジェクトを宣言します。obj ポインタはオブジェクトを指します。オブジェクトに属性を追加するということは、オブジェクトのデータにデータを追加することを意味します。 obj に格納されているオブジェクトを指すアドレスは変更されていないため、正常に実行できますが、obj を再割り当てする操作により、obj を指すポインタが変更されるため、操作は失敗し、エラーがスローされます。

基本型のデータは直接スタックに格納され、定数名はこのアドレスのデータを直接指すため、基本型についても同様です。値が変更されると、ポインタのアドレスも変更されます。値は変更できません。

• この変数は、ブロック レベルのスコープを持つグローバル変数、またはモジュール内のグローバル変数です。

• 変数が宣言時に 1 回だけ割り当てられ、コードの他の行で再割り当てされない場合は、const を使用する必要がありますが、変数の初期値は次のようになります。将来的に調整されます（定数変数）。

• Const 定義変数は、通常、モジュールが必要な場合、またはいくつかのグローバル定数を定義する場合に使用されます。

#定数は、そのスコープ内の他の変数または関数と同じ名前を持つことはできません。

(4) let コマンド「javascript strict モード」が必要: 'use strict';

#------変数の昇格はありません

console.log(a);  //ReferenceError: a is not defined
let a = "apple";
 
console.log(b);  //undefined
var b = "banana";

変数 b は var で宣言されており、変数の昇格があるため、スクリプトの実行を開始すると、 b はすでに存在しますが、まだ存在していません。値が割り当てられているため、出力は未定義になります。

変数 a を let で宣言した場合、変数の昇格は行われません。変数 a を宣言する前は a が存在しないため、エラーが報告されます。

重複した宣言は許可されません

let a = 1;
let a = 2;
var b = 3;
var b = 4;
a  // Identifier 'a' has already been declared
b  // 4

let は 1 回のみ宣言でき、var は複数回宣言できます

ブロックレベルのスコープ(つまり、{ } 内でのみ有効です)

{
  let a = 0;
  a   // 0
}
a   // 报错 ReferenceError: a is not defined

let 定義が関数内で使用された後は、関数の外部には影響しません

#宣言時に変数に値を割り当てることができます。デフォルト値は未定義ですが、スクリプトの後半で変数に値を割り当てることもできます。宣言前に使用することはできません (一時的なデッド ゾーン)

let a;
console.log(a);    //  undefined
console.log(b);   // ReferenceError: b is not defined
let b = 1;
a = 2;
console.log(a);     // 2

注

: ES6 は、コード ブロックに let または const がある場合、コード ブロックはブロックの先頭からこれらのコマンドで宣言された変数までの閉じたスコープを形成することを明確に規定しています。コード ブロック内で、変数 PI を宣言する前に使用すると、エラーが発生します。

var PI = "a";
if(true){
  console.log(PI);  // ReferenceError: PI is not defined
  const PI = "3.1415926";
}

(5) import コマンド

import はファイルの読み込みに使用されます。中括弧内は受信内容です。 1 つまたは複数の変数名である場合、これらの変数名はインポートする変数名と同じである必要があります。

举个栗子：你想要导入action.js文件中的某一个变量，这个变量里保存了一段代码块，所以你要写成：import { Button } from 'action'，这个时候，你就从action.js中获取到了一个叫 Button 的变量，既然获取到了，你就可以对Button里的代码猥琐欲为了

如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名，比如：

import { NewButton as Button } from 'action.js';

上面的代码表示从action.js文件中，获取一个变量名称叫做Button的代码段，然后你又声明了一个变量 NewButton ，将 Button 保存在 NewButton

(6) class命令

在es5中我们是使用构造函数实例化出来一个对象，那么构造函数与普通的函数有什么区别呢？其实没有区别，无非就是函数名称用首字母大写来加以区分，这个不用对说对es5有了解的朋友都应该知道。
但是es5的这种方式给人的感觉还是不够严谨，于是在es6中就换成了class，就是把es5中的function换成了class，有这个单词就代表是个构造函数，然后呢对象还是new出来的，这一点并没有变化。

类的使用

从里面的代码我们可以看到除了function变成了class以外，其它的跟es5一样

class Coder{
    name(val){
        console.log(val);
    }}
 let shuang= new Coder;shuang.name('shuang');

类的传参

在es6中的对象的属性都是写在constructor里面，方法都是在原型身上。在这里面的代码用constructor约定了两个参数，然后用add（）方法把参数相加，这个地方跟以前不太一样，所以需要多注意一下。

class Coder{
    name(val){
        console.log(val);
        return val;
    }

    constructor(a,b){
        this.a=a;
        this.b=b;
    }
 
    add(){
        return this.a+this.b;
    }}
 let shuang=new Coder(1,2);console.log(shuang.add());

class的继承

class的继承就是用extends

class shuang extends Coder{
 }
 let shuang=new shuang;shuang.name('Angel爽');

声明一个shuang的新类，用extends继承了Coder，调用里面的name方法，发现也是可以输出的。

学习总结：

---

一、用关键字var声明变量

1、var声明的全局对象是顶级对象（window）的属性；

2、用var在函数外声明的对象为全局变量，在函数内声明的对象为局部变量；

3、用var可以对同一对象重复声明和赋值；

4、用var声明的对象具有变量提升的作用（声明提前，赋值不提前）；

二、用关键字function声明变量

1、用function声明的函数对象具有变量提升的作用（声明提前，赋值不提前）；

2、function声明的函数对象是顶级对象（window）的属性；

三、用关键字let声明变量

1、用let声明的变量在块级作用域内有效；

2、let声明的变量不存在变量提升；

3、let声明的变量存在暂时性死区（即同一个块级作用域中，在let声明该变量的语句之前，该变量已经存在，但是不能使用）；

4、在同一个作用域内，对于let声明的变量不能重复声明。

四、用关键字const声明变量

1、const命令声明的值一旦声明，就不能再次改变；

2、const声明变量时，必须立即初始化，否则会报错（因为值一旦声明不可改变）；

3、const声明的变量不存在变量提升；

4、const声明的变量存在暂时性死区；

5、const声明的变量只在块级作用域内有效；

6、const变量在同一个作用域内不能重复声明。

五、关于变量提升

1、只有声明本身会被提升，而赋值操作不会被提升。

2、变量会提升到其所在函数的最上面，而不是整个程序的最上面。

3、函数声明会被提升，但函数表达式不会被提升。

4、函数声明的优先级高于普通变量申明的优先级，并且函数声明和函数定义的部分一起被提升。

5、同一个变量只会声明一次，其他的会被忽略掉。

【相关推荐：javascript视频教程、web前端】

以上がes6 の 6 つの変数定義方法とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。