前言
首先說(shuō)下什么是ECMAscript 嘲叔，ECMAscript是Javascript的標(biāo)準(zhǔn)，也就是他的規(guī)格。
Javascript是腳本語(yǔ)言润歉，所以ECMAscript就是規(guī)定了Javascript如何去更好的去運(yùn)行腳本語(yǔ)言绅喉。
ECMAscript 從最初開(kāi)始發(fā)布過(guò)很多個(gè)版本渠鸽，ES6因?yàn)槭?015年發(fā)布，所以也叫ECMAscript2015. 記錄本篇文章的想法是鞏固ES5的內(nèi)容柴罐，并且學(xué)習(xí)ES6的新特性徽缚。下面開(kāi)始學(xué)習(xí)吧！
ES5
ES5 多半是擴(kuò)展原生對(duì)象的功能革屠，主要擴(kuò)展了 Object凿试， Array， Function 等對(duì)象功能似芝，并且加入了 strict mode 嚴(yán)格模式(即是 在使用前輸入 use strict 就會(huì)進(jìn)入嚴(yán)格模式 對(duì)后方代碼書寫進(jìn)行嚴(yán)格控制那婉，不規(guī)范就會(huì)報(bào)錯(cuò))，和JSON.parse等功能国觉。
ES5的大部分特性 在ie9+ 都得到支持所以都可實(shí)現(xiàn)在JavaScript吧恃。
Objest
傳入?yún)?shù)o必須是object類型，如果不是則會(huì)拋出異常
Object.getPrototypeOf(o) //獲取o的prototype對(duì)象麻诀，等價(jià)于以前的o.__proto__
Object.getOwnPropertyDescriptor(o,p) //獲取對(duì)象描述痕寓，和Object.defineProperty相關(guān)方法
Object.getOwnPropertyNames(o) //獲取自由屬性名列表，結(jié)果列表將不包含原型鏈上的屬性
Object.create(o,p) //以o為prototype創(chuàng)建新的對(duì)象并返回蝇闭，如果對(duì)象描述p存在 就是用剛剛定義創(chuàng)建的對(duì)象
Object.defineProperty(o,p,attrs) //根據(jù)規(guī)則attrs定義對(duì)象o上呻率，屬性名為p的屬性
Object.defineProperties(o,props) //根據(jù)對(duì)象描述props來(lái)定義對(duì)象o，通常props包含多個(gè)屬性的定義
Object.seal(o) //一個(gè)對(duì)象在默認(rèn)狀態(tài)下呻引，
extensible: 可以添加新的屬性
configurable: 可以修改已有屬性的特性
Object.seal會(huì)改變這兩個(gè)特性礼仗，既不能擴(kuò)展新屬性，也不能修改已有屬性的特性。
Object.freeze(o) //將對(duì)象的每個(gè)自有自有屬性(own property)做如下操作：
屬性的writable特性置為false
屬性的configurable特性置為false
同時(shí)元践，該對(duì)象將不可擴(kuò)展韭脊。可見(jiàn)单旁，該方法比Object.seal更加嚴(yán)格的限制了對(duì)一個(gè)對(duì)象的未來(lái)改動(dòng)沪羔。
Object.preventExtensions(o) //將對(duì)象置為不可擴(kuò)展
Object.isSealed(o) //判斷一個(gè)對(duì)象是否sealed：
對(duì)象的每個(gè)自有屬性：如果屬性的configurable特性為true，則返回false
如果對(duì)象為extensible的象浑，那么返回false
不滿足以上兩個(gè)條件蔫饰，則返回true
Object.isFrozen(o) //
對(duì)每個(gè)自有屬性，如果該屬性的configurable或writable特性為true愉豺，則返回false
如果對(duì)象為extensible的篓吁，那么返回false
不滿足以上兩個(gè)條件，則返回true
Object.isExtensible(o) //判對(duì)一個(gè)對(duì)象是否可擴(kuò)展
Object.keys(o) //返回對(duì)象o的所有可枚舉(enumerable)屬性的名稱
Object.prototype.isPrototypeOf(v) //檢查對(duì)象是否是位于給定對(duì)象v的原型鏈上
Object.prototype.propertyIsEnumerable(p) //檢查一個(gè)對(duì)象上的屬性p是否可枚舉
Array
Array.isArray(a) //判斷a是否為為真正的Array
Array.prototype.indexOf(e,i) //使用“嚴(yán)格等”來(lái)判斷元素e在數(shù)組中的索引號(hào)蚪拦。一個(gè)可選的搜索起點(diǎn)i
Array.prototype.lastIndexOf(e,i) //獲取元素e在數(shù)組中最后出現(xiàn)的位置杖剪。起始位置i為可選
Array.prototype.every(t,c) //測(cè)試數(shù)組中的每個(gè)元素都滿足測(cè)試t。之后介紹的所有數(shù)組遍歷方法外盯，都支持一個(gè)可選的上下文對(duì)象c摘盆，可以靈活設(shè)置回調(diào)函數(shù)的執(zhí)行上下文。傳遞給數(shù)組的測(cè)試函數(shù)饱苟、遍歷函數(shù)通常有如下簽名：
function(item, index, array) {}
Array.prototype.some(t,c) //測(cè)試數(shù)組中是否有元素滿足測(cè)試t
Array.prototype.forEach(f,c) //使用函數(shù)f遍歷每個(gè)數(shù)組的元素
Array.prototype.map(f,c) // 使用函數(shù)f修改每個(gè)數(shù)組的每個(gè)元素。按順序收集f的每個(gè)返回值狼渊，并返回這個(gè)新組成的數(shù)組
Array.prototype.filter(f,c) //收集通過(guò)函數(shù)測(cè)試f的書組元素
Array.prototype.reduce(r,v) //從左向右箱熬，使用函數(shù)r聚集數(shù)組的每個(gè)元素”芬兀可以可選的制定一個(gè)初始值v
Array.prototype.reduceRight(r,v) //Array.prototype.reduce的從右向左的版本
String
String.prototpye.trim //去掉字符串兩頭的空白符和換行符
字符訂閱:
//property access on strings
"abc"[2] === "b"
Function
Function.prototype.bind(thisTarget, arg1,...argn) //為了指定當(dāng)前函數(shù)的上下文對(duì)象和運(yùn)行參數(shù)城须，該函數(shù)創(chuàng)建一個(gè)新的函數(shù)，保留給定的this對(duì)象和運(yùn)行參數(shù)
Json
JSON.parse(text) //根據(jù)rfc4627標(biāo)準(zhǔn)解析JSON文本
JSON.stringify(obj) //將指定的對(duì)象obj序列化為JSON文本
Date
Date.now //獲取當(dāng)前時(shí)間距1970.1.1 00:00:00的毫秒數(shù)
Date.prototype.toISOString //根據(jù)ISO8601生成時(shí)間字符串
(new Date).toISOString()
'2014-04-02T08:31:53.049Z'
ES6
復(fù)習(xí)完ES5米苹，下面我們來(lái)學(xué)習(xí)ES6吧糕伐，ES6加入了很多新特性，但是ES6還沒(méi)有完全可以在JavaScript中直接書寫蘸嘶，我們可以用Babel來(lái)把你書寫的ES6轉(zhuǎn)換為ES5良瞧。所以我們先來(lái)講下Babel
Babel:一個(gè)廣泛使用的ES6轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼.
//首先在你的項(xiàng)目根目錄下 配置文件.babelrc 用來(lái)設(shè)置轉(zhuǎn)碼規(guī)則和插件
{
"presets":[],
"plugin":[]
}
字段設(shè)定轉(zhuǎn)碼規(guī)則 需要根據(jù)自己的需求進(jìn)行安裝
npm install --save-dev 轉(zhuǎn)碼規(guī)則
//安裝命令行轉(zhuǎn)碼工具 babel-cli 用于命令行轉(zhuǎn)換训唱。
npm install --global babel-cli
使用方法:
babel xxx.js //標(biāo)準(zhǔn)輸出
babel xxx.js --out-file（或者-o） xxx.js //指定輸出文件
babel src --out-dir lib（或者-d） 指定輸出目錄
babel src -d lib -s //加入-s參數(shù)生成source map文件
注意：在命令行使用babel的時(shí)候要確定全局安裝babel 或者在根目錄下安裝項(xiàng)目中如下
npm install --save-dev babel-cli
然后改寫package.json
{
// ...
"devDependencies":{
"babel-cli": "^6.0.0"},
"scripts": {
"build": "babel src -d lib"},
}
轉(zhuǎn)碼的時(shí)候執(zhí)行下面命令即可：
npm run build
此外還有一些其他相關(guān)babel的工具褥蚯，自行參考。
ES6新特性
let 和 const
ES6新增了let命令 用來(lái)聲明變量 同var相同 但是作用域卻不同况增，let聲明變量為塊級(jí)作用域
for(let i=1;i<8;i++){
}
console.log(i) // 這里會(huì)在控制臺(tái)提示i找不到 因?yàn)閘et聲明的i只作用在函數(shù)內(nèi)部
- 這樣做的好處就是避免了變量提升即在用var 聲明一個(gè)變量前先調(diào)用會(huì)提示 undifind 但是用了let后如果在聲明前就調(diào)用會(huì)報(bào)錯(cuò)
- 避免污染全局變量
- let 不允許在同一個(gè)作用域中聲明相同變量
而const也用來(lái)聲明變量 但是聲明的是常量赞庶，如果我們聲明后再改變const變量就會(huì)報(bào)錯(cuò)
Class
ES6中引入了類的概念，使的Javascript更加規(guī)范，成為面向?qū)ο笞兂傻恼Z(yǔ)法歧强。
class Name{
//構(gòu)造方法 constructor this代表實(shí)力對(duì)象
constructor(){
this.name = 'tom'
}
says(say){
console.log(this.name+'is'+say)
}
}
//創(chuàng)建一個(gè)是實(shí)例
let person = new Name()
person.syas('hello,world')
Class 的繼承 用extends關(guān)鍵字實(shí)現(xiàn) 比如一個(gè) Mingzi類需要繼承 Name
class Mingzi extends Name{
constructor(){
super()
this.type = 'girl'
}
}
這里super只帶父類的實(shí)例澜薄，子類必須在constructor方法中調(diào)用super 否則會(huì)報(bào)錯(cuò) 如果不調(diào)用super方法 子類就得不到this對(duì)象。
然后我們實(shí)例化Mingzi
let girl = new Mingzi()
girl.says('i am a sexy girl')
箭頭函數(shù) arrow function
function(i){return i*5} == (i) => i*5
如果函數(shù)內(nèi)內(nèi)容比較多用{}括起來(lái)
template string
這個(gè)應(yīng)用于 如果我們利用js中寫好一個(gè)html模板 然后再加入html中這個(gè)情形摊册，如果之前那種方法會(huì)很容易出錯(cuò)表悬，因?yàn)闀?huì)加入很多+和單雙引號(hào)問(wèn)題。
在es6中使用模板字符串 `` 和 ${} 即可
用反引號(hào)`表明起始丧靡，用${}來(lái)引用變量
函數(shù)默認(rèn)值
function names(name = 'dali'){
console.log(name)
}
names()
總結(jié)
總體來(lái)說(shuō)ES6加入了很多新特性蟆沫，來(lái)方便開(kāi)發(fā)和使js代碼更加規(guī)范和安全。個(gè)人推薦學(xué)習(xí)ES6后再學(xué)習(xí)Typescript温治，這樣會(huì)更容易些饭庞，因?yàn)檫@些新特性在Typescript中都有，在以后的文章中我會(huì)再詳細(xì)介紹 Typescript,"求機(jī)若渴熬荆，虛心若愚"舟山，不要吝嗇你的喜歡，發(fā)動(dòng)小手點(diǎn)一點(diǎn)卤恳。
