成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

ES6語(yǔ)法之 let 和 const

Xufc / 1453人閱讀

摘要：以往，在中聲明變量的唯一方式是使用關(guān)鍵字。這種行為會(huì)阻止變量被訪問(wèn)，除非它們被聲明了。因此，將一個(gè)對(duì)象聲明為常量必須非常小心。之中，頂層對(duì)象的屬性與全局變量是等價(jià)的。從現(xiàn)在開(kāi)始，建議放棄使用，改為使用和。

以往，在 JavaScript 中聲明變量的唯一方式是使用關(guān)鍵字 var。為了理解為何添加了 let 和 const，我們先看一個(gè)示例，了解使用 var 會(huì)帶來(lái)怎樣的麻煩。

var 變量提升

下面代碼中你認(rèn)為運(yùn)行 getClothing(false) 后的輸出是什么？

function getClothing(isCold) {
 if (isCold) {
   var freezing = "Grab a jacket!";
 } else {
   var hot = "It"s a shorts kind of day.";
   console.log(freezing);
 }
}

答案是輸出undifind, 本質(zhì)上，在執(zhí)行任何 JavaScript 代碼之前，所有變量都會(huì)被“提升”，也就是提升到函數(shù)作用域的頂部。因此在運(yùn)行時(shí)，getClothing() 函數(shù)實(shí)際上看起來(lái)如下所示…

function getClothing(isCold) {
  var freezing, hot;
 if (isCold) {
   freezing = "Grab a jacket!";
 } else {
   hot = "It"s a shorts kind of day.";
   console.log(freezing);
 }
}
let 和 const

使用 let 和 const 聲明的變量解決了這種提升問(wèn)題，因?yàn)樗鼈兊淖饔糜蚴堑綁K，而不是函數(shù)。之前，當(dāng)你使用 var 時(shí)，變量要么為全局作用域，要么為本地作用域，也就是整個(gè)函數(shù)作用域。

如果在代碼塊（用花括號(hào) { } 表示）中使用 let 或 const 聲明變量，那么該變量會(huì)陷入暫時(shí)性死區(qū)(temporal dead zone)，直到該變量的聲明被處理。這種行為會(huì)阻止變量被訪問(wèn)，除非它們被聲明了。

下面例子中, 你認(rèn)為運(yùn)行 getClothing(false) 后的輸出是什么？

function getClothing(isCold) {
  if (isCold) {
    const freezing = "Grab a jacket!";
  } else {
    const hot = "It"s a shorts kind of day.";
    console.log(freezing);
  }
}

答案是 ReferenceError: freezing is not defined.

關(guān)于使用 let 和 const 的規(guī)則 
let 和 const 還有一些其他有趣特性。

使用 let 聲明的變量可以重新賦值，但是不能在同一作用域內(nèi)重新聲明。

使用 const 聲明的變量必須賦初始值，但是不能在同一作用域內(nèi)重新聲明，也無(wú)法重新賦值。

let instructor = "James";
instructor = "Richard";
console.log(instructor); //Richard
const instructor = "James";
instructor = "Richard";
console.log(instructor); //SyntaxError: Identifier "instructor" has already been declared
使用案例

最大的問(wèn)題是何時(shí)應(yīng)該使用 let 和 const？一般法則如下：

當(dāng)你打算為變量重新賦值時(shí)，使用 let

當(dāng)你不打算為變量重新賦值時(shí)，使用 const。

因?yàn)?const 是聲明變量最嚴(yán)格的方式，我們建議始終使用 const 聲明變量，因?yàn)檫@樣代碼更容易讀懂，你知道標(biāo)識(shí)符在程序的整個(gè)生命周期內(nèi)都不會(huì)改變。如果你發(fā)現(xiàn)你需要更新變量或更改變量，則回去將其從 const 切換成 let。

const實(shí)際上保證的，并不是變量的值不得改動(dòng)，而是變量指向的那個(gè)內(nèi)存地址不得改動(dòng)。對(duì)于簡(jiǎn)單類(lèi)型的數(shù)據(jù)（數(shù)值、字符串、布爾值），值就保存在變量指向的那個(gè)內(nèi)存地址，因此等同于常量。但對(duì)于復(fù)合類(lèi)型的數(shù)據(jù)（主要是對(duì)象和數(shù)組），變量指向的內(nèi)存地址，保存的只是一個(gè)指針，const只能保證這個(gè)指針是固定的，至于它指向的數(shù)據(jù)結(jié)構(gòu)是不是可變的，就完全不能控制了。因此，將一個(gè)對(duì)象聲明為常量必須非常小心。

const foo = {};

// 為 foo 添加一個(gè)屬性，可以成功
foo.prop = 123;
foo.prop // 123

// 將 foo 指向另一個(gè)對(duì)象，就會(huì)報(bào)錯(cuò)
foo = {}; // TypeError: "foo" is read-only

上面代碼中，常量foo儲(chǔ)存的是一個(gè)地址，這個(gè)地址指向一個(gè)對(duì)象。不可變的只是這個(gè)地址，即不能把foo指向另一個(gè)地址，但對(duì)象本身是可變的，所以依然可以為其添加新屬性。

頂層對(duì)象的屬性

頂層對(duì)象，在瀏覽器環(huán)境指的是window對(duì)象，在 Node 指的是global對(duì)象。ES5 之中，頂層對(duì)象的屬性與全局變量是等價(jià)的。

