盤點ES七、ES八、ES九、ES10新特性

前言

從 ECMAScript 2016（ES7）開始，版本發佈變得更加頻繁，每一年發佈一個新版本，好在每次版本的更新內容並很少，本文會細說這些新特性，儘量和舊知識相關聯，幫你迅速上手這些特性。想閱讀更多優質文章請猛戳GitHub博客

ES7新特性

1.Array.prototype.includes()方法

在 ES6 中咱們有 String.prototype.includes() 能夠查詢給定字符串是否包含一個字符，而在 ES7 中，咱們在數組中也能夠用 Array.prototype.includes 方法來判斷一個數組是否包含一個指定的值，根據狀況，若是包含則返回true，不然返回false。

const arr = [1, 3, 5, 2, '8', NaN, -0]
arr.includes(1) // true
arr.includes(1, 2) // false 該方法的第二個參數表示搜索的起始位置，默認爲0
arr.includes('1') // false
arr.includes(NaN) // true
arr.includes(+0) // true
複製代碼

在ES7以前想判斷數組中是否包含一個元素，有以下兩種方法,但都不如includes來得直觀：

• indexOf()

indexOf()方法返回在數組中能夠找到一個給定元素的第一個索引，若是不存在，則返回-1。

if (arr.indexOf(el) !== -1) {
  // ...
}
複製代碼

不過這種方法有兩個缺點，一是不夠語義化，要先找到參數值的第一個出現位置，因此要去比較是否不等於-1，表達起來不夠直觀。二是，它內部使用嚴格相等運算符（===）進行判斷，這會致使對NaN的誤判。

[NaN].indexOf(NaN)// -1
複製代碼

• find() 和 findIndex()

數組實例的find方法，用於找出第一個符合條件的數組成員。另外，這兩個方法均可以發現NaN，彌補了數組的indexOf方法的不足。

[1, 4, -5, 10].find((n) => n < 0) // -5
[1, 5, 10, 15].findIndex(function(value) {
  return value > 9;
}) // 2
[NaN].findIndex(y => Object.is(NaN, y)) // 0
複製代碼

Array.prototype.includes()的支持狀況：

2.求冪運算符**

在ES7中引入了指數運算符，具備與Math.pow()等效的計算結果

console.log(2**10);// 輸出1024
console.log(Math.pow(2, 10)) // 輸出1024
複製代碼

求冪運算符的支持狀況：

ES8新特性

1.Async/Await

咱們都知道使用Promise能很好地解決回調地獄的問題，但若是處理流程比較複雜的話，那麼整段代碼將充斥着then，語義化不明顯，代碼不能很好地表示執行流程，那有沒有比Promise更優雅的異步方式呢？

假若有這樣一個使用場景：須要先請求a連接，等返回信息以後，再請求b連接的另一個資源。下面代碼展現的是使用fetch來實現這樣的需求，fetch被定義在window對象中，它返回的是一個Promise對象

fetch('https://blog.csdn.net/')
  .then(response => {
    console.log(response)
    return fetch('https://juejin.im/')
  })
  .then(response => {
    console.log(response)
  })
  .catch(error => {
    console.log(error)
  })
複製代碼

雖然上述代碼能夠實現這個需求，但語義化不明顯，代碼不能很好地表示執行流程。基於這個緣由，ES8引入了async/await，這是JavaScript異步編程的一個重大改進，提供了在不阻塞主線程的狀況下使用同步代碼實現異步訪問資源的能力，而且使得代碼邏輯更加清晰。

async function foo () {
  try {
    let response1 = await fetch('https://blog.csdn.net/')
    console.log(response1)
    let response2 = await fetch('https://juejin.im/')
    console.log(response2)
  } catch (err) {
    console.error(err)
  }
}
foo()
複製代碼

經過上面代碼，你會發現整個異步處理的邏輯都是使用同步代碼的方式來實現的，並且還支持try catch來捕獲異常，這感受就在寫同步代碼，因此是很是符合人的線性思惟的。須要強調的是，await 不能夠脫離 async 單獨使用，await 後面必定是Promise 對象，若是不是會自動包裝成Promise對象。

根據MDN定義，async是一個經過異步執行並隱式返回Promise做爲結果的函數。

async function foo () {
  return '浪裏行舟'
}
foo().then(val => {
  console.log(val) // 浪裏行舟
})
複製代碼

上述代碼，咱們能夠看到調用async 聲明的foo 函數返回了一個Promise對象，等價於下面代碼：

