1. 程式人生 > 實用技巧 >盤點ES7、ES8、ES9、ES10新特性

盤點ES7、ES8、ES9、ES10新特性

前言

從 ECMAScript 2016(ES7)開始,版本釋出變得更加頻繁,每年釋出一個新版本,好在每次版本的更新內容並不多,本文會細說這些新特性,儘可能和舊知識相關聯,幫你迅速上手這些特性。

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);// 輸出1024zhicc
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()的支援情況: