es6聲明變量的方法有哪些

這篇“es6聲明變量的方法有哪些”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“es6聲明變量的方法有哪些”文章吧。

es6聲明變量有6種方法：1、用關鍵字var聲明變量；2、用關鍵字function聲明變量；3、用關鍵字const聲明變量；4、用關鍵字let聲明變量；5、用關鍵字class聲明變量；6、用關鍵字import聲明變量。

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

ES5 只有兩種聲明變量的方法：var命令和function命令。

ES6 除了添加let和const命令，還有兩種聲明變量的方法：import命令和class命令。

所以，ES6 一共有 6 種聲明變量的方法。

1、用關鍵字var聲明變量

var a ;　　//undefinedvar b = 1;

• var定義的變量可以修改，如果不初始化會輸出undefined，不會報錯

• var 聲明的變量在window上，用let或者const去聲明變量，這個變量不會被放到window上

• 很多語言中都有塊級作用域，但JS沒有，它使用var聲明變量，以function來劃分作用域，大括號“{}” 卻限定不了var的作用域，因此用var聲明的變量具有變量提升的效果

• var 聲明的變量作用域是全局的或者是函數級的

2、用關鍵字function聲明變量

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

• 聲明了一個名為 add的新變量，并為其分配了一個函數定義

• {}之間的內容被分配給了 add

• 函數內部的代碼不會被執行，只是存儲在變量中以備將來使用

3、用關鍵字const聲明變量

const a;     //報錯，必須初始化const b = 1;

• const定義的變量不可以修改，而且必須初始化

• 該變量是個全局變量，或者是模塊內的全局變量

• 如果一個變量只有在聲明時才被賦值一次，永遠不會在其它的代碼行里被重新賦值，那么應該使用const，但是該變量的初始值有可能在未來會被調整（常變量）

• 創建一個只讀常量，在不同瀏覽器上表現為不可修改；建議申明后不修改；擁有塊級作用域

• const 代表一個值的常量索引 ，也就是說，變量名字在內存中的指針不能夠改變，但是指向這個變量的值可能 改變

• const定義的變量不可修改，一般在require一個模塊的時候用或者定義一些全局常量

• 可以在全局作用域或者函數內聲明常量，但是必須初始化常量

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

4、用關鍵字let聲明變量

let a;　　//undefinedlet b = 1; 
function add(b) {
　　let sum = b + 1;
　　return sum;
}
let c = add(b);

• 需要”javascript 嚴格模式”：'use strict'；

• 不存在變量提升

• 不允許重復聲明

• let聲明的變量作用域是在塊級域中，函數內部使用let定義后，對函數外部無影響(塊級作用域)

• 可以在聲明變量時為變量賦值，默認值為undefined,也可以稍后在腳本中給變量賦值，在生命前無法使用(暫時死區)

5、用關鍵字class聲明變量

關于class，后期我會單獨寫一篇文章，詳細的介紹一下，這里就簡單說一下： 首先通過看ES5中的構造函數，然后再用ES6的class去實現：

// ES5寫法 ：
  function fun ( x, y ){
    this.x = x;
    this.y = y;
  };
  fun.prototype.GetHair = function(){
    return `${this.x}掉了兩根頭發，${this.y}說俺也一樣！`;
  };
  let setHair = new fun('小明','老王');
  console.log(setHair.GetHair()); // 小明掉了兩根頭發，老王說俺也一樣！

再來看一下ES6的class寫法：

 class Interest {
    constructor( x, y, e, z ){
      this.x = x;
      this.y = y;
      this.e = e;
      this.z = z;
    }
    MyInterest(){
      let arr = [];
      console.log(`我會${[...arr,this.x,this.y,this.e,this.z]}!`);
    }
  }
  let GetInterest = new Interest('唱','跳','rap','籃球');
  console.log(GetInterest.MyInterest());  //我會唱,跳,rap,籃球!

ES6 的class可以看作只是一個語法糖，它的絕大部分功能，ES5 都可以做到，新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已，constructor方法就是構造方法，而this關鍵字則代表實例對象。也就是ES5 的構造函數Point，對應 ES6 的Point類的構造方法。

6、用關鍵字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

以上就是關于“es6聲明變量的方法有哪些”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。