從 ES6 開(kāi)始，全局變量將逐步與頂層對(duì)象的屬性脫鉤。

var a = 1;
// 如果在 Node 的 REPL 環(huán)境，可以寫(xiě)成 global.a
// 或者采用通用方法，寫(xiě)成 this.a
window.a // 1

let b = 1;
window.b // undefined

上面代碼中，全局變量a由var命令聲明，所以它是頂層對(duì)象的屬性；全局變量b由let命令聲明，所以它不是頂層對(duì)象的屬性，返回undefined。

var 該怎么辦？

還有必要使用 var 嗎？沒(méi)有了。

在某些情況下有必要使用 var，例如如果你想全局定義變量，但是這種做法通常都不合理，應(yīng)該避免。從現(xiàn)在開(kāi)始，建議放棄使用 var，改為使用 let 和 const。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92395.html

相關(guān)文章

  • ES6語(yǔ)法之對(duì)象的擴(kuò)展

    摘要：方法的第一個(gè)參數(shù)是目標(biāo)對(duì)象，后面的參數(shù)都是源對(duì)象。這個(gè)對(duì)象的任何變化，都會(huì)反映到目標(biāo)對(duì)象上面。方法將和合并成一個(gè)新對(duì)象，如果兩者有同名屬性，則的屬性值會(huì)覆蓋的屬性值。否則，對(duì)象的該屬性很可能不起作用。 對(duì)象字面量簡(jiǎn)寫(xiě)法 你可能寫(xiě)過(guò)這樣的代碼：使用和所分配的變量名稱(chēng)相同的名稱(chēng)初始化對(duì)象。 let type = quartz; let color = rose; let carat = 2...

    SillyMonkey 評(píng)論0 收藏0

  • ES6語(yǔ)法之解構(gòu)賦值

    摘要：類(lèi)似數(shù)組的對(duì)象都有一個(gè)屬性，因此還可以對(duì)這個(gè)屬性解構(gòu)賦值。默認(rèn)值解構(gòu)賦值允許指定默認(rèn)值當(dāng)結(jié)構(gòu)不成功時(shí)使用默認(rèn)值。用途變量的解構(gòu)賦值用途很多。有了解構(gòu)賦值，取出這些值就非常方便。 原始操作 我們先看看下面的兩個(gè)代碼段，它們使用 ES6 之前的技巧提取數(shù)據(jù)： const point = [10, 25, -34]; const x = point[0]; const y = point[...

    Hancock_Xu 評(píng)論0 收藏0

  • 帶你入門(mén) JavaScript ES6 (一)

    摘要：是國(guó)際組織于年月日發(fā)布的第六版，正式名為通常被成為或。二模版字面量提供一種簡(jiǎn)單實(shí)現(xiàn)表達(dá)式嵌套的字符串字面量操作，簡(jiǎn)而言之就是能夠以簡(jiǎn)單的方法實(shí)現(xiàn)字符串拼接操作。 本文同步 帶你入門(mén) JavaScript ES6 (一)，轉(zhuǎn)載請(qǐng)注明出處。 ES6: 是 ECMA國(guó)際組織于 2015 年 6 月 17 日發(fā)布的 ECMAScript 第六版，正式名為 ECMAScript 2015,通常被...

    lindroid 評(píng)論0 收藏0

  • ES6學(xué)習(xí)手稿之基本類(lèi)型擴(kuò)展

    摘要：它是一個(gè)通用標(biāo)準(zhǔn)，奠定了的基本語(yǔ)法。年月發(fā)布了的第一個(gè)版本，正式名稱(chēng)就是標(biāo)準(zhǔn)簡(jiǎn)稱(chēng)。結(jié)語(yǔ)的基本擴(kuò)展還有一些沒(méi)有在這里詳細(xì)介紹。 前言 ES6標(biāo)準(zhǔn)以及頒布兩年了，但是，好像還沒(méi)有完全走進(jìn)我們的日常開(kāi)發(fā)。這篇文章從ES6的基本類(lèi)型擴(kuò)展入手，逐步展開(kāi)對(duì)ES6的介紹。 ECMAScript和JavaScript JavaScript是由Netscape創(chuàng)造的，該公司1996年11月將JavaSc...

    tommego 評(píng)論0 收藏0

  • 前端面試之ES6篇（高產(chǎn)似母豬）

    摘要：這也是前端面試經(jīng)常詢(xún)問(wèn)的問(wèn)題，經(jīng)常問(wèn)你出現(xiàn)了哪些新的特性，平時(shí)又使用過(guò)那些。 這也是前端面試經(jīng)常詢(xún)問(wèn)的問(wèn)題，經(jīng)常問(wèn)你es6出現(xiàn)了哪些新的特性，平時(shí)又使用過(guò)那些。在編寫(xiě)此教程的時(shí)候，第一句話往往就是面試常常問(wèn)到的地方，然后后面就是他的詳細(xì)解釋?zhuān)嬖囈蟮膬?nèi)容我會(huì)用*標(biāo)記出來(lái)。寫(xiě)技術(shù)文檔是真的累啊，雖然是看別人的文檔，但是你得看很多，而且還得自己總結(jié)啊。所以說(shuō)要是覺(jué)得對(duì)你有用還是幫我點(diǎn)個(gè)s...

    BlackMass 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<