ES6

簡介

阮一峰-ES6

ECMAScript 和 JavaScript 的關(guān)系是星虹,前者是后者的規(guī)格挣饥,后者是前者的一種實(shí)現(xiàn)自晰。

現(xiàn)在通用的是ES5(ES3)。

ES6每年都有一次更新浙宜,所以具體版本如ES2015指的是ES6的2015年版本官辽。



let和const

Let

let不同于var,let具有塊級作用域概念粟瞬,let不會提升變量同仆。

let存在暫時性死區(qū),在代碼塊內(nèi)裙品,使用let命令聲明變量之前俗批,該變量都是不可用的。這在語法上市怎,稱為“暫時性死區(qū)”(temporal dead zone岁忘,簡稱 TDZ),同樣的在死區(qū)使用typeof()也是輝報(bào)錯的区匠。

let不允許重復(fù)聲明干像。

let定義的變量不會存在于全局對象的屬性中。

const

const類似于let,const指向的內(nèi)存被鎖死麻汰,無法被改變速客。

變量的存儲分簡單和復(fù)雜,簡單類型存儲的是數(shù)據(jù)什乙,復(fù)雜類型存儲的是指針。

使用Object.freeze()對對象進(jìn)行凍結(jié)已球。



變量解構(gòu)

ES6允許按照一定模式,從數(shù)組和對象中提取值,對變量進(jìn)行賦值何吝,稱為解析宏怔。

這種模式方便解析數(shù)組和對象。

這種寫法屬于 "模式匹配" ,只要兩邊模式相等阔蛉,左邊的變量就會被賦予對應(yīng)的值弃舒。

數(shù)組解構(gòu)

數(shù)組解構(gòu)是按照排列順序的

下面的let中實(shí)際上是先定義了var1... ,

然后([var1, [var21, var23], var3] = [1, [2, 6], 3]);

let [var1, [var21, var23], var3] = [1, [2, 6], 3];

var1 : 1, var21 : 2, var23 : 6, var3 : 3

let[var1, ...var2] = [1, [2, 6], 3];

var1 : 1, var2 : [[2,6], 3]

不完全解構(gòu)

let [var1, [var21], var3] = [1, [2, 6], 3]

var1 :1,

var21 : 2,

var3 : 3

解構(gòu)賦值允許指定默認(rèn)值状原。默認(rèn)值生效的條件是聋呢,對象的屬性值嚴(yán)格等于undefined,使用函數(shù)賦值會是惰性求值颠区。

let [var1, [var21, var22 , var23 = 8 ], var3] = [1, [2, 6], 3]

var1 : 1

var21 : 2

var22 : 6

var23 : 8

var3 : 3

對象解構(gòu)

對象解構(gòu)是依據(jù)對象屬性名進(jìn)行解析的

對象的解構(gòu)賦值可以取到繼承的屬性削锰。

let {foo ,bar} = {foo : 'aaa', bar : 'ccc'};

//等于

let {foo : foo, bar : bar} = {foo : 'aaa', bar : 'ccc'}

foo : foo //前者是匹配模式,后者是賦予的變量

嵌套

let {info : {name : Name}, score : [score1, score2, score3]} =

{ info : {name : 'Name'}, score : [99 毕莱, 98 器贩,99]}

Name : 'Name'

score1 : 99

score2 : 98

score3 : 99

解構(gòu)賦值的規(guī)則 :?只要等號右邊的值不是對象或數(shù)組,就先將其轉(zhuǎn)為對象朋截。由于undefined和null無法轉(zhuǎn)為對象蛹稍,所以對它們進(jìn)行解構(gòu)賦值,都會報(bào)錯部服。但是像字符串唆姐,數(shù)組,布爾都可以廓八。

函數(shù)參數(shù)的解構(gòu)

函數(shù)的參數(shù)也可以使用解構(gòu)賦值厦酬。

function({x, y })

{

? ? //傳入的參數(shù)會被解構(gòu)

????//傳入?yún)?shù)也可以使用默認(rèn)值

? ? //也可以使用函數(shù)自帶默認(rèn)值

}

