ES5 和 ES6(ECMA2016)

前言

首先說下什么是ECMAscript ,ECMAscript是Javascript的標準,也就是他的規格。
Javascript是腳本語言,所以ECMAscript就是規定了Javascript如何去更好的去運行腳本語言。

ECMAscript 從最初開始發布過很多個版本,ES6因為是2015年發布,所以也叫ECMAscript2015. 記錄本篇文章的想法是鞏固ES5的內容,并且學習ES6的新特性。下面開始學習吧!

ES5

ES5 多半是擴展原生對象的功能,主要擴展了 ObjectArrayFunction 等對象功能,并且加入了 strict mode 嚴格模式(即是 在使用前輸入 use strict 就會進入嚴格模式 對后方代碼書寫進行嚴格控制,不規范就會報錯),和JSON.parse等功能。

ES5的大部分特性 在ie9+ 都得到支持所以都可實現在JavaScript。

Objest

傳入參數o必須是object類型,如果不是則會拋出異常

Object.getPrototypeOf(o) //獲取o的prototype對象,等價于以前的o.__proto__ 
Object.getOwnPropertyDescriptor(o,p) //獲取對象描述,和Object.defineProperty相關方法 
Object.getOwnPropertyNames(o) //獲取自由屬性名列表,結果列表將不包含原型鏈上的屬性
Object.create(o,p) //以o為prototype創建新的對象并返回,如果對象描述p存在 就是用剛剛定義創建的對象
Object.defineProperty(o,p,attrs) //根據規則attrs定義對象o上,屬性名為p的屬性
Object.defineProperties(o,props) //根據對象描述props來定義對象o,通常props包含多個屬性的定義
Object.seal(o) //一個對象在默認狀態下,
    extensible: 可以添加新的屬性
    configurable: 可以修改已有屬性的特性
    Object.seal會改變這兩個特性,既不能擴展新屬性,也不能修改已有屬性的特性。
Object.freeze(o) //將對象的每個自有自有屬性(own property)做如下操作:
    屬性的writable特性置為false
    屬性的configurable特性置為false
    同時,該對象將不可擴展。可見,該方法比Object.seal更加嚴格的限制了對一個對象的未來改動。
Object.preventExtensions(o) //將對象置為不可擴展
Object.isSealed(o) //判斷一個對象是否sealed:
    對象的每個自有屬性:如果屬性的configurable特性為true,則返回false
    如果對象為extensible的,那么返回false
    不滿足以上兩個條件,則返回true
Object.isFrozen(o) //
    對每個自有屬性,如果該屬性的configurable或writable特性為true,則返回false
    如果對象為extensible的,那么返回false
    不滿足以上兩個條件,則返回true
Object.isExtensible(o) //判對一個對象是否可擴展
Object.keys(o) //返回對象o的所有可枚舉(enumerable)屬性的名稱
Object.prototype.isPrototypeOf(v) //檢查對象是否是位于給定對象v的原型鏈上
Object.prototype.propertyIsEnumerable(p) //檢查一個對象上的屬性p是否可枚舉
Array
Array.isArray(a) //判斷a是否為為真正的Array
Array.prototype.indexOf(e,i) //使用“嚴格等”來判斷元素e在數組中的索引號。一個可選的搜索起點i
Array.prototype.lastIndexOf(e,i) //獲取元素e在數組中最后出現的位置。起始位置i為可選
Array.prototype.every(t,c) //測試數組中的每個元素都滿足測試t。之后介紹的所有數組遍歷方法,都支持一個可選的上下文對象c,可以靈活設置回調函數的執行上下文。傳遞給數組的測試函數、遍歷函數通常有如下簽名:
    function(item, index, array) {}
Array.prototype.some(t,c) //測試數組中是否有元素滿足測試t
Array.prototype.forEach(f,c) //使用函數f遍歷每個數組的元素
Array.prototype.map(f,c) // 使用函數f修改每個數組的每個元素。按順序收集f的每個返回值,并返回這個新組成的數組
Array.prototype.filter(f,c) //收集通過函數測試f的書組元素
Array.prototype.reduce(r,v) //從左向右,使用函數r聚集數組的每個元素。可以可選的制定一個初始值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) //為了指定當前函數的上下文對象和運行參數,該函數創建一個新的函數,保留給定的this對象和運行參數
Json
JSON.parse(text) //根據rfc4627標準解析JSON文本
JSON.stringify(obj) //將指定的對象obj序列化為JSON文本
Date
Date.now //獲取當前時間距1970.1.1 00:00:00的毫秒數
Date.prototype.toISOString //根據ISO8601生成時間字符串
    (new Date).toISOString()
    '2014-04-02T08:31:53.049Z'

ES6

復習完ES5,下面我們來學習ES6吧,ES6加入了很多新特性,但是ES6還沒有完全可以在JavaScript中直接書寫,我們可以用Babel來把你書寫的ES6轉換為ES5。所以我們先來講下Babel