async function foo () {
  return Promise.resolve('浪裏行舟')
}
foo().then(val => {
  console.log(val) // 浪裏行舟
})
複製代碼

Async/Await的支持狀況：

2.Object.values()，Object.entries()

ES5 引入了Object.keys方法，返回一個數組，成員是參數對象自身的（不含繼承的）全部可遍歷（enumerable）屬性的鍵名。ES8引入了跟Object.keys配套的Object.values和Object.entries，做爲遍歷一個對象的補充手段，供for...of循環使用。

Object.values方法返回一個數組，成員是參數對象自身的（不含繼承的）全部可遍歷（enumerable）屬性的鍵值。

const obj = { foo: 'bar', baz: 42 };
Object.values(obj) // ["bar", 42]
const obj = { 100: 'a', 2: 'b', 7: 'c' };
Object.values(obj) // ["b", "c", "a"]
複製代碼

須要注意的是，若是屬性名爲數值的屬性，是按照數值大小，從小到大遍歷的，所以返回的順序是b、c、a。

Object.entries()方法返回一個數組，成員是參數對象自身的（不含繼承的）全部可遍歷（enumerable）屬性的鍵值對數組。這個特性咱們後面介紹ES10的Object.fromEntries()還會再提到。

const obj = { foo: 'bar', baz: 42 };
Object.entries(obj) // [ ["foo", "bar"], ["baz", 42] ]
const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
Object.entries(obj); // [['1', 'yyy'], ['3', 'zzz'], ['10': 'xxx']]
複製代碼

Object.values()與Object.entries()兼容性一致，下面以Object.values()爲例：

3.String padding

在ES8中String 新增了兩個實例函數 String.prototype.padStart 和 String.prototype.padEnd，容許將空字符串或其餘字符串添加到原始字符串的開頭或結尾。咱們先看下使用語法：

String.padStart(targetLength,[padString])
複製代碼

• targetLength(必填):當前字符串須要填充到的目標長度。若是這個數值小於當前字符串的長度，則返回當前字符串自己。
• padString(可選):填充字符串。若是字符串太長，使填充後的字符串長度超過了目標長度，則只保留最左側的部分，其餘部分會被截斷，此參數的缺省值爲 " "。

'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'
複製代碼

有時候咱們處理日期、金額的時候常常要格式化，這個特性就派上用場：

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"
複製代碼

String padding的支持狀況：

4.Object.getOwnPropertyDescriptors()

ES5 的Object.getOwnPropertyDescriptor()方法會返回某個對象屬性的描述對象（descriptor）。ES8 引入了Object.getOwnPropertyDescriptors()方法，返回指定對象全部自身屬性（非繼承屬性）的描述對象。

const obj = {
  name: '浪裏行舟',
  get bar () {
    return 'abc'
  }
}
console.log(Object.getOwnPropertyDescriptors(obj))
複製代碼

獲得以下結果：

該方法的引入目的，主要是爲了解決Object.assign()沒法正確拷貝get屬性和set屬性的問題。咱們來看個例子：

const source = {
  set foo (value) {
    console.log(value)
  },
  get bar () {
    return '浪裏行舟'
  }
}
const target1 = {}
Object.assign(target1, source)
console.log(Object.getOwnPropertyDescriptor(target1, 'foo'))
複製代碼

返回以下結果：

上面代碼中，source對象的foo屬性的值是一個賦值函數，Object.assign方法將這個屬性拷貝給target1對象，結果該屬性的值變成了undefined。這是由於 Object.assign方法老是拷貝一個屬性的值，而不會拷貝它背後的賦值方法或取值方法。

這時，Object.getOwnPropertyDescriptors()方法配合Object.defineProperties()方法，就能夠實現正確拷貝。

const source = {
  set foo (value) {
    console.log(value)
  },
  get bar () {
    return '浪裏行舟'
  }
}
const target2 = {}
Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source))
console.log(Object.getOwnPropertyDescriptor(target2, 'foo'))
複製代碼

返回以下結果：

Object.getOwnPropertyDescriptors()的支持狀況：

ES9新特性

1.for await of

for of方法可以遍歷具備Symbol.iterator接口的同步迭代器數據，可是不能遍歷異步迭代器。 ES9新增的for await of能夠用來遍歷具備Symbol.asyncIterator方法的數據結構，也就是異步迭代器，且會等待前一個成員的狀態改變後纔會遍歷到下一個成員，至關於async函數內部的await。如今咱們有三個異步任務，想要實現依次輸出結果，該如何實現呢？

