ES6 Javascript 實用開發技巧
定義變數/常量
ES6 中新增加了 let 和 const 兩個命令,let 用於定義變數,const 用於定義常量。兩個命令與原有的 var 命令所不同的地方在於,let, const 都是塊級作用域,其有效範圍僅在程式碼塊中,例項如下:
定義常量物件
上例中,常量 a 中的內容在定義後,再進行修改依然有效,原因是對於物件型別的使用是指標式引用,常量只是指向了物件的指標,物件本身的內容卻依然可以被修改,注意,陣列(Array) 也是物件; 那麼如果在定義常量時使用基礎資料型別:string, number, boolean 等
在使用中,建議使用 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
解構賦值
物件結構解構
模組化
最簡單例項的使用場景
以上簡單的例項就兩個指令碼檔案舉例說明了兩個檔案在實際使用,可以進行互相引用,並獲得目標檔案中的資料;我們可以認為一個指令碼檔案就是一個 模組,那麼在實際開發過程中,可以將業務處理內容,或是資料處理過程 抽象 在一個檔案中,在需要使用時,由其它模組引入並使用其中的資料