国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

ES6-新的變量聲明方式（2）

makeFoxPlay / 2894人閱讀

摘要：在中，變量聲明只有和以及隱式聲明三種，在中則增加了和四種。用聲明的變量只作用于循環體內部，不受外界干擾。不允許重復聲明在相同的作用域內，用聲明變量時，只允許聲明一遍，但是可以多次聲明的。

在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，浪費調試時間，進而提高工作效率。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102963.html

相關文章

  • ES6學習第一節 塊級作用域的聲明以及綁定 （一） let聲明

    摘要：塊級作用域綁定變量聲明的變量聲明與其他的一些計算機語言不同，在類的語言中，變量總是在被聲明的地方創建而在中變量創建的位置取決于你如何聲明它，為我們提供了新的聲明方式用來讓開發者能夠更好的控制變量的作用域我們通過聲明的變量，無論其聲明位置在哪 塊級作用域綁定 1.變量聲明 JS的變量聲明與其他的一些計算機語言不同，在類C的語言中，變量總是在被聲明的地方創建；而在JS中變量創建的位置取決于...

    chanthuang 評論0 收藏0

  • ES6學習筆記--塊級綁定

    摘要：對比常量聲明與聲明常量聲明與聲明，都是塊級聲明。最后一點全局塊級綁定與不同于的另一個方面是在全局作用域上的表現。塊級綁定新的最佳實踐在的發展階段，被廣泛認可的變量聲明方式是默認情況下應當使用而不是。總結與塊級綁定將詞法作用域引入。 var變量與變量提升 使用var關鍵字聲明的變量，無論其實際聲明位置在何處，都會被視為聲明于所在函數的頂部（如果聲明不在任意函數內，則被視為在全局作用域的頂...

    wangshijun 評論0 收藏0

  • ES6走走看看—由塊級作用域引出的一場變革

    摘要：塊級聲明塊級聲明是用于聲明在指定塊的作用域之外無法訪問的變量。美元符號可以放到任何一個位置，甚至單獨一個美元符號。塊級函數從開始，在嚴格模式下，塊里的函數作用域為這個塊。 持續更新的github筆記，鏈接地址：Front-End-Basics 此篇文章的筆記地址：字符到底發生了什么變化 ES6走走看看系列，特別鳴謝奇舞讀書會~ 塊級作用域又稱詞法作用域，存在于： 函數內部（...

    荊兆峰 評論0 收藏0

  • 讓你的代碼更簡短，更整潔，更易讀的ES6小技巧

    摘要：讓你的代碼更簡短，更整潔，更易讀的小技巧寫在文章前面這篇文章翻譯自文章就代碼整潔方面對進行了總結。如果你正在使用的代碼使用的語法，這個是你需要注意的事情。更多還提供了我們很多很多其他的方式來使我們的代碼更簡潔，更易讀，以及更穩定。 讓你的代碼更簡短，更整潔，更易讀的ES6小技巧 寫在文章前面 這篇文章翻譯自ES6 tips and tricks to make your code cl...

    wpw 評論0 收藏0

  • ES6 系列之 let 和 const

    摘要：塊級作用域存在于函數內部塊中字符和之間的區域和塊級聲明用于聲明在指定塊的作用域之外無法訪問的變量。和都是塊級聲明的一種。值得一提的是聲明不允許修改綁定，但允許修改值。這意味著當用聲明對象時沒有問題報錯臨時死區臨時死區，簡寫為。 塊級作用域的出現 通過 var 聲明的變量存在變量提升的特性： if (condition) { var value = 1; } console.lo...

    PascalXie 評論0 收藏0

發表評論

0條評論

makeFoxPlay

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<