// for of遍歷
function Gen (time) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve(time)
    }, time)
  })
}
async function test () {
  let arr = [Gen(2000), Gen(100), Gen(3000)]
  for (let item of arr) {
    console.log(Date.now(), item.then(console.log))
  }
}
test()
複製代碼

獲得以下結果：

上述代碼證明了for of方法不能遍歷異步迭代器，獲得的結果並非咱們所期待的，因而for await of就粉墨登場啦！

function Gen (time) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve(time)
    }, time)
  })
}
async function test () {
  let arr = [Gen(2000), Gen(100), Gen(3000)]
  for await (let item of arr) {
    console.log(Date.now(), item)
  }
}
test()
// 1575536194608 2000
// 1575536194608 100
// 1575536195608 3000
複製代碼

使用for await of遍歷時，會等待前一個Promise對象的狀態改變後，再遍歷到下一個成員。

異步迭代器的支持狀況：

2.Object Rest Spread

ES6中添加的最意思的特性之一是spread操做符。你不只能夠用它替換cancat()和slice()方法，使數組的操做(複製、合併)更加簡單，還能夠在數組必須以拆解的方式做爲函數參數的狀況下，spread操做符也很實用。

const arr1 = [10, 20, 30];
const copy = [...arr1]; // 複製
console.log(copy);    // [10, 20, 30]
const arr2 = [40, 50];
const merge = [...arr1, ...arr2]; // 合併
console.log(merge);    // [10, 20, 30, 40, 50]
console.log(Math.max(...arr));    // 30 拆解
複製代碼

ES9經過向對象文本添加擴展屬性進一步擴展了這種語法。他能夠將一個對象的屬性拷貝到另外一個對象上，參考如下情形:

const input = {
  a: 1,
  b: 2,
  c: 1
}
const output = {
  ...input,
  c: 3
}
console.log(output) // {a: 1, b: 2, c: 3}
複製代碼

上面代碼能夠把 input 對象的數據都添加到 output 對象中，須要注意的是，若是存在相同的屬性名，只有最後一個會生效。

const input = {
  a: 1,
  b: 2
}
const output = {
  ...input,
  c: 3
}
input.a='浪裏行舟'
console.log(input,output) // {a: "浪裏行舟", b: 2} {a: 1, b: 2, c: 3}
複製代碼

上面例子中，修改input對象中的值，output並無改變，說明擴展運算符拷貝一個對象（相似這樣obj2 = {...obj1}），實現只是一個對象的淺拷貝。值得注意的是，若是屬性的值是一個對象的話，該對象的引用會被拷貝：

const obj = {x: {y: 10}};
const copy1 = {...obj};    
const copy2 = {...obj}; 
obj.x.y='浪裏行舟'
console.log(copy1,copy2) // x: {y: "浪裏行舟"} x: {y: "浪裏行舟"}
console.log(copy1.x === copy2.x);    // → true
複製代碼

copy1.x 和 copy2.x 指向同一個對象的引用，因此他們嚴格相等。

咱們再來看下 Object rest 的示例：

const input = {
  a: 1,
  b: 2,
  c: 3
}
let { a, ...rest } = input
console.log(a, rest) // 1 {b: 2, c: 3}
複製代碼

當對象 key-value 不肯定的時候，把必選的 key 賦值給變量，用一個變量收斂其餘可選的 key 數據，這在以前是作不到的。注意，rest屬性必須始終出如今對象的末尾，不然將拋出錯誤。

Rest與Spread兼容性一致，下列以spread爲例：

3.Promise.prototype.finally()

Promise.prototype.finally() 方法返回一個Promise，在promise執行結束時，不管結果是fulfilled或者是rejected，在執行then()和catch()後，都會執行finally指定的回調函數。

fetch('https://www.google.com')
  .then((response) => {
    console.log(response.status);
  })
  .catch((error) => { 
    console.log(error);
  })
  .finally(() => { 
    document.querySelector('#spinner').style.display = 'none';
  });
複製代碼

不管操做是否成功，當您須要在操做完成後進行一些清理時，finally()方法就派上用場了。這爲指定執行完promise後，不管結果是fulfilled仍是rejected都須要執行的代碼提供了一種方式，避免一樣的語句須要在then()和catch()中各寫一次的狀況。

Promise.prototype.finally()的支持狀況：

4.新的正則表達式特性

ES9爲正則表達式添加了四個新特性，進一步提升了JavaScript的字符串處理能力。這些特色以下:

