如何使用es6聲明變量

本篇文章給大家分享的是有關(guān)如何使用es6聲明變量，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來(lái)看看吧。

聲明變量的方法：1、使用var命令，語(yǔ)法“var 變量名;”；2、使用function命令；3、使用cosnt命令，語(yǔ)法“const 變量名;”；4、使用let命令，語(yǔ)法“l(fā)et 變量名”；5、使用import命令；6、使用class命令。

本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。

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

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

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

(1) var命令

var a ;　　//undefined
var b = 1;

• var定義的變量可以修改，如果不初始化會(huì)輸出undefined，不會(huì)報(bào)錯(cuò)

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

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

• var 聲明的變量作用域是全局的或者是函數(shù)級(jí)的

(2)function命令

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

• 聲明了一個(gè)名為 add的新變量，并為其分配了一個(gè)函數(shù)定義

• {}之間的內(nèi)容被分配給了 add

• 函數(shù)內(nèi)部的代碼不會(huì)被執(zhí)行，只是存儲(chǔ)在變量中以備將來(lái)使用

(3) cosnt命令

const a;     //報(bào)錯(cuò)，必須初始化
const b = 1;

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

• 該變量是個(gè)全局變量，或者是模塊內(nèi)的全局變量

• 如果一個(gè)變量只有在聲明時(shí)才被賦值一次，永遠(yuǎn)不會(huì)在其它的代碼行里被重新賦值，那么應(yīng)該使用const，但是該變量的初始值有可能在未來(lái)會(huì)被調(diào)整（常變量）

• 創(chuàng)建一個(gè)只讀常量，在不同瀏覽器上表現(xiàn)為不可修改；建議申明后不修改；擁有塊級(jí)作用域

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

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

• 可以在全局作用域或者函數(shù)內(nèi)聲明常量，但是必須初始化常量

• 常量不能和它所在作用域內(nèi)其它變量或者函數(shù)擁有相同名稱

(4) let命令

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

• 需要”javascript 嚴(yán)格模式”：'use strict'；

• 不存在變量提升

• 不允許重復(fù)聲明

• let聲明的變量作用域是在塊級(jí)域中，函數(shù)內(nèi)部使用let定義后，對(duì)函數(shù)外部無(wú)影響(塊級(jí)作用域)

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

(5) import命令

1、ES6引入了自己的模塊系統(tǒng)。通過export導(dǎo)出，import導(dǎo)入。

2、與CommonJS不同的是，它是獲取模塊的引用，到用的時(shí)候才會(huì)真正的去取值。

3、例如js中:

  let student = [
    {
      name: 'xiaoming',
      age: 21,
    },
    {
      name: 'xiaohong',
      age: 18
    }
  ]
  export default student; // 這種導(dǎo)出方式，你可以在import時(shí)指定它的名稱。

4、在app.js中我們就可以這樣用:

  import StudentList from './student.js'; //指定名稱
  console.log(StudentList[0].name); //xiaoming

(6) class命令

1：class作為es6的語(yǔ)法糖，實(shí)際上es5也可以實(shí)現(xiàn)的。

  class Point {
    constructor (x, y) {
      this.x = x;
      this.y = y;
    }
    toString () {
      return this.x + ',' + this.y;
    }
  }

//上面是一個(gè)類
  Object.assign(Point.prototype, {
    getX () {
      return this.x;
    },
    getY () {
      return this.y;
    }
  })
  let p1 = new Point(1,2);
  console.log(p1.toString()); //1,2
  console.log(p1.getX()); //1
  console.log(p1.getY()); //2
  console.log(Object.keys(Point.prototype)); // ["getX", "getY"]

• 方法之間不需要逗號(hào)分隔

• toString () {} 等價(jià)于 toString: function () {}

• 你仍然可以使用Point.prototype

• 你可以用Object.assign()一次性擴(kuò)展很多方法

• 類內(nèi)部定義方法多是不可以枚舉的

• constructor(){}是一個(gè)默認(rèn)方法，如果沒有添加，會(huì)自動(dòng)添加一個(gè)空的。

• constructor默認(rèn)返回實(shí)例對(duì)象（this），完全可以指定返回其他的對(duì)象。

• 必須用new調(diào)用

• 不存在變量提升

• 當(dāng)用一個(gè)變量去接受class時(shí)，可以省略classname

• es6不提供私有方法。

2：使用extends繼承

class ThreeDPoint extends Point {
    constructor (x, y, z) {
      console.log(new.target); //ThreeDPoint
      super(x, y);
      this.z = z;
}
    toString () {
      return super.toString() + ',' + this.z;
    }
    static getInfo() {
      console.log('static method');
    }
    get z() {
      return 4;
    }
    set z(value) {
      console.log(value);
    }
}
  ThreeDPoint.getInfo(); // "static method"
  let ta = new ThreeDPoint(2,3,4);
  console.log(ta.toString()); //2,3,4
  console.log(ta.z); // 4
  ta.z = 200; // 200
  console.log(Object.getPrototypeOf(ThreeDPoint)); //Point

• constructor中必須調(diào)用super,因?yàn)樽宇愔袥]有this,必須從父類中繼承。

• 子類的__proto__屬性總是指向父類

• 子類的prototype屬性的__proto__總是指向父類的prototype

• Object.getPrototypeOf()獲取父類

• super作為方法只能在constructor中

• super作為屬性指向父類的prototype.

• 在constructor中使用super.x = 2，實(shí)際上this.x = 2;但是讀取super.x時(shí)，又變成了父類.prototype.x。

• 原生構(gòu)造函數(shù)是無(wú)法繼承的。

• get set 方法可以對(duì)屬性的賦值和讀取進(jìn)行攔截

• (靜態(tài)方法不能被實(shí)例繼承。通過static聲明

• 靜態(tài)屬性只能 ThreeDPoint.name = “123” 聲明 （與static沒什么關(guān)系）

以上就是如何使用es6聲明變量，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。