es6的6種變數定義方法是什麼

es6的6種變數定義方法：1、用關鍵字var定義變量，語法「var 變數名=值;」；2、用關鍵字function定義變數；3、用關鍵字const定義變數，語法「const 變數名=值;」；4、用關鍵字let定義變數，語法「let 變數名=值;」；5、用關鍵字import定義變數；6、用關鍵字class定義變數。

本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

es6宣告變數的6 種方法

---

es5只提供了兩種宣告變數的方法，即var和function。

ES6 除了加入let和const指令，還有兩種宣告變數的方法：import指令和class指令。

所以，ES6 一共有6 種宣告變數的方法，即var / function / let / const / import / class

#(1) var指令

var a ;　　//undefined
var b = 1;

• var 宣告的變數作用域是全域的或是函數級的。
• var定義的變數可以修改，如果不初始化會輸出undefined，不會報錯。
• var宣告的變數在window上，用let或const去宣告變量，這個變數不會放到window上。
• 很多語言中都有區塊級作用域，但JS沒有，它使用var宣告變量，以function（也可以說用大括號'{ }'）來分割作用域，但大括號「{ }」卻限定不了var的作用域，因此用var宣告的變數具有變數提升的效果。

(2)function指令

#

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

• 聲明了一個名為add的新變量，並為其分配了一個函數定義。
• { }之間的內容被指派給了 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的指標指向，故而操作失敗，拋出錯誤。
對於基本型別也是同樣，因為基本型別的資料直接就存放在堆疊中，常量名稱直接指向這個位址上的數據，一旦改變值，就會導致指標位址改變，所以造成了無法改變值的假象。

• 該變數是個全域變量，或是模組內的全域變量，擁有區塊級作用域。

• 如果一個變數只有在宣告時才被賦值一次，永遠不會在其它的程式碼行裡被重新賦值，那麼應該使用const，但是該變數的初始值有可能在未來會被調整（常變數）。

• const定義的變量，一般在require一個模組的時候用或是定義一些全域常數。

• 常數不能和它所在作用域內其它變數或函數擁有相同名稱。

(4) let指令

#需要」javascript 嚴格模式」：'use strict';

----不存在變數提升

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

變數b 用var 宣告有變數提升，所以當腳本開始運作的時候，b 已經存在了，但還沒有賦值，所以會輸出undefined。
變數 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只能宣告一次，var可以宣告多次

區塊級作用域（即只在一個{ }中有效）

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

函數內部使用let定義後，對函數外部無影響

可以在宣告變數時為變數賦值，預設​​值為undefined，也可以稍後在腳本中給變數賦值，在宣告前無法使用(暫時死區)

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用於載入文件，在大括號接收的是一個或多個變數名，這些變數名需要與你想要匯入的變數名相同。

举个栗子：你想要导入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中文網其他相關文章！