首頁  >  文章  >  web前端  >  ES6中新的變數宣告方式介紹(附程式碼)

ES6中新的變數宣告方式介紹(附程式碼)

不言
不言轉載
2019-03-26 10:11:332542瀏覽

這篇文章帶給大家的內容是關於ES6中新的變數宣告方式介紹(附程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

在ES5中,變數宣告只有var和function以及隱式宣告三種,在ES6中則增加了let、const、import和class四種。

1. let

1.1 區塊級作用域

let宣告的變數的作用域是區塊級作用域(這個特性有點類似後台語言),ES5 並沒有區塊級作用域,只有函數作用域和全域作用域。

{
  let a = 'ES6';
  var b = 'ES5';
}

console.log(b)  // ES5 
console.log(a)  // ReferenceError: a is not defined.

那麼let的區塊級作用域有什麼好處呢?

let非常適合用於 for迴圈內部的區塊級作用域。 JS中的for迴圈體比較特殊,每次執行都是一個全新的獨立的區塊作用域,用let宣告的變數傳入到 for迴圈體的作用域後,不會改變,不受外界的影響。看一個常見的面試題目:

for (var i = 0; i <10; i++) {  
  setTimeout(function() {  // 同步注册回调函数到异步的宏任务队列。
    console.log(i);        // 执行此代码时,同步代码for循环已经执行完成
  }, 0);
}
// 输出结果
10   (共10个)
// 这里变量为i的for循环中,i是一个全局变量,在全局范围内都有效,所以每一次循环,新的i值都会覆盖旧值,导致最后输出的是最后一轮i的值,即i的最终结果为10,实际上都是console.log(10)。涉及的知识点:JS的事件循环机制,setTimeout的机制等

把var改成let宣告:

for (let i = 0; i < 10; i++) { 
  setTimeout(function() {
    console.log(i);    //当前的i仅在本轮的循环中有效,就是说每一次循环,i其实都是一个新产生的变量。                          //用 let 声明的变量 i 只作用于循环体内部,不受外界干扰。
  }, 0);
}
// 输出结果:
0  1  2  3  4  5  6  7  8 9

1.2 暫時性死區(Temporal Dead Zone)

在一個區塊層級作用域中,變數唯一存在,一旦在區塊級作用域中用let聲明了一個變量,那麼這個變數就唯一屬於這個區塊級作用域,不受外部變數的影響,如下面所示。

var tmp = 'bread and dream';
if(true){
    tmp = 'dream or bread';   //ReferenceError
    let tmp;
}

這個例子中tmp = 'dream or bread'的賦值會報錯,因為在if區塊中的let對tmp變數進行了聲明,導致該tmp綁定了這個作用域,而let臨時死區導致了並不能在聲明前使用,所以在聲明前對變數賦值會報錯。

暫時性死區的本質就是,只要一進入目前作用域,所要使用的變數就已經存在了,但是不可獲取,只有等到宣告變數的那一行程式碼出現,才可以取得並使用該變數。

暫時性死區的意義也是讓我們標準化程式碼,將所有變數的宣告放在作用域的最開始。

1.3 不允許重複宣告

(1) 在相同的作用域內,用let宣告變數時,只允許宣告一遍,但 var是可以多次宣告的。大家都知道ES5 多次聲明會造成變數覆蓋而且不會報錯,這就給調試增加了難度,而let能夠直接扼殺這個問題在搖籃之中,因為會直接報錯。

// 不报错
function demo() {
  var a = 'bread and dream';
  var a = 'dream or bread';
}
 
// 报错,Duplicate declaration "a"
function demo() {
  let a = 'bread and dream';
  var a = 'dream or bread';
}

// 报错,Duplicate declaration "a"
function demo() {
  let a = 'bread and dream';
  let a = 'dream or bread';
}

(2) 無法在函數內部重新宣告參數:

function demo1(arg) {
  let arg; // 报错
}
demo1()
function demo2(arg) {
  {
    let arg; // 不报错
  }
}
demo2()

#2. const

2.1 用來宣告常數

#const聲明的常數是不允許改變的,只讀屬性,這意味著常數聲明時必須同時賦值, 只聲明不賦值,就會報錯,通常常量以大寫字母命名。

const Person;   // 错误,必须初始化 
const Person = 'bread and dream';// 正确

const Person2 = 'no'; 
Person2 = 'dream or bread'; //报错,不能重新赋值

這樣做的兩個好處:一是閱讀程式碼的人立刻會意識到不應該修改這個值,二是防止了無意間修改變數值所導致的錯誤。例如我們使用nodejs的一些模組的時候,我們只是使用對應的模組(如http模組),但並不需要修改nodejs的模組,這個時候就可以宣告成const,增加了程式碼的可讀性和避免錯誤。

2.2 支援區塊級作用域

const和let類似,也是支援區塊級作用域.

if (true) {
  const MIN = 5;
}

MIN // Uncaught ReferenceError: MIN is not defined

2.3 不支援變數提升,有暫時性死區

const宣告的常數也是不提升,同樣存在暫時性死區,只能在宣告的位置後面使用。

if (true) {
  console.log(MIN); // ReferenceError
  const MIN = 5;
}

2.4 特殊情況

如果聲明的常數是一個對象,那麼對於對象本身是不允許重新賦值的,但是對於對象的屬性是可以賦值的。

const obj = {};
obj.a = 'xiao hua';
console.log(obj.a);    //'xiao hua'

實際上const能保證的,並不是變數的值不得改動,而是變數指向的那個記憶體位址所保存的資料不得改動。

對於簡單類型的資料(數值、字串、布林值),值就保存在變數指向的那個記憶體位址,因此等同於常數。

但對於複合類型的資料(主要是物件和陣列),變數指向的記憶體位址,保存的只是一個指向實際資料的指標。

至於它所指向的資料結構是不是可變的,就完全不能控制了。因此,將一個物件聲明為常數必須非常小心。

如果要徹底凍結物件(不可修改其屬性),應該使用Object.freeze(obj)方法。同理,數組也是一樣的。

3. import

ES6採用import來取代node等的require來導入模組。

import {$} from './jquery.js'

$物件就是jquery中export暴露的物件。

如果想為輸入的變數重新取一個名字,import指令要使用as關鍵字,將輸入的變數重新命名。

import { JQ as $ } from './jquery.js';

注意,import指令具有提升效果,會提升到整個模組的頭部,首先執行。

4. class

ES6引進了類別的概念,有了class這個關鍵字。類別的實質還是函數物件。

先定義一個類別:

//定义类
class Animal {
  constructor(name, age) {
        this.name = name;
        this.age = age;
  }    
  setSex(_sex) {
        this.sex=_sex;
  }
}

constructor方法,就是建構方法,也就是ES5時代函數物件的主體,而this關鍵字則代表實例物件。

上面的類別也可以改成ES5的寫法:

function Animal(name, age){
        this.name = name;
        this.age = age;
}

Animal.prototype.setSex = function (_sex) {
        this.sex=_sex;
}

其實,大多數類別的特性都可以透過先前的函數物件與原型來推導。

生成类的实例对象的写法,与ES5通过构造函数生成对象完全一样,也是使用new命令。

class Animal {}
let dog = new Animal();

在类的实例上面调用方法,其实就是调用原型上的方法,因为类上的方法其实都是添加在原型上。

Class其实就是一个function,但是有一点不同,Class不存在变量提升,也就是说Class声明定义必须在使用之前。

5.总结

在ES6之前,JavaScript是没有块级作用域的,如果在块内使用var声明一个变量,它在代码块外面仍旧是可见的。ES6规范给开发者带来了块级作用域,let和const都添加了块级作用域,使得JS更严谨和规范。

let 与 const 相同点:

块级作用域
有暂时性死区
约束了变量提升
禁止重复声明变量

let 与 const不同点:

const声明的变量不能重新赋值,也是由于这个规则,const变量声明时必须初始化,不能留到以后赋值。

合理的使用ES6新的声明方式,不管是面试还是工作中都有实际的应用,尤其是工作中,大家一定要尽量的多使用新的声明方式,不但可以让代码更规范,更可以避免不必要的bug,浪费调试时间,进而提高工作效率。

本篇文章到这里就已经全部结束了,更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目!

以上是ES6中新的變數宣告方式介紹(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:segmentfault.com。如有侵權,請聯絡admin@php.cn刪除