阮一峰的博客
http://es6.ruanyifeng.com/
一 ES6簡(jiǎn)介
ECMAScript 6.0(以下簡(jiǎn)稱(chēng) ES6)是 JavaScript 語(yǔ)言的下一代標(biāo)準(zhǔn)况既,已經(jīng)在2015年6月正式發(fā)布了。
2011年笑撞,ECMAScript 5.1版發(fā)布后黄伊,就開(kāi)始制定6.0版了站故。
因此,ES6 這個(gè)詞的原意毅舆,
就是指 JavaScript 語(yǔ)言的下一個(gè)版本西篓。
二 檢查瀏覽器是否支持ES6的方法
http://ruanyf.github.io/es-checker
三 語(yǔ)法介紹
(一) let和const的使用
1.1 let 關(guān)鍵字的使用
1.2 let和 var的區(qū)別案例
1.3 ES6的代碼塊作用域
1.4 let 不存在變量的提升定義
1.5 let的暫時(shí)性死區(qū)
1.6 const 關(guān)鍵字的使用
1.7 const定義常量的使用
1.8 const的本質(zhì)
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ì)象聲明為常量必須非常小心。
2.0 ES6 聲明變量的六種方法
2.1 ES6 的頂層對(duì)象的屬性
注意let和const變量 不添加到window中
(二) 變量的解構(gòu)賦值
1.1 數(shù)組的解構(gòu)
let [a,b] = [100,200];
1.2 對(duì)象的解構(gòu)
注意: 對(duì)象的解構(gòu)沒(méi)有順序
let { bar, foo } = { foo: "aaa", bar: "bbb" };
1.3 數(shù)值和布爾值的解構(gòu)賦值
1.4 函數(shù)參數(shù)的解構(gòu)賦值 (函數(shù)會(huì)說(shuō)明)
1.5 圓括號(hào)問(wèn)題
(三) 字符串?dāng)U展
1.1 字符的 Unicode 表示法
百度搜索:漢字字符編碼
http://www.mytju.com/classCode/tools/encode_gb2312.asp
http://tool.chinaz.com/Tools/Unicode.aspx
1.2 codePointAt()
1.3 String.fromCodePoint()
1.4 字符串的遍歷器接口
for...of的使用 和for...in的區(qū)別
1.5 charAt方法 ES5新增的方法
1.6 includes(), startsWith(), endsWith()
1.7 repeat()
1.8 模板字符串(重點(diǎn))
// ES6字符串教程中
// 有箭頭函數(shù)的寫(xiě)法和...參數(shù)的寫(xiě)法
1.8.1 字符串模板的來(lái)源是使用+的不方便
'name'+name+"age is"+age
1.8.2 字符串的插值采用${name}的方式實(shí)現(xiàn)
1.8.3 標(biāo)簽?zāi)0?tagged template
function tag(stringArr, value1, value2){
// ...
}
// 等同于
function tag(stringArr, ...values){
// ...
}
(四) 函數(shù)的擴(kuò)展
1.1 函數(shù)參數(shù)的默認(rèn)值
ES6新添加的函數(shù)默認(rèn)值
1.2 rest參數(shù)
ES6 引入 rest 參數(shù)(形式為"...變量名")契耿,用于獲取函數(shù)的多余參數(shù)瞒大,這樣就不需要使用arguments對(duì)象了
1.3 擴(kuò)展運(yùn)算符
可以看做前面的rest參數(shù)的逆運(yùn)算
擴(kuò)展運(yùn)算符(spread)是三個(gè)點(diǎn)(...)
將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列。
注意:三個(gè)點(diǎn)(...)用在不同的地方表示的意義不一樣
1.4 嚴(yán)格模式
1.4.1 從 ES5 開(kāi)始搪桂,函數(shù)內(nèi)部可以設(shè)定為嚴(yán)格模式透敌。
1.4.3 ES2016 做了一點(diǎn)修改,規(guī)定只要函數(shù)參數(shù)使用了默認(rèn)值、解構(gòu)賦值酗电、或者擴(kuò)展運(yùn)算符淌山,那么函數(shù)內(nèi)部就不能顯式設(shè)定為嚴(yán)格模式,否則會(huì)報(bào)錯(cuò)顾瞻。
1.5 name 屬性
1.6 箭頭函數(shù)
1.7 綁定 this
(五) 數(shù)值Number的擴(kuò)展
1.1 二進(jìn)制和八進(jìn)制表示法
1.2 Number.isFinite(), Number.isNaN()
1.3 Number.parseInt(), Number.parseFloat()
1.4 Number.isInteger()
四 Babel介紹使用
1.1 后綴名稱(chēng)為.babelrc文件
添加:
{
"presets": ["env"]
}
1.2 安裝babel的包文件
npm install --save-dev babel-cli babel-preset-env
1.2 運(yùn)行測(cè)試文件01example.js
1.3 babel測(cè)試文件
babel 01example.js
1.4 babel -d 測(cè)試輸出文件
babel 01example.js --out-file 01result.js
或者
babel 01example.js -o 01result.js
1.5 babel 的配置環(huán)境介紹
https://excaliburhan.com/post/babel-preset-and-plugins.html