注意點(diǎn)

// 正確的寫法 let x;

({x} = {x: 1}); //必須加上括號‘


Module的語法

ES6有自帶的模塊加載方案,Node.js使用的是CommonJS的模塊加載方案瘫想。

CommonJS

CommonJS的模塊加載方案使用在服務(wù)器端仗阅。

CommonJS的關(guān)鍵詞 : require? ? Module.exports? ?export

let{stat,exists,readFile}=require('fs');

由于CommonJS輸出是值的拷貝

var counter = 3;

function incCounter() {

? counter++;

}

module.exports = {

? get counter() {

? ? return counter

? },

? incCounter: incCounter,

};

CommonJS特性

運(yùn)行時加載。

使用exports輸出的時值的拷貝国夜,而非引用减噪。

ES6模塊

ES6模塊加載方案可以在服務(wù)端和瀏覽器都運(yùn)行。

ES6的關(guān)鍵詞 : import export

export

這種方式輸出的接口名稱跟變量名一樣

//第一種

export var firstName = 'Hong';

export Class {};

export function FuncName() {};

//第二種

var firstName = 'Hong';

export {firstName};

指定輸出接口的名稱

var firstName = 'Hong';

export { firstName as fName};

默認(rèn)輸出

export default xxx;

import

JS 文件通過import命令加載模塊

輸出的接口只讀,無法修改

import {firstName} from ’./moduleName.js‘

輸出的變量重命名

import {firstName as fName} from 'xxx'

由于import是靜態(tài)執(zhí)行筹裕,所以不能使用表達(dá)式和變量醋闭,這些只有在運(yùn)行時才能得到結(jié)果的語法結(jié)構(gòu)。

import語句會執(zhí)行所加載的模塊朝卒,因此可以有下面的寫法证逻。

import 'lodash';

模塊的整體加載

export? * as obj from 'xxxx'

模塊的默認(rèn)加載

export defaultName from 'xxxx'

//加載默認(rèn)輸出



Module的加載

瀏覽器加載

瀏覽器加載ES6模塊,也使用<script>標(biāo)簽抗斤,

要加上 type = "module"屬性囚企。

瀏覽器對于帶有type="module"的<script>,都是異步加載瑞眼,不會造成堵塞瀏覽器龙宏,即等到整個頁面渲染完,再執(zhí)行模塊腳本伤疙,等同于打開了<script>標(biāo)簽的defer屬性银酗。

<script type="module" src="./foo.js"></script>

jquery就支持模塊加載。

引入的模塊特性

代碼是在模塊作用域之中運(yùn)行徒像,而不是在全局作用域運(yùn)行黍特。模塊內(nèi)部的頂層變量,外部不可見锯蛀。

模塊腳本自動采用嚴(yán)格模式衅澈,不管有沒有聲明use strict。

模塊之中谬墙,可以使用import命令加載其他模塊(.js后綴不可省略今布,需要提供絕對 URL 或相對 URL),也可以使用export命令輸出對外接口拭抬。

模塊之中部默,頂層的this關(guān)鍵字返回undefined,而不是指向window造虎。也就是說傅蹂,在模塊頂層使用this關(guān)鍵字,是無意義的算凿。

同一個模塊如果加載多次份蝴,將只執(zhí)行一次。

Node.js加載

Node.js 對 ES6 模塊的處理比較麻煩氓轰,因?yàn)樗凶约旱?CommonJS 模塊格式婚夫,與 ES6 模塊格式是不兼容的。

Node.js默認(rèn)是以CommonJS進(jìn)行加載的署鸡。

使用mjs后綴的話案糙,Node.js會以ES6的模式加載限嫌。

使用cjs后綴的話,Node.js會以CommonJS模式加載时捌。

package.json里面的type決定了默認(rèn)加載方式怒医。

type = "module"/"commonjs"。

ES6模塊

創(chuàng)建一個模塊之后

在package.json文件中使用main/export指定模塊的入口文件

main字段

// ./node_modules/es-module-package/package.json

