摘要:新增了兩個變量修飾關(guān)鍵字它們都是塊級別的,那什么是塊簡單的來說,塊就是一組花括號中間的部分。全局變量使用基本上可以不用了
ES2015 新增了兩個變量修飾關(guān)鍵字:
let
const
它們都是塊級別的,那什么是塊?簡單的來說,塊就是一組花括號中間的部分。
Var
為了理解let我們先從var說起,如下代碼:
function checkStatus(status) { if (status) { var statusLabel = "ok"; console.log(statusLabel); } else { console.log(statusLabel); } } checkStatus(true); checkStatus(false);
在 Chrome Console 中運(yùn)行后,獲得結(jié)果:
ok undefined
我們在false條件中加入一行代碼:
function checkStatus(status) { if (status) { var statusLabel = "ok"; console.log(statusLabel); } else { console.log(statusLabel); console.log(abc);//執(zhí)行后會輸出: Uncaught ReferenceError: abc is not defined(…) } } checkStatus(true); checkStatus(false);
對于初次接觸JavaScript的后端程序員來說,會覺得非常奇怪,在傳入false的時候?yàn)槭裁吹玫降膕tatusLabel是undefined而不是變量未定義?而嘗試輸出abc就能得到變量未定義的錯誤呢?
這是因?yàn)樵贘avaScript中使用var定義的變量會被預(yù)先提升到作用域最開始的地方(這里就是這個function), 在這個例子中也就是if位置的上面, 代碼就可以寫成:
function checkStatus(status) { var statusLabel; if (status) { statusLabel = "ok"; console.log(statusLabel); } else { console.log(statusLabel); } }
這是JavaScript獨(dú)有的, 所以之前定義變量的好的習(xí)慣就是在所有可能會使用的地方之前定義好,如此,才不會產(chǎn)生各種奇怪奇怪的問題。
Let
let就是新的 var,和var不同的是它是塊級的,將上面的代碼中的var換成let
function checkStatus(status) { if (status) { let statusLabel = "ok"; console.log(statusLabel); } else { console.log(statusLabel); } } checkStatus(true); checkStatus(false);
這樣的到的結(jié)果就是我們設(shè)想的,true的時候是ok, false的時候拋出變量不存在的錯誤,如果false的時候想要輸出undefined, 那么就要手動定義在 if 的上面:
function checkStatus(status) { let statusLabel; if (status) { statusLabel = "ok" console.log(statusLabel); } else { console.log(statusLabel); } } checkStatus(true); checkStatus(false);
const
const 和 let 一樣是塊級, 從名字上看是用來常量的,其實(shí)不然,正確的說法是 single-assignment, 也就是說只能對其進(jìn)行一次賦值并且只能在定義的時候賦值,后面如果再想對其進(jìn)行賦值操作就會報錯。
const PI = 3.1415926; PI = 2.0; //報錯,Uncaught TypeError: Assignment to constant variable.
但是,這不代表const定義的就不可以改變的(immutable), 如下代碼:
const animals = ["rabbit", "monkey"]; console.log(animals); //["rabbit", "monkey"] animals.push("donkey"); console.log(animals);//["rabbit", "monkey", "donkey"] animals = ["bird"]; //報錯,Uncaught TypeError: Assignment to constant variable.
那如何決定該使用哪種關(guān)鍵詞呢?
這個目前社區(qū)沒有統(tǒng)一的規(guī)范,不過本人比較喜歡下面這種,即:
優(yōu)先使用let
常量用const, 如常規(guī)常量, 導(dǎo)入的模塊等等。
全局變量使用var (基本上可以不用了?)
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/83731.html
摘要:用過的同學(xué)肯定見過類似下面的代碼這就是為帶來的另一個新的語法解構(gòu)賦值。解構(gòu)賦值是用來讓我們從數(shù)組或者對象中提取數(shù)據(jù)賦值給不同的變量。解構(gòu)賦值操作不會拋錯,如果沒有找到,將會用賦值過去。 用過ReactNative的同學(xué)肯定見過類似下面的代碼: import { Text, View } from react-native; 這就是ES2015為JavaScript帶來的另一個新的語法:...
摘要:常量變量先說說常量和變量的概念吧,常量是說那種進(jìn)行一次賦值后不會更改的值,比如說游戲賬戶的,變量是說賦值后有更改的需求的,比如游戲名,游戲密碼。常用實(shí)例交換變量的值提取數(shù)據(jù)解構(gòu)賦值對提取對象中的數(shù)據(jù),尤其有用。 本系列文章適合快速掌握 ES6 入門語法,想深入學(xué)習(xí) ES6 的小伙伴可以看看阮一峰老師的《ECMAScript 6 入門》 學(xué)習(xí) 20% 的知識完成 80% 的工作 關(guān)于 ...
摘要:前端日報精選如何在非項(xiàng)目中使用知乎專欄編碼規(guī)范最常被遺忘的性能優(yōu)化瀏覽器緩存?zhèn)€人文章譯統(tǒng)一樣式語言掘金新的開發(fā)者提及最多的個視頻眾成翻譯中文第期在中使用譯統(tǒng)一樣式語言掘金前端現(xiàn)狀答題救不了前端新人相學(xué)長懟前端歲以 2017-06-29 前端日報 精選 如何在非 React 項(xiàng)目中使用 Redux - 知乎專欄Javascript編碼規(guī)范 - Clearlove - SegmentFau...
摘要:是國際組織于年月日發(fā)布的第六版,正式名為通常被成為或。二模版字面量提供一種簡單實(shí)現(xiàn)表達(dá)式嵌套的字符串字面量操作,簡而言之就是能夠以簡單的方法實(shí)現(xiàn)字符串拼接操作。 本文同步 帶你入門 JavaScript ES6 (一),轉(zhuǎn)載請注明出處。 ES6: 是 ECMA國際組織于 2015 年 6 月 17 日發(fā)布的 ECMAScript 第六版,正式名為 ECMAScript 2015,通常被...
閱讀 3376·2021-09-02 15:41
閱讀 2866·2021-09-02 09:48
閱讀 1402·2019-08-29 13:27
閱讀 1186·2019-08-26 13:37
閱讀 864·2019-08-26 11:56
閱讀 2512·2019-08-26 10:24
閱讀 1678·2019-08-23 18:07
閱讀 2641·2019-08-23 15:16