Babel:一個廣泛使用的ES6轉碼器,可以將ES6代碼轉為ES5代碼.

//首先在你的項目根目錄下 配置文件.babelrc 用來設置轉碼規則和插件
    {
        "presets":[],
        "plugin":[]
    }
字段設定轉碼規則 需要根據自己的需求進行安裝 
npm install --save-dev 轉碼規則
//安裝命令行轉碼工具 babel-cli 用于命令行轉換。
npm install --global babel-cli 

使用方法:

babel xxx.js  //標準輸出
babel xxx.js  --out-file(或者-o) xxx.js //指定輸出文件
babel src --out-dir lib(或者-d) 指定輸出目錄
babel src -d lib -s //加入-s參數生成source map文件
注意:在命令行使用babel的時候要確定全局安裝babel 或者在根目錄下安裝項目中如下
npm install --save-dev babel-cli 
然后改寫package.json 
{
// ...
"devDependencies":{
    "babel-cli": "^6.0.0"},
    "scripts": {
    "build": "babel src -d lib"},
}

轉碼的時候執行下面命令即可:

npm run build

此外還有一些其他相關babel的工具,自行參考。

ES6新特性

let 和 const

ES6新增了let命令 用來聲明變量 同var相同 但是作用域卻不同,let聲明變量為塊級作用域

for(let i=1;i<8;i++){

}
console.log(i) // 這里會在控制臺提示i找不到 因為let聲明的i只作用在函數內部
  • 這樣做的好處就是避免了變量提升即在用var 聲明一個變量前先調用會提示 undifind 但是用了let后如果在聲明前就調用會報錯
  • 避免污染全局變量
  • let 不允許在同一個作用域中聲明相同變量

而const也用來聲明變量 但是聲明的是常量,如果我們聲明后再改變const變量就會報錯

Class

ES6中引入了類的概念,使的Javascript更加規范,成為面向對象變成的語法。

class Name{
    //構造方法 constructor  this代表實力對象
    constructor(){
        this.name = 'tom'
    }
    says(say){
        console.log(this.name+'is'+say)
    }
}
//創建一個是實例
let person = new Name()
person.syas('hello,world')

Class 的繼承 用extends關鍵字實現 比如一個 Mingzi類需要繼承 Name

class Mingzi extends Name{
    constructor(){
        super()
        this.type = 'girl'
    }
}

這里super只帶父類的實例,子類必須在constructor方法中調用super 否則會報錯 如果不調用super方法 子類就得不到this對象。

然后我們實例化Mingzi

let girl = new Mingzi()
girl.says('i am a sexy girl')
箭頭函數 arrow function
function(i){return i*5}  ==  (i) => i*5

如果函數內內容比較多用{}括起來
template string

這個應用于 如果我們利用js中寫好一個html模板 然后再加入html中這個情形,如果之前那種方法會很容易出錯,因為會加入很多+和單雙引號問題。

在es6中使用模板字符串 `` 和 ${} 即可

用反引號`表明起始,用${}來引用變量
函數默認值
function names(name = 'dali'){
    console.log(name)
}
names()

總結

總體來說ES6加入了很多新特性,來方便開發和使js代碼更加規范和安全。個人推薦學習ES6后再學習Typescript,這樣會更容易些,因為這些新特性在Typescript中都有,在以后的文章中我會再詳細介紹 Typescript,"求機若渴,虛心若愚",不要吝嗇你的喜歡,發動小手點一點。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,835評論 6 534
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,676評論 3 419
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,730評論 0 380
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,118評論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,873評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,266評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,330評論 3 443
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,482評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,036評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,846評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,025評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,575評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,279評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,684評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,953評論 1 289
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,751評論 3 394
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,016評論 2 375

推薦閱讀更多精彩內容

  • 你可能已經聽說過ECMAScript 6(簡稱 ES6)了。ES6 是 Javascript 的下一個版本,它有很...
    奮斗的小廢魚閱讀 771評論 0 16
  • 你可能已經聽說過ECMAScript 6(簡稱 ES6)了。ES6 是 Javascript 的下一個版本,它有很...
    米塔塔閱讀 945評論 0 10
  • ES5,ES2015(原名 ES6 )和 TypeScript 之間有什么不同?我們應該學習和使用哪一個? 首先,...
    單純的土豆閱讀 11,467評論 2 19
  • 一、ES6簡介 ? 歷時將近6年的時間來制定的新 ECMAScript 標準 ECMAScript 6(亦稱 ...
    一歲一枯榮_閱讀 6,104評論 8 25
  • 柳條搓線絮搓麻,搓夠千尋放紙鳶,消得春風多少力,帶將兒輩上青天。 昨天晚上我給女兒讀日本作家佐野洋子寫的《活了一百...
    周洪健閱讀 305評論 0 8