• s (dotAll) 標誌
• 命名捕獲組
• Lookbehind 後行斷言
• Unicode屬性轉義

（1）s(dotAll)flag

正則表達式中，點（.）是一個特殊字符，表明任意的單個字符，可是有兩個例外。一個是四個字節的 UTF-16 字符，這個能夠用u修飾符解決；另外一個是行終止符,如換行符(\n)或回車符(\r),這個能夠經過ES9的s(dotAll)flag，在原正則表達式基礎上添加s表示:

console.log(/foo.bar/.test('foo\nbar')) // false
console.log(/foo.bar/s.test('foo\nbar')) // true
複製代碼

那如何判斷當前正則是否使用了 dotAll 模式呢？

const re = /foo.bar/s // Or, `const re = new RegExp('foo.bar', 's');`.
console.log(re.test('foo\nbar')) // true
console.log(re.dotAll) // true
console.log(re.flags) // 's'
複製代碼

（2）命名捕獲組

在一些正則表達式模式中，使用數字進行匹配可能會使人混淆。例如，使用正則表達式/(\d{4})-(\d{2})-(\d{2})/來匹配日期。由於美式英語中的日期表示法和英式英語中的日期表示法不一樣，因此很難區分哪一組表示日期，哪一組表示月份:

const re = /(\d{4})-(\d{2})-(\d{2})/;
const match= re.exec('2019-01-01');
console.log(match[0]);    // → 2019-01-01
console.log(match[1]);    // → 2019
console.log(match[2]);    // → 01
console.log(match[3]);    // → 01
複製代碼

ES9引入了命名捕獲組，容許爲每個組匹配指定一個名字，既便於閱讀代碼，又便於引用。

const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const match = re.exec('2019-01-01');
console.log(match.groups);          // → {year: "2019", month: "01", day: "01"}
console.log(match.groups.year);     // → 2019
console.log(match.groups.month);    // → 01
console.log(match.groups.day);      // → 01
複製代碼

上面代碼中，「命名捕獲組」在圓括號內部，模式的頭部添加「問號 + 尖括號 + 組名」（?），而後就能夠在exec方法返回結果的groups屬性上引用該組名。

命名捕獲組也可使用在replace()方法中，例如將日期轉換爲美國的 MM-DD-YYYY 格式：

const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/
const usDate = '2018-04-30'.replace(re, '$<month>-$<day>-$<year>')
console.log(usDate) // 04-30-2018
複製代碼

（3）Lookbehind 後行斷言

JavaScript 語言的正則表達式，只支持先行斷言，不支持後行斷言，先行斷言咱們能夠簡單理解爲"先遇到一個條件，再判斷後面是否知足"，以下面例子：

let test = 'hello world'
console.log(test.match(/hello(?=\sworld)/))
// ["hello", index: 0, input: "hello world", groups: undefined]
複製代碼

但有時咱們想判斷前面是 world 的 hello，這個代碼是實現不了的。在 ES9 就支持這個後行斷言了：

let test = 'world hello'
console.log(test.match(/(?<=world\s)hello/))
// ["hello", index: 6, input: "world hello", groups: undefined]
複製代碼

(?<…)是後行斷言的符號，(?..)是先行斷言的符號，而後結合 =(等於)、!(不等)、\1(捕獲匹配)。

（4）Unicode屬性轉義

ES2018 引入了一種新的類的寫法\p{...}和\P{...}，容許正則表達式匹配符合 Unicode 某種屬性的全部字符。好比你可使用\p{Number}來匹配全部的Unicode數字，例如，假設你想匹配的Unicode字符㉛字符串:

const str = '㉛';
console.log(/\d/u.test(str));    // → false
console.log(/\p{Number}/u.test(str));     // → true
複製代碼

一樣的，你可使用\p{Alphabetic}來匹配全部的Unicode單詞字符:

const str = 'ض';
console.log(/\p{Alphabetic}/u.test(str));     // → true
// the \w shorthand cannot match ض
console.log(/\w/u.test(str));    // → false
複製代碼

一樣有一個負向的Unicode屬性轉義模板 \P{...}

console.log(/\P{Number}/u.test('㉛'));    // → false
console.log(/\P{Number}/u.test('ض'));    // → true
console.log(/\P{Alphabetic}/u.test('㉛'));    // → true
console.log(/\P{Alphabetic}/u.test('ض'));    // → false
複製代碼

除了字母和數字以外，Unicode屬性轉義中還可使用其餘一些屬性。

以上這幾個特性的支持狀況

ES10新特性

