ECMAScript版本介紹
ECMAScript 是什么
- 這套規(guī)范是由 sun 和 netspace共同提出的以ECMA-262為標準和基礎的一套javascript 語言規(guī)范。
- 這是JavaScript基本語法規(guī)則的規(guī)范镰惦,其中定義了迷守,語法,關鍵字旺入,保留字盒犹。
ECMAScript 發(fā)展史
- 1998 年 ECMAScript 2.0 發(fā)布
- 1999 年 ECMAScript 3.0 發(fā)布
- 2007 年 提出了 ECMAScript 4.0 因為太激進被各大瀏覽器廠商及互聯(lián)網(wǎng)公司聯(lián)合抵制,最終沒有發(fā)布眨业。
- 2008 年 放棄4.0計劃急膀,改為3.1優(yōu)化計劃,只做了小部分更新龄捡,我們現(xiàn)在寫的最早的版本大概就是 3.1 版本了卓嫂。
- 2009 年 發(fā)布了ES5
- 2011 年 修正了ES5 發(fā)布了 ES5.1 這個標準是目前國標版本,也就是說所有的2011年之后的瀏覽器必須支持的版本聘殖。
- 2015 年 經(jīng)過 2013 年多次波折和延期發(fā)布晨雳,終于發(fā)布了ES6 版本。
- 因為ES6版本發(fā)生了加大的變更奸腺,同時太多的想法也在慢慢計劃和實施餐禁,所以ECMAScript 從2015年起, 每年都會更新一版突照。
- ES2015 以后的版本我們通常稱之為ES6 +
版本迭代的那些事
其實版本的迭代,無外乎讓自己變得更優(yōu)秀帮非,一個語言如果想要變得更優(yōu)秀,那么其實有兩條路可以走讹蘑。 一條路是變得盡可能強大末盔,盡可能可靠像是 c ++ 和 java 。 另外一個是盡可能降低學習成本座慰, 讓你幾乎無所不能 的同時可以肆無忌憚的發(fā)揮自己的想象陨舱,做的最好的當然就是JavaScript。
- 老話說的好版仔,不積跬步無以至千里游盲,不積小流误墓,無以成江海。
- 雖然自打 ES2015 以來益缎,每年的 ECMAScript 更新都不會太多谜慌,但是我們還是要時刻學習時刻進步,讓我們的語法理解永遠領先瀏覽器链峭。
- 站的更高才能看得更遠畦娄。
- 閑話就不敘了又沾,看下正文內容
ECMAScript版本的更新無外乎圍繞這以下幾方面展開
解決低性能封裝
- 因為javascript語言本身的特性導致JavaScript編程的自由度非常高(其實就是語言本身的規(guī)定較少)弊仪,所以很多的封裝并不成熟
- 為了提高開發(fā)人員工作效率,在新的JS版本之中提供了非常多新的API
- 如 ES5 版本的
forEach
,indexOf
, ES6 + 的padStart
,falt
等非常多的API
降低開發(fā)人員入門門檻
- JavaScript本身在設計的時候沒有考慮到很多的功能杖刷,導致很多可以極大提升開發(fā)效率的API励饵,在編程初期因為語言本身沒有提供,自己也沒有足夠的能力封裝滑燃,這樣很多強大的API沒法使用役听。
- 比如 jQuery 的
$.Deferred
對象是用來解決回調地獄問題的, 現(xiàn)在有了Promise
表窘,就不必引入 龐大的jQuery庫或者自己封裝了典予。 - 再比如 jQuery 里面的對象合并功能
$.extend
也被替換成了Object.assign
- 類似的API有非常多 , 總而言之新版本降低了開發(fā)人員的入門門檻乐严。
修正語言在設計之初沒有考慮的問題
- 比如ES5之中提供的嚴格模式瘤袖,提高代碼的執(zhí)行效率, 減少了很多烏龍代碼昂验,降低了代碼的維護成本捂敌。
- ES6之中新增的塊級作用域,讓JS不用每次使用作用域都需要用到函數(shù)既琴。
干掉了JS之中某些非常惡心的寫法
- 比如async , await 占婉, class這樣的關鍵字,解決了非常之難寫的回調函數(shù)甫恩。提供了非常香甜的語法糖逆济。
提供了以前不支持的新東西
- 常量,新的數(shù)據(jù)結構 磺箕, Set, Map纹腌, 這個不用擔心在ES6之后就基本已經(jīng)補齊了開發(fā)所需,幾乎追平了主流語言滞磺,所以對我們來說這種新東西學一個少一個 升薯。
- 某些新的可以使用的特性 , 比如在 class 之中添加了
#
還有static
這類的新東西 - 再比如說新增的各種運算符
**
,?.
,??
..
來自ECMAScript的深情告白 : 其實所有語言版本的更新都是為了讓我們更快速击困,更有效率的完成我們的開發(fā)工作涎劈,JavaScript這個語言像是窮苦出身的孩子广凸,天賦一般,成績一般蛛枚,但是在自己不屑的努力下谅海,終于在這個時代占據(jù)了屬于自己的重要一席,因為JavaScript的每一次改變都是為了更好的自己和更方便使用它的你蹦浦。
- 一句話: 新東西來了扭吁,學就完了。
ES2020版本的新特性
提供了新的API :
Promise的allSettled
原本的Promise.all 在某一個程序報錯后盲镶,會終止其余程序執(zhí)行侥袜,但是allSettled不會終止其程序執(zhí)行, 屬于一個優(yōu)化版的Promise.all溉贿。
正則的matchAll
-
原本的match方法分成兩種返回形式 :
- 匹配到的數(shù)據(jù)只有一個 枫吧, 以對象的形式返回詳情 :
{ input : xxx , xxxx.}
- 匹配到的數(shù)據(jù)只有一個 枫吧, 以對象的形式返回詳情 :
- 匹配到的數(shù)據(jù)有多個 , 以數(shù)組的形式返回所有匹配到的數(shù)據(jù)宇色。
現(xiàn)在的matchAll 可以匹配所有的項并以詳情的形式返回 一個數(shù)組對象九杂。
globalThis
因為 web端的全局對象是 window, nodejs的全局對象是global 宣蠕, 為了統(tǒng)一兩者的使用例隆,所以es2020 建立了新的關鍵字 globalThis。
這個關鍵字實現(xiàn)了window===globalThis
還有global===globalThis
抢蚀。
新的語法規(guī)則镀层,修正了之前的不足
運算符類 :
- 可選鏈式調用 : 其實就是對
.
取出運算的優(yōu)化 ,避免的取出運算的報錯思币。
// 我們聲明一個對象
var obj = { a : 10 }
// 如果使用正常的取出運算符 , 在取出為undefined或者null的時候鹿响,JavaScript會給我們報出一個類型錯誤
// 例如 :
obj.c.a
// 這個連續(xù)運算就會報出類型錯誤 : TypeError : Cannot read property 'a' of undefined
// 因為 obj.c 運算那結果為 undefined
// undefined.a 就出現(xiàn)了配合undefined的取出運算。
- 因為JavaScript是單線程的原因谷饿,所有在報錯的時候惶我,會導致代碼終止執(zhí)行,為了避免類似的報錯出現(xiàn)博投,讓我們可以用更優(yōu)雅從容的方式解決錯誤邏輯绸贡,ES2020給我們提供了可選鏈式調用運算
?.
- 具體使用
var obj = { a : 10 }
obj.c?.a
// 這個運算第一步obj.c 還是 undefined
//所以第二步的運算是 undefined?.a
// 這個運算符,在進行取出的時候毅哗,會判定前面的值是否為 undefined 或者 null 如果是听怕,那么則返回undefine ,不會報錯。
//我們在使用對象的時候可以規(guī)避開報錯虑绵。
這種運算尿瞭,不建議在開發(fā)階段使用, 因為這可能導致無法正常排查錯誤翅睛。
建議在項目上線后在敏感區(qū)域替換声搁,確保在字段查詢?yōu)榭盏那闆r下黑竞,或者數(shù)據(jù)返回錯誤的情況下程序可以正常運行。
空值合并
我們在處理默認參數(shù)的情況下都是用
||
運算疏旨,利用其短路特性進行處理很魂。我們來看一下短路運算在設置默認參數(shù)的時候會發(fā)生什么問題
// 如果我們想要給函數(shù)的參數(shù)設置默認值,那么我們就可以使用這樣的方式檐涝。
function foo( option ){
option = option || "hello world"
}
// 這個運算的涵義很簡單遏匆,如果option 傳入的參數(shù)經(jīng)過轉換為true,那么則直接返回option , 不會繼續(xù)運算谁榜。
// 如果傳入的參數(shù)轉換為false幅聘,那么我們就把option設置為默認值"hello world"
- 根據(jù)JavaScript數(shù)據(jù)類型的轉換規(guī)則,我們應該了解惰爬, 如果我們傳入的實參為
""
,0
,false
,null
則無法正常賦值為傳入的參數(shù)喊暖,因為這些類型都會被轉換為 false惫企, 直接觸發(fā)||
運算的短路撕瞧。 - 在 ES2020 中我們可以把
||
運算替換成??
運算,實現(xiàn)空值的合并,這個合并可以兼容 數(shù)字0
狞尔。 - 注意 : 這個合并是不能同時兼容
undfeind
類型和null
類型的
function foo( option ){
option = option ?? "hello worold"
}
- 這樣則可以讓option的默認值為任意值丛版。
class類 :
class 靜態(tài)字段
其實class這個東西一直都存在一定的不足,因為在ES6增加了
class
關鍵字之后偏序,確實沒有提供static
這樣的方法页畦, 那么很多類的觸發(fā)器就要內置, 會導致一些尷尬的問題研儒。
class Foo{
init(){
// 觸發(fā)功能;
}
}
- 這個
Foo
類在其他位置需要使用的時候豫缨,我們需要兩個步驟,第一個步驟先去let foo
, 第二個步驟let foo = new Foo()
實例我們當前的構造函數(shù)端朵。 - 多了一個全局變量好芭, 為了最大程度的節(jié)省全局命名空間,
class
給我們提供了static
字段 - 這個字段可以讓我們在任意位置訪問類之中的內容冲呢。
class Foo{
static init(){
// 觸發(fā)調用當前類
}
}
在這里我們使用
init
功能只需要Foo.init()
即可舍败。class 私有字段
如果涉及到命名空間可能的沖突,在自己的類內部定義一下方法可以使用敬拓,私有字段邻薯。
定義的方式是 :
#名稱=值
class Foo{
#hello="hello world";
init(){
console.log(this.#hello) // hello world
}
}
let foo = new Foo();
foo.init();
console.log(foo.#hello)// 報錯 ;
語法規(guī)則類
- 頂級await
- 在之前的版本上我們使用
await
關鍵字需要在async
定義的函數(shù)之中使用,所以我們在頁面初始情況下需要加載數(shù)據(jù)的話乘凸,就要使用匿名函數(shù)厕诡,變成如下形式 :
(async ()=>{
await res = fetch("xxx");
})()
- 那么在ES2020支持了頂級await之后,我們的代碼就少了這種無用的包裹营勤,更加簡潔的實現(xiàn)了數(shù)據(jù)的加載灵嫌,我們甚至可以在代碼執(zhí)行之前信柿,定義必要的依賴引入
await res = fetch("xxx");
在JS解析規(guī)則上來講, 后面的內容都會放在回調函數(shù)里醒第,所以渔嚷,如果我們需要優(yōu)先加載數(shù)據(jù)完全可以使用這樣的全局await對數(shù)據(jù)進行加載,急劇的簡化了我們的開發(fā)成本。
動態(tài)引入
這個語法規(guī)則稠曼, 之前是僅在webpack之中支持的,ES2020 在原生的解析器之中支持了這種寫法 形病, 其意義也是相當于在web端支持了 COMMONJS 的同步
require
方式。具體語法如下 :
import (xxxx).then(function(res){
console.log(res);
})
參數(shù)之中的錯誤拋出
很遺憾沒法測試霞幅,因為截止目前為止我們的瀏覽器不支持這種最新的語法漠吻。
但是他可以讓我們自定義跟多的錯誤,至少算是少些了一個邏輯司恳。
let foo = ( arg = throw new TypeError("參數(shù)類型錯誤"))=>{
}
try catch
這個用法單純的就是對原版本
try catch
學習成本的降低途乃。在ES2020之中我們的
try catch
可以不在catch之中傳遞參數(shù)了。
try {
return JSON.parse(await readFile(optionalConfigFilePath))
} catch {
return {}
}
- 如果你對本文感興趣 扔傅, 或者想要獲得更多的課程資料可以添加QQ : 931673916 耍共, 或者email : 931673916@qq.com
-
最后附上學習腦圖 :