ES6中非常實用的新特性介紹
ECMAScript 6離我們越來越近了,作為它最重要的方言,Javascript也即將迎來語法上的重大變革,InfoQ特開設(shè)“深入淺出ES6”專欄,來看一下ES6將給我們帶來哪些新內(nèi)容。
寫在前面
ES6 已經(jīng)提交給 Ecma 大會審查了,也就是說,我們將迎來一大波 javascript 的最新標準,還有一些語法糖。ES6 中有很多值得我們關(guān)注的東西,下面是我發(fā)現(xiàn)的一些我們最常用的一些新特性,進行記錄一下。
1. for-of循環(huán)
這個東西用來循環(huán)數(shù)組很爽,原因呢,是因為它彌補了目前 es5 中循環(huán)數(shù)組的一切缺陷。
比如 for-in,它會遍歷數(shù)組對象的附加屬性,而不僅僅是遍歷數(shù)組值。還有一點是,for-in 中的索引是 string 類型的,這一點尤其重要。
var arrObj=['alexchen',1,{}]; arrObj._name='attr-AlexChen'; for(var i in arrObj){ console.log(arrObj[i]) // 會把_name屬性也遍歷出來 console.log(typeof(i)) // 全部輸出 string }
當然我們還有 forEach() 函數(shù),它也有問題,比如你不能在里面 break return 之類的:
var arrObj = ['alexchen','boy','great']; arrObj.forEach(function (v) { if (v == 'boy') { return 'can not return'; } console.log(v) //會輸出alexchen great })
這樣看起來要比 for-in 簡便很多。但就像上面說的一樣,它有也有不足的地方。那么我們來試試 for-of 吧:
var arrObj = ['alexchen',1,{}]; arrObj._name = 'attr-alexchen'; for (var i of arrObj) { console.log(i);//這里只會輸出,alexchen,1,object{},不會輸出attr-alexchen console.log(typeof(i))//這里會輸出 string,number,object if (i == 1) { break; } console.log(i)//只會輸出 alexchen,滿足條件之后就不在繼續(xù)循環(huán),提高了效率并且可以自由控制跳出循環(huán)或繼續(xù)循環(huán) }
可以看到:
當使用 for-of 的時候,循環(huán)的是數(shù)組內(nèi)部的元素且不會出現(xiàn) for-in 中將附加屬性也遍歷的情況,其次,循環(huán)變量的類型和其在數(shù)組中的類型保持一致,而不是全部是 string 的情況。
就這兩點就值得我們選擇 for-of 而不是 forEach() 或 for-in 當然,現(xiàn)在還有些瀏覽器不支持。不過以上代碼可以在最新版本的 FireFox 執(zhí)行成功并得到預(yù)期結(jié)果。當然 for-of 并不是只在數(shù)組上使用,你可以用在任何類數(shù)組類型的對象上,比如 DOM NodeList, 字符串 等。
2. 模版字符串
這個東西也非常好玩,用在字符串拼接的地方。從名稱上我們就知道是干啥的了。在前端開發(fā)過程中難免會遇到要動態(tài)拼接字符串的情況(動態(tài)dom生成,數(shù)據(jù)格式化)等:
(function sayHello(name, words) { console.log(`hello: ${name},welcome es6,your words is: ${words}`); // })('alexchen','im admin')//運行之后將會輸出:hello: alexchen,welcome es6,your words is: im admin
注意,被當作模版的字符串使用 ` 號包裹的。其中 $(paramenter) 是占位符,而且支持對象,eg:$(obj.name) 這種形式。與普通字符串相比模版字符串可以寫成多行而不需要用 + 連接:
hello:$(name), welcome es6, your words is $(words)
值得注意的是,模版字符串不會轉(zhuǎn)義特殊字符,因此需要自己處理其中的安全隱患。模版字符串并不能夠代替模版框架,原因是模版字符串沒有內(nèi)置的循環(huán)語法和條件語句。因此,對于常規(guī)的普通的字符串拼接,我們可以使用它來完成,會讓你的代碼看起來更酷一點。PS(除此之外,我覺得它并沒有什么卵用。ψ(╰_╯))
這里有更詳細的介紹來解決上面說道的沒有內(nèi)置循環(huán)和判斷分支的問題:
es6-模版字符串-mozilla
3. 默認參數(shù)(Defaults parameters)
這個有點意思,是這樣的,我們都知道 js 函數(shù)是不需要給函數(shù)參數(shù)設(shè)置默認值的,比如如下代碼會報錯:
(function(a=0,b=0){return a+b;})(1,2)//不支持es6的瀏覽器下會報錯的SyntaxError: Unexpected token =
這也就意味著,我們的參數(shù)不能給默認值,如果需要給參數(shù)默認值就需要在函數(shù)內(nèi)部判斷其是否為 undefined 的方式來處理。然而在 ES6 中呢,我們可以給參數(shù)設(shè)置默認值,而不用在函數(shù)內(nèi)部去判斷后賦默認值,不但可以賦值默認值,還可以使用運算表達式,如下:
(function testDefaultsParams(pars1 = "alexchen", pars2 = (pars1 == "alexchen") ? "admin" : "not admin") { console.log(`welcome ${pars1} ,u r ${pars2}!!`)//用到了上面說的模版字符串 })(); /**參數(shù)為空時輸出,welcome alexchen ,u r admin!!, 如果第一個參數(shù)不是alexchen則輸出,welcome alexchen ,u r not admin!!**/
這種方式在編寫代碼時非常的簡便,和動態(tài)語言一樣,比如 c# 中。這樣既直觀,又方便。所以用起來還是很不錯的。還一個剩余參數(shù)(Rest parameters),筆者沒發(fā)現(xiàn)有什么特別的用處,因此就不寫啦,感興趣的可以去看看
默認參數(shù)和剩余參數(shù)-mozilla
ES6 中還有很多新特性和語法。感興趣的可以看一下 mozilla 團隊的博客,里面有很詳細的介紹,而且是系列文章。
mozilla-ES6-系列介紹
好了,以上就是我在 ES6 中發(fā)現(xiàn)的三個比較實用的新東西,這三個應(yīng)該是日常開發(fā)中用的最多的了,在此做個記錄。
關(guān)于ES6中非常實用的新特性介紹就給大家介紹這么多,希望對大家有所幫助!
- JavaScript ES6的新特性使用新方法定義Class
- JavaScript中的Reflect對象詳解(ES6新特性)
- 深入淺出ES6新特性之函數(shù)默認參數(shù)和箭頭函數(shù)
- 簡單談?wù)凟S6的六個小特性
- ES6新特性之Symbol類型用法分析
- ES6(ECMAScript 6)新特性之模板字符串用法分析
- ES6新特性之變量和字符串用法示例
- ES6新特性之模塊Module用法詳解
- ES6新特性之字符串的擴展實例分析
- ES6新特性二:Iterator(遍歷器)和for-of循環(huán)詳解
- ES6新特性六:promise對象實例詳解
- ES6新特性七:數(shù)組的擴充詳解
- ES6新特性八:async函數(shù)用法實例詳解
- ES6新特性之類(Class)和繼承(Extends)相關(guān)概念與用法分析
- 讓微信小程序支持ES6中Promise特性的方法詳解
- ES6新特性:使用export和import實現(xiàn)模塊化詳解
- es6新特性之 class 基本用法解析
- ES6 13個新特性總結(jié)
相關(guān)文章
List Information About the Binary Files Used by an Applicati
List Information About the Binary Files Used by an Application...2007-06-06select、radio表單回顯功能實現(xiàn)避免使用jquery載入賦值
select、radio表單回顯避免使用jquery載入賦值,最好的做法是:在jsp頁面進行邏輯判斷,具體實現(xiàn)如下,感興趣的朋友可以參考下哈,希望對大家有所幫助2013-06-06JavaScript設(shè)計模式之門面模式原理與實現(xiàn)方法分析
這篇文章主要介紹了JavaScript設(shè)計模式之門面模式原理與實現(xiàn)方法,結(jié)合實例形式分析了門面模式的原理、實現(xiàn)方法及操作注意事項,需要的朋友可以參考下2020-03-03淺談layui 綁定form submit提交表單的注意事項
今天小編就為大家分享一篇淺談layui 綁定form submit提交表單的注意事項,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10