1.Array.prototype.flat()

多維數組是一種常見的數據格式，特別是在進行數據檢索的時候。將多維數組打平是個常見的需求。一般咱們可以實現，可是不夠優雅。

flat() 方法會按照一個可指定的深度遞歸遍歷數組，並將全部元素與遍歷到的子數組中的元素合併爲一個新數組返回。

newArray = arr.flat(depth) // depth是指定要提取嵌套數組的結構深度，默認值爲 1	
複製代碼

接下來咱們看兩個例子：

const numbers1 = [1, 2, [3, 4, [5, 6]]]
console.log(numbers1.flat())// [1, 2, 3, 4, [5, 6]]
const numbers2 = [1, 2, [3, 4, [5, 6]]]
console.log(numbers2.flat(2))// [1, 2, 3, 4, 5, 6]
複製代碼

上面兩個例子說明flat 的參數沒有設置，取默認值 1，也就是說只扁平化第一級；當 flat 的參數大於等於 2，返回值就是 [1, 2, 3, 4, 5, 6] 了。

Array.prototype.flat的支持狀況：

2.Array.prototype.flatMap()

有了flat方法，那天然而然就有Array.prototype.flatMap方法，flatMap() 方法首先使用映射函數映射每一個元素，而後將結果壓縮成一個新數組。從方法的名字上也能夠看出來它包含兩部分功能一個是 map，一個是 flat（深度爲1）。

let arr = [1, 2, 3]
console.log(arr.map(item => [item * 2]).flat()) // [2, 4, 6]
console.log(arr.flatMap(item => [item * 2])) // [2, 4, 6]
複製代碼

實際上flatMap是綜合了map和flat的操做，因此它也只能打平一層。

Array.prototype.flatmap的支持狀況：

3.Object.fromEntries()

Object.fromEntries 這個新的API實現了與 Object.entries 相反的操做。這使得根據對象的 entries 很容易獲得 object。

const object = { x: 23, y:24 };
const entries = Object.entries(object); // [['x', 23], ['y', 24]]
const result = Object.fromEntries(entries); // { x: 23, y: 24 }
複製代碼

ES2017引入了Object.entries, 這個方法能夠將對象轉換爲數組,這樣對象就可使用數組原型中的衆多內置方法，好比map, filter、reduce，舉個例子，咱們想提取下列對象obj中全部value大於21的鍵值對，如何操做呢？

// ES10以前
const obj = {
  a: 21,
  b: 22,
  c: 23
}
console.log(Object.entries(obj)) // [['a',21],["b", 22],["c", 23]]
let arr = Object.entries(obj).filter(([a, b]) => b > 21) // [["b", 22],["c", 23]]
let obj1 = {}
for (let [name, age] of arr) {
  obj1[name] = age
}
console.log(obj1) // {b: 22, c: 23}
複製代碼

上例中獲得了數組arr，想再次轉化爲對象，就須要手動寫一些代碼來處理，可是有了Object.fromEntries()就很容易實現

// 用Object.fromEntries()來實現
const obj = {
  a: 21,
  b: 22,
  c: 23
}
let res = Object.fromEntries(Object.entries(obj).filter(([a, b]) => b > 21))
console.log(111, res) // {b: 22, c: 23}
複製代碼

Object.fromEntries()的支持狀況：

4.String.trimStart 和 String.trimEnd

移除開頭和結尾的空格，以前咱們用正則表達式來實現，如今ES10新增了兩個新特性，讓這變得更簡單！

trimStart() 方法從字符串的開頭刪除空格，trimLeft()是此方法的別名。

let str = ' 前端工匠 '
console.log(str.length) // 6
str = str.trimStart()
console.log(str.length) // 5
let str1 = str.trim() // 清除先後的空格
console.log(str1.length) // 4
str.replace(/^\s+/g, '') // 也能夠用正則實現開頭刪除空格
複製代碼

trimEnd() 方法從一個字符串的右端移除空白字符，trimRight 是 trimEnd 的別名。

let str = ' 浪裏行舟 '
console.log(str.length) // 6
str = str.trimEnd()
console.log(str.length) // 5
let str1 = str.trim() //清除先後的空格
console.log(str1.length) // 4
str.replace(/\s+$/g, '') // 也能夠用正則實現右端移除空白字符
複製代碼

String.trimStart和String.trimEnd 二者兼容性一致，下圖以trimStart爲例：

5.String.prototype.matchAll

若是一個正則表達式在字符串裏面有多個匹配，如今通常使用g修飾符或y修飾符，在循環裏面逐一取出。

