
前言
首先說下什么是ECMAscript ,ECMAscript是Javascript的標準,也就是他的規格。
Javascript是腳本語言,所以ECMAscript就是規定了Javascript如何去更好的去運行腳本語言。
ECMAscript 從最初開始發布過很多個版本,ES6因為是2015年發布,所以也叫ECMAscript2015. 記錄本篇文章的想法是鞏固ES5的內容,并且學習ES6的新特性。下面開始學習吧!
ES5
ES5 多半是擴展原生對象的功能,主要擴展了 Object, Array, Function 等對象功能,并且加入了 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,"求機若渴,虛心若愚",不要吝嗇你的喜歡,發動小手點一點。