摘要:的作用域與命令相同只在聲明所在的塊級作用域內(nèi)有效。數(shù)值和布爾值的解構(gòu)賦值解構(gòu)賦值時,如果等號右邊是數(shù)值和布爾值,則會先轉(zhuǎn)為對象。上面代碼中,數(shù)值和布爾值的包裝對象都有屬性,因此變量都能取到值。默認值解構(gòu)賦值允許指定默認值。
最近正在學習ES6,對于ES6的語法有一些自己的理解, 想寫這篇文章幫助跟我一樣的新手快速入門ES6而不至于連代碼都看不懂. 至于開發(fā)環(huán)境的搭建什么的例如balel下載什么的,百度上有很多的教程了. 我在這就不再贅述了,不懂得童鞋自行查找,我們將精力放在語法上.(一)let命令
ES6新增了let命令,用來聲明變量。它的用法類似于var,但是所聲明的變量,只在let命令所在的代碼塊內(nèi)有效
{ let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1
什么叫做代碼塊簡單來說就是{}內(nèi)的東西,之前JS是沒有塊級作用域的,我們會使用自執(zhí)行匿名函數(shù)來模擬塊級作用域
function outputNumbers(count){ (function () { for (var i=0; i < count; i++){ alert(i); } })(); alert(i); //導致一個錯誤! }
而在ES6中我們有了let,使用let在內(nèi)定義的變量在外部環(huán)境是無法訪問到的,最適合使用let的地方就是for循環(huán)了
for (let i = 0; i < 10; i++) { console.log(i) } console.log(i) //報錯
這樣就避免了之前使用var來定義i執(zhí)行之后i變量依然保留下來的尷尬局面.
使用let時有一個需要注意的問題就是let與var不同的一點是不存在變量提升
// var 的情況 console.log(foo); // 輸出undefined var foo = 2; // let 的情況 console.log(bar); // 報錯ReferenceError let bar = 2;
在let生命變量之前調(diào)用該變量則會報錯,而var的處理方式是把聲明提前而賦值操作保留在原地,我們都知道var只聲明未賦值則會返回unfdinded。
我們把let聲明該變量之前的這段區(qū)域稱為該變量的“暫時性死區(qū)”(temporal dead zone,簡稱 TDZ)
另外let不允許重復聲明
function () { let a = 10; var a = 1; } // 報錯 function () { let a = 10; let a = 1; }(二)const命令
const聲明一個只讀的常量。一旦聲明,常量的值就不能改變。
const PI = 3.1415; PI // 3.1415 PI = 3; // TypeError: Assignment to constant variable.
上面代碼表明改變常量的值會報錯。
const聲明的變量不得改變值,這意味著,const一旦聲明變量,就必須立即初始化,不能留到以后賦值。
const foo; // SyntaxError: Missing initializer in const declaration
上面代碼表示,對于const來說,只聲明不賦值,就會報錯。
const的作用域與let命令相同:只在聲明所在的塊級作用域內(nèi)有效。
if (true) { const MAX = 5; } MAX // Uncaught ReferenceError: MAX is not defined
const命令聲明的常量也是不提升,同樣存在暫時性死區(qū),只能在聲明的位置后面使用。
if (true) { console.log(MAX); // ReferenceError const MAX = 5; }
上面代碼在常量MAX聲明之前就調(diào)用,結(jié)果報錯。
const聲明的常量,也與let一樣不可重復聲明。
var message = "Hello!"; let age = 25; // 以下兩行都會報錯 const message = "Goodbye!"; const age = 30;
const命令更適合定義那種一經(jīng)定義就不需要再改變的變量,例如url地址之類。
關(guān)于頂層對象
我們都知道,ES5中全局var定義的變量、function實際都是全局對象window(global)的屬性,而ES6為了保持兼容性,var命令和function命令聲明的全局變量,依舊是頂層對象的屬性;另一方面規(guī)定,let命令、const命令、class命令聲明的全局變量,不屬于頂層對象的屬性。也就是說,從ES6開始,全局變量將逐步與頂層對象的屬性脫鉤。
var a = 1; // 如果在Node的REPL環(huán)境,可以寫成global.a // 或者采用通用方法,寫成this.a window.a // 1 let b = 1; window.b // undefined
上面代碼中,全局變量a由var命令聲明,所以它是頂層對象的屬性;全局變量b由let命令聲明,所以它不是頂層對象的屬性,返回undefined。
(三)變量的解構(gòu)賦值這部分是ES6新加的一些賦值的方法,我每個部分給一個例子,只要別人的代碼使用時能看懂就行。
1.數(shù)組解構(gòu)賦值
以前,為變量賦值,只能直接指定值。
let a = 1; let b = 2; let c = 3;
ES6允許寫成下面這樣。
let [a, b, c] = [1, 2, 3];
2.對象的解構(gòu)賦值
解構(gòu)不僅可以用于數(shù)組,還可以用于對象。
let { foo, bar } = { foo: "aaa", bar: "bbb" }; foo // "aaa" bar // "bbb"
3.字符串的解構(gòu)賦值
字符串也可以解構(gòu)賦值。這是因為此時,字符串被轉(zhuǎn)換成了一個類似數(shù)組的對象。
const [a, b, c, d, e] = "hello"; a // "h" b // "e" c // "l" d // "l" e // "o"
類似數(shù)組的對象都有一個length屬性,因此還可以對這個屬性解構(gòu)賦值。
let {length : len} = "hello"; len // 5
4.數(shù)值和布爾值的解構(gòu)賦值
解構(gòu)賦值時,如果等號右邊是數(shù)值和布爾值,則會先轉(zhuǎn)為對象。
let {toString: s} = 123; s === Number.prototype.toString // true let {toString: s} = true; s === Boolean.prototype.toString // true
上面代碼中,數(shù)值和布爾值的包裝對象都有toString屬性,因此變量s都能取到值。
解構(gòu)賦值的規(guī)則是,只要等號右邊的值不是對象或數(shù)組,就先將其轉(zhuǎn)為對象。由于undefined和null無法轉(zhuǎn)為對象,所以對它們進行解構(gòu)賦值,都會報錯。
let { prop: x } = undefined; // TypeError let { prop: y } = null; // TypeError
5.函數(shù)參數(shù)的解構(gòu)賦值
函數(shù)的參數(shù)也可以使用解構(gòu)賦值。
function add([x, y]){ return x + y; } add([1, 2]); // 3
上面代碼中,函數(shù)add的參數(shù)表面上是一個數(shù)組,但在傳入?yún)?shù)的那一刻,數(shù)組參數(shù)就被解構(gòu)成變量x和y。對于函數(shù)內(nèi)部的代碼來說,它們能感受到的參數(shù)就是x和y。
6.默認值
解構(gòu)賦值允許指定默認值。
let [foo = true] = []; foo // true let [x, y = "b"] = ["a"]; // x="a", y="b" let [x, y = "b"] = ["a", undefined]; // x="a", y="b"
注意,ES6 內(nèi)部使用嚴格相等運算符(===),判斷一個位置是否有值。所以,如果一個數(shù)組成員不嚴格等于undefined,默認值是不會生效的。
let [x = 1] = [undefined]; x // 1 let [x = 1] = [null]; x // null
上面代碼中,如果一個數(shù)組成員是null,默認值就不會生效,因為null不嚴格等于undefined。
未完待續(xù)。。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/83188.html
摘要:前言月份開始出沒社區(qū),現(xiàn)在差不多月了,按照工作的說法,就是差不多過了三個月的試用期,準備轉(zhuǎn)正了一般來說,差不多到了轉(zhuǎn)正的時候,會進行總結(jié)或者分享會議那么今天我就把看過的一些學習資源主要是博客,博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū),現(xiàn)在差不多9月了,按照工作的說法,就是差不多過了三個月的試用期,準備轉(zhuǎn)正了!一般來說,差不多到了轉(zhuǎn)正的時候,會進行總結(jié)或者分享會議!那么今天我就...
摘要:忍者級別的函數(shù)操作對于什么是匿名函數(shù),這里就不做過多介紹了。我們需要知道的是,對于而言,匿名函數(shù)是一個很重要且具有邏輯性的特性。通常,匿名函數(shù)的使用情況是創(chuàng)建一個供以后使用的函數(shù)。 JS 中的遞歸 遞歸, 遞歸基礎(chǔ), 斐波那契數(shù)列, 使用遞歸方式深拷貝, 自定義事件添加 這一次,徹底弄懂 JavaScript 執(zhí)行機制 本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機制,如果...
摘要:希望幫助更多的前端愛好者學習。前端開發(fā)者指南作者科迪林黎,由前端大師傾情贊助。翻譯最佳實踐譯者張捷滬江前端開發(fā)工程師當你問起有關(guān)與時,老司機們首先就會告訴你其實是個沒有網(wǎng)絡(luò)請求功能的庫。 前端基礎(chǔ)面試題(JS部分) 前端基礎(chǔ)面試題(JS部分) 學習 React.js 比你想象的要簡單 原文地址:Learning React.js is easier than you think 原文作...
摘要:特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 本以為自己收藏的站點多,可以很快搞定,沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方,歡迎補充。有錯誤的地方,還請斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應(yīng)和斧正,會及時更新,平時業(yè)務(wù)工作時也會不定期更...
閱讀 649·2021-11-11 16:55
閱讀 2160·2021-11-11 16:55
閱讀 1951·2021-11-11 16:55
閱讀 2341·2021-10-25 09:46
閱讀 1598·2021-09-22 15:20
閱讀 2270·2021-09-10 10:51
閱讀 1703·2021-08-25 09:38
閱讀 2613·2019-08-30 12:48