function collectGroup1 (regExp, str) {
  const matches = []
  while (true) {
    const match = regExp.exec(str)
    if (match === null) break
    matches.push(match[1])
  }
  return matches
}
console.log(collectGroup1(/"([^"]*)"/g, `"foo" and "bar" and "baz"`)) // [ 'foo', 'bar', 'baz' ] 複製代碼

值得注意的是，若是沒有修飾符 /g, .exec() 只返回第一個匹配。如今經過ES9的String.prototype.matchAll方法，能夠一次性取出全部匹配。

function collectGroup1 (regExp, str) {
  let results = []
  for (const match of str.matchAll(regExp)) {
    results.push(match[1])
  }
  return results
}
console.log(collectGroup1(/"([^"]*)"/g, `"foo" and "bar" and "baz"`)) // ["foo", "bar", "baz"] 複製代碼

上面代碼中，因爲string.matchAll(regex)返回的是遍歷器，因此能夠用for...of循環取出。

String.prototype.matchAll的支持狀況：

6.try…catch

在ES10中，try-catch語句中的參數變爲了一個可選項。之前咱們寫catch語句時，必須傳遞一個異常參數。這就意味着，即使咱們在catch裏面根本不須要用到這個異常參數也必須將其傳遞進去

// ES10以前
try {
  // tryCode
} catch (err) {
  // catchCode
}
複製代碼

這裏 err 是必須的參數，在 ES10 能夠省略這個參數：

// ES10
try {
  console.log('Foobar')
} catch {
  console.error('Bar')
}
複製代碼

try…catch的支持狀況：

7.BigInt

JavaScript 全部數字都保存成 64 位浮點數，這給數值的表示帶來了兩大限制。一是數值的精度只能到 53 個二進制位（至關於 16 個十進制位），大於這個範圍的整數，JavaScript 是沒法精確表示的，這使得 JavaScript 不適合進行科學和金融方面的精確計算。二是大於或等於2的1024次方的數值，JavaScript 沒法表示，會返回Infinity。

// 超過 53 個二進制位的數值，沒法保持精度
Math.pow(2, 53) === Math.pow(2, 53) + 1 // true
// 超過 2 的 1024 次方的數值，沒法表示
Math.pow(2, 1024) // Infinity
複製代碼

如今ES10引入了一種新的數據類型 BigInt（大整數），來解決這個問題。BigInt 只用來表示整數，沒有位數的限制，任何位數的整數均可以精確表示。

建立 BigInt 類型的值也很是簡單，只須要在數字後面加上 n 便可。例如，123 變爲 123n。也可使用全局方法 BigInt(value) 轉化，入參 value 爲數字或數字字符串。

const aNumber = 111;
const aBigInt = BigInt(aNumber);
aBigInt === 111n // true
typeof aBigInt === 'bigint' // true
typeof 111 // "number"
typeof 111n // "bigint"
複製代碼

若是算上 BigInt，JavaScript 中原始類型就從 6 個變爲了 7 個。

• Boolean
• Null
• Undefined
• Number
• String
• Symbol (new in ECMAScript 2015)
• BigInt (new in ECMAScript 2019)

BigInt的支持狀況：

8.Symbol.prototype.description

咱們知道，Symbol 的描述只被存儲在內部的 [[Description]]，沒有直接對外暴露，咱們只有調用 Symbol 的 toString() 時才能夠讀取這個屬性：

Symbol('desc').description;  // "desc"
Symbol('').description;      // ""
Symbol().description;        // undefined
複製代碼

Symbol.prototype.description的支持狀況：

9.Function.prototype.toString()

ES2019中，Function.toString()發生了變化。以前執行這個方法時，獲得的字符串是去空白符號的。而如今，獲得的字符串呈現出本來源碼的樣子：

function sum(a, b) {
  return a + b;
}
console.log(sum.toString());
// function sum(a, b) {
//  return a + b;
// }
複製代碼

Function.prototype.toString()的支持狀況：

歡迎關注公衆號：前端工匠，你的成長咱們一塊兒見證！給你們推薦一個好用的BUG監控工具Fundebug，歡迎免費試用！

參考資料

• 珠峯架構課(推薦)
• 再學JavaScript ES（6-10）全版本語法大全
• ECMAScript 6 入門
• MDN文檔
• ES2019新特性你知道哪些？
• ES2018新特性——每一個JS開發者都須要瞭解
• 細解JavaScript ES7 ES8 ES9 新特性