es6、7、8、9主要新特效到底有哪些?

前言

這里不做新特性的解釋,我們只是搬運,你需要學習的新特性。部分復雜的,我們會出文章進行闡述。

es6

必學篇:

1、Default Parameters(默認參數(shù)):可以在函數(shù)內(nèi)參數(shù)默認值,如

var f = function(width = 1, height = 2) {
  ...
}

2、Template Literals (模板文本):通過``和${}實現(xiàn)

var name = '小雨';
var getName = `Your name is ${name} . `;
console.log(getName) // Your name is 小雨 .

3、Multi-line Strings (多行字符串):同上方法。

4、Destructuring Assignment (解構(gòu)賦值)

const {a, b} = {a:1,b:2} 
const [c, d] = [3, 4] 
console.log(a, b, c, d) // 1, 2, 3, 4

5、Enhanced Object Literals (增強的對象文本)

6、Arrow Functions (箭頭函數(shù))

  • =>不改變this指向,父函數(shù)this指向哪就是哪。
  • =>指向單行代碼可以當return使用。
$('.btn').click((event) => {
  this.fn();
});

7、Promises :需要專門研究一下,對比gennerator函數(shù)和async函數(shù)。

8、塊作用域構(gòu)造(Let and Const):const命名后不可變,let命名后數(shù)據(jù)可以變,但是沒有變量提升。

const a = 1;
let b = 2;

9、Class(類):就是面向?qū)ο缶幊蹋∣OP),用過react的都知道。
10、Modules(模塊):export聲明,import引入。

深入篇

1、全新的Math, Number, String, Array 和 Object 方法

大家去搜一下:比如,es6 string新增方法。

2、二進制和八進制數(shù)據(jù)類型:分別用前綴 0b(0B)和 0o(0O)表示

0b111110111 === 503 
0o767 === 503 

3、默認參數(shù)不定參數(shù)擴展運算符:

  • 默認參數(shù)(就是必須篇第一個)
  • rest參數(shù):三點運算符...,用于獲取剩余的對象或者數(shù)組多余參數(shù)。
  • 擴展運算符:三點運算符...,用于獲取對象或者數(shù)組參數(shù),相當于apply(null,data)。

4、Symbols符號:對象屬性名都是字符串容易造成屬性名沖突。為了避免這種情況的發(fā)生,ES6引入了一種新的原始數(shù)據(jù)類型Symbol,表示獨一無二的值。

  • 總結(jié):個人覺得最大的用處就是symbol.iterator(遍歷器),它的存在,讓我們for-of成為強大的遍歷方式。

5、tail調(diào)用

6、Generator (生成器):需要專門研究一下,對比promise函數(shù)和async函數(shù)。我寫了Generators文章,強推。

7、新的數(shù)據(jù)構(gòu)造對象map和set:還有weakmapweakset,之后會有專門文章闡述。簡單來說,之前有arrayobject,es6加了這兩種數(shù)據(jù)結(jié)構(gòu),通過symbol.iterator(遍歷器)去管理,可以理解為for-of去實現(xiàn)循環(huán)。


es7

1、數(shù)組includes()方法:用來判斷一個數(shù)組是否包含一個指定的值,根據(jù)情況,如果包含則返回true,否則返回false??梢栽诤芏嗲闆r下取代indexOf;

2、求冪運算:a ** b指數(shù)運算符,它與 Math.pow(a, b)相同。


es8

1、async await:更清新的promise語法。需要專門研究一下,對比promise函數(shù)和generator函數(shù)。我寫了async await文章。

2、Object的新方法:

  • Object.keys:將鍵值對的key值變成一個數(shù)組,例如Object.keys({a:1})
  • Object.values:將鍵值對的value值變成一個數(shù)組,例如Object.keys({a:1})。
  • Object.entries:將鍵值對,key,value同時變數(shù)組,例如Object.keys({a:1})。
  • Object.getOwnPropertyDescriptors:返回一個對象的所有自身屬性的描述符(.value,.writable,.get,.set,.configurable,enumerable),例如Object.getOwnPropertyDescriptors({a:1})

3、字符串填充:****padStart()padEnd(),填充字符串達到當前長度。

var a  = 'x'.padStart(5, 'ab') 
console.log(a) // ababx

var b  = 'x'.padEnd(5, 'ab') 
console.log(b) // xabab

4、函數(shù)參數(shù)列表和調(diào)用中的尾逗號(Trailing commas)

5、ShareArrayBuffer和Atomics用于從共享內(nèi)存位置讀取和寫入


?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • [TOC] 參考阮一峰的ECMAScript 6 入門參考深入淺出ES6 let和const let和const都...
    郭子web閱讀 1,915評論 0 1
  • 本文為阮一峰大神的《ECMAScript 6 入門》的個人版提純! babel babel負責將JS高級語法轉(zhuǎn)義,...
    Devildi已被占用閱讀 2,133評論 0 4
  • 三,字符串擴展 3.1 Unicode表示法 ES6 做出了改進,只要將碼點放入大括號,就能正確解讀該字符。有了這...
    eastbaby閱讀 1,672評論 0 8
  • 一、ES6簡介 ? 歷時將近6年的時間來制定的新 ECMAScript 標準 ECMAScript 6(亦稱 ...
    一歲一枯榮_閱讀 6,209評論 8 25
  • 1.屬性的簡潔表示法 允許直接寫入變量和函數(shù) 上面代碼表明,ES6 允許在對象之中,直接寫變量。這時,屬性名為變量...
    雨飛飛雨閱讀 1,272評論 0 3

友情鏈接更多精彩內(nèi)容