1. 程式人生 > >ES6 Javascript 實用開發技巧

ES6 Javascript 實用開發技巧

定義變數/常量

ES6 中新增加了 let 和 const 兩個命令,let 用於定義變數,const 用於定義常量。兩個命令與原有的 var 命令所不同的地方在於,let, const 都是塊級作用域,其有效範圍僅在程式碼塊中,例項如下:

定義常量物件

上例中,常量 a 中的內容在定義後,再進行修改依然有效,原因是對於物件型別的使用是指標式引用,常量只是指向了物件的指標,物件本身的內容卻依然可以被修改,注意,陣列(Array) 也是物件; 那麼如果在定義常量時使用基礎資料型別:stringnumberboolean 等

在使用中,建議使用 let 與 const 完全代替 var 命令

數值擴充套件

轉換 Number.parseInt - 將字串或數字轉換為整數 Number.parseFloat - 將字串或數字轉換為浮點數

Number.parseInt, Number.parseFloat 與 parseInt, parseFloat 功能一致,在ES6中,推薦使用 Number. 的方式進行呼叫,這麼做的目的是為了讓程式碼的使用方式儘可能減少全域性性方法,使用得語言逐步模組化

測試函式

//測試是否整數

Number.isInteger(21)//true

Number.isInteger(1.11)//false

//測試是否NaN

Number.isNaN(Nan)//true

Number.isNaN(1)//false

<br><br>

字串擴充套件

字串內容測試

字串內容重複輸出

原生支援模板語言

字串遍歷輸出

字串補全

陣列擴充套件

合併陣列

快速轉換為陣列

陣列內容測試

內容過濾

內容例項

.keys() - 獲得陣列中所有元素的鍵名(實際上就是下標索引號)

.values() - 獲得陣列中所有元素的資料

.entries() - 獲得陣列中所有資料的鍵名和資料

.entries(), .keys(), .values() 功能與 Object 中的幾個同名函式功能類似,實際使用中實用性不高,對於陣列的操作,直接進行遍歷即可

物件擴充套件

屬性的簡潔表示

判斷物件是否為陣列

物件內容合併

let a = {a:1,b:2}, b = {b:3}, c = {b:4,c:5};

let d = Object.assign(a, b, c);

console.log(d);//{a:1,b:4,c:5}

console.log(a);//{a:1,b:4}

//上面的合併方式會同時更新 a 物件的內容,a 的屬性如果有多次合併會被更新資料,

//但自身沒有的屬性,其它物件有的屬性不會被新增到 a 身上;

//引數列中的物件只會影響第一個,後面的引數物件不會被修改資料

//推薦使用這種方式進行物件資料合併

let a = {a:1,b:2}, b = {b:3}, c = {b:4,c:5};

let d = Object.assign({}, a, b, c);//第一個引數增加一個空物件,在合併時讓它被更新,不影響實際的物件變數內容

console.log(d);//{a:1,b:4,c:5}//與上面的方式合併結果一致,使用這種方式, a 物件的內容就不會被影響了

物件內容合併的方向是從引數順序的後向前合併

物件內容集合

Object.keys() - 獲得物件中所有的鍵名,以陣列的形式返回

Object.values() - 獲得物件中所有的值內容,以陣列的形式返回

Object.entries() - 獲得物件中所有的成員資料,以陣列的形式返回,成員的內容也是陣列形式

其實觀察可發現,Object.keys(), Object.values(), Object.entries(),與 Java 的 MAP 中的方法是一致的,不論是方法名還是具體的用法,這也可以幫忙理解這些功能 API

解構賦值

物件結構解構

模組化

最簡單例項的使用場景

以上簡單的例項就兩個指令碼檔案舉例說明了兩個檔案在實際使用,可以進行互相引用,並獲得目標檔案中的資料;我們可以認為一個指令碼檔案就是一個 模組,那麼在實際開發過程中,可以將業務處理內容,或是資料處理過程 抽象 在一個檔案中,在需要使用時,由其它模組引入並使用其中的資料