{

? "type": "module",

? "main": "./src/index.js"

}

import命令就可以加載這個模塊奢讨。

// ./my-app.mjs

import { something } from 'es-module-package';

export字段

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末稚叹,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子拿诸,更是在濱河造成了極大的恐慌扒袖,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,496評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件佳镜,死亡現(xiàn)場離奇詭異僚稿,居然都是意外死亡凡桥,警方通過查閱死者的電腦和手機(jī)蟀伸,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來缅刽,“玉大人啊掏,你說我怎么就攤上這事∷ッ停” “怎么了迟蜜?”我有些...
    開封第一講書人閱讀 162,632評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長啡省。 經(jīng)常有香客問我娜睛,道長,這世上最難降的妖魔是什么卦睹? 我笑而不...
    開封第一講書人閱讀 58,180評論 1 292
  • 正文 為了忘掉前任畦戒,我火速辦了婚禮,結(jié)果婚禮上结序,老公的妹妹穿的比我還像新娘障斋。我一直安慰自己,他們只是感情好徐鹤,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,198評論 6 388
  • 文/花漫 我一把揭開白布垃环。 她就那樣靜靜地躺著,像睡著了一般返敬。 火紅的嫁衣襯著肌膚如雪遂庄。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,165評論 1 299
  • 那天劲赠,我揣著相機(jī)與錄音涧团,去河邊找鬼只磷。 笑死,一個胖子當(dāng)著我的面吹牛泌绣,可吹牛的內(nèi)容都是我干的钮追。 我是一名探鬼主播,決...
    沈念sama閱讀 40,052評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼阿迈,長吁一口氣:“原來是場噩夢啊……” “哼元媚!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起苗沧,我...
    開封第一講書人閱讀 38,910評論 0 274
  • 序言:老撾萬榮一對情侶失蹤刊棕,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后待逞,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體甥角,經(jīng)...
    沈念sama閱讀 45,324評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,542評論 2 332
  • 正文 我和宋清朗相戀三年识樱,在試婚紗的時候發(fā)現(xiàn)自己被綠了嗤无。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,711評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡怜庸,死狀恐怖当犯,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情割疾,我是刑警寧澤嚎卫,帶...
    沈念sama閱讀 35,424評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站宏榕,受9級特大地震影響拓诸,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜麻昼,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,017評論 3 326
  • 文/蒙蒙 一奠支、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧涌献,春花似錦胚宦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至卜壕,卻和暖如春您旁,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背轴捎。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評論 1 269
  • 我被黑心中介騙來泰國打工鹤盒, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蚕脏,地道東北人。 一個月前我還...
    沈念sama閱讀 47,722評論 2 368
  • 正文 我出身青樓侦锯,卻偏偏與公主長得像驼鞭,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子尺碰,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,611評論 2 353

推薦閱讀更多精彩內(nèi)容

  • 本文為阮一峰大神的《ECMAScript 6 入門》的個人版提純挣棕! babel babel負(fù)責(zé)將JS高級語法轉(zhuǎn)義,...
    Devildi已被占用閱讀 1,983評論 0 4
  • ES6模塊機(jī)制 commonjs 在node環(huán)境下跑 ES6 esModule 前段使用為主 webpack co...
    葉戲塵閱讀 818評論 0 2
  • 瀏覽器加載 傳統(tǒng)方法 HTML網(wǎng)頁中亲桥,瀏覽器通過 標(biāo)簽加載JavaScript腳本洛心。 上面代碼中,由于瀏覽器腳本的...
    oWSQo閱讀 664評論 0 0
  • 官方中文版原文鏈接 感謝社區(qū)中各位的大力支持题篷,譯者再次奉上一點(diǎn)點(diǎn)福利:阿里云產(chǎn)品券词身,享受所有官網(wǎng)優(yōu)惠,并抽取幸運(yùn)大...
    HetfieldJoe閱讀 3,657評論 2 27
  • [TOC] 參考阮一峰的ECMAScript 6 入門參考深入淺出ES6 let和const let和const都...
    郭子web閱讀 1,781評論 0 1