ES10 —— stringify,flat,trimStart,matchAll,fromEntries,BigInt...

目錄

• JSON

  • stringify

• Array

  • flat
  • flatMap

• String

  • trimStart(trimLeft) / trimEnd(trimRight)

  • matchAll

    • ES5

      • 方法一： RegExp.prototype.exec() with /g
      • 方法二：String.prototype.match() with /g
      • 方法三：String.prototype.replace()
    • ES10的matchAll

• Object

  • fromEntries

    • 例子一
    • 例子二
• try.catch

• Symbol

  • Symbol.prototype.description
• BigInt
• ES6-ES10學習版圖

由於ES10是對總體原型對象的加強和對語法進行了些修正，沒有一塊新的內容，是對原來的內容進行升級，細微的東西比較多，因此就寫在一塊兒了...

JSON

stringify

JSON.stringify 在 ES10 修復了對於一些超出範圍的 Unicode 展現錯誤的問題。由於 JSON 都是被編碼成 UTF-8，因此遇到 0xD800–0xDFFF 以內的字符會由於沒法編碼成 UTF-8 進而致使顯示錯誤。

升級以後：在 ES10 它會用轉義字符的方式來處理這部分字符而非編碼的方式，這樣就會正常顯示了。

console.log(JSON.stringify('\u{D800}'))
//"\ud800"
JSON.stringify('\u{D800}') === '"\\ud800"' // true

Array

flat

• 將數組扁平化輸出（降維處理）
• 做用：會按照一個可指定的深度遞歸遍歷數組，並將全部的元素與遍歷到的子數組合併成一個新數組返回
• 默認是一次，若是要遞歸深度要提高，那麼要在flat裏面傳參數 arr.flat(depth)

let arr = [1, [2, 3], [4, 5, [6, 7]]]
console.log(arr.flat())
// [1, 2, 3, 4, 5, [6, 7]]

// 帶參數，深度爲2
console.log(arr.flat(2))
// [1, 2, 3, 4, 5, 6, 7]

flatMap

首先什麼是map？

let array = [1, 2, 3]
console.log(array.map(item => item * 2))
// [2, 4, 6]

flatMap至關於map+flat，若是須要先對這個數組進行map再進行flat操做，就能夠直接使用flatMap

console.log(array.flatMap(item => [item * 2]))
// [2, 4, 6]
// 等價於下面

console.log(array.map(item => [item * 2]))
// [[2], [4], [6]]
console.log(array.map(item => [item * 2]).flat())
// [2, 4, 6]

MDN上面有一個例子來講明二者的不一樣

let arr = ['今每天氣不錯', '', '早上好']
arr.map(s => s.split(''))
// [["今", "天", "天", "氣", "不", "錯"],[""],["早", "上", "好"]]
arr.flatMap(s => s.split(''))
// ["今", "天", "天", "氣", "不", "錯", "", "早", "上", "好"]

String

trimStart(trimLeft) / trimEnd(trimRight)

trim是字符串去空格方法，這裏是控制從左邊去空格仍是右邊去空格。

let str = '   foo   '

ES5

// 首尾的空格都去掉
console.log(str.trim())
// 前面的空格進行去掉
console.log(str.replace(/^\s+/g, ''))
// 前面和後面的空格都去掉
console.log(str.replace(/^\s+|\s+$/g, ''))

ES10

// 去掉字符串前面的空格
console.log(str.trimStart())
// or
console.log(str.trimLeft())

// 去掉字符串後面的空格
console.log(str.trimEnd())
// or
console.log(str.trimRight())

matchAll

let str = `"foo" and "bar" and "baz"`

如何把foo,bar,baz提取出來？

ES5

方法一： RegExp.prototype.exec() with /g

• 由於match方法只能匹配一個，因此要用一個while循環
• 必需要進行全局匹配，否則每次都是從頭開始匹配

function select(regExp, str) {
  const matches = []
  // 由於match方法只能匹配一個，因此要用一個while循環
  while(true){
    const match = regExp.exec(str)
    if(match === null) break
    // 將捕獲的第一個輸入進數組
    matches.push(match[1])
  }
  return matches
}

// 必需要進行全局匹配，否則每次都是從頭開始匹配
// 小括號是捕獲，只要不是雙引號，就捕獲進來
console.log(select(/"([^"]*)"/g, str))
// ["foo", "bar", "baz"]

這樣寫比較繁瑣，還有沒有別的方法？

方法二：String.prototype.match() with /g

console.log(str.match(/"([^"]*)"/g))
// [""foo"", ""bar"", ""baz""]

上面的方法會把全部的捕獲都扔掉，只取完整的匹配，因此每一個都多了雙引號

方法三：String.prototype.replace()

function select (regExp, str) {
  const matches = []
  // replace的高級用法，第二個參數能夠傳一個函數
  str.replace(regExp, function (all, first) {
    matches.push(first)
  })
  return matches
}

console.log(select(/"([^"]*)"/g, str))
// ["foo", "bar", "baz"]

ES10的matchAll

let str = `"foo" and "bar" and "baz"`

function select(regExp, str) {
  const matches = []
  // matchAll返回的是可遍歷的全部匹配結果 RegExpStringIterator{}
  // 咱們對全部的結果作遍歷
  for (const match of str.matchAll(regExp)) {
    matches.push(match[1])
  }
  return matches
}

console.log(select(/"([^"]*)"/g, str))
// ["foo", "bar", "baz"]

Object

fromEntries

對象和數組怎麼互相轉換？

• 對象轉數組 —— entries
• 數組轉對象 —— fromEntries

fromEntries和entries是相對的，而且須要遵循固定的格式。

// 數組轉對象 —— entries
const obj = {'foo':'a','bar':'b'}
console.log(Object.entries(obj))
//[["foo", "a"],["bar", "b"]]

// 數組轉對象 —— fromEntries
const array = ['foo','bar','baz']
console.log(Object.fromEntries(array)) // 這樣會報錯必須是固定格式

// 正確寫法：
const array = [["foo", "a"],["bar", "b"]]
console.log(Object.fromEntries(array))
// {foo: "a", bar: "b"}

例子一

若是要訪問[['foo', 1], ['bar', 2]]數組中bar的值怎麼辦？

ES5

const arr = [['foo', 1], ['bar', 2]]
console.log(arr[1][1])
// 2

ES10

const arr = [['foo', 1], ['bar', 2]]
const obj = Object.fromEntries(arr)
console.log(obj)
// {foo: 1, bar: 2}
console.log(obj.bar)
// 2

例子二

下面對象把鍵的字符串長度爲3的內容保留下來，其餘刪除，怎麼作？

const obj = {
  abc: 1,
  def: 2,
  ghdsk: 3
}
// 而後將數組再轉化成對象
let res = Object.fromEntries(
  // entries先把object對象變成數組，而後對數組進行過濾
  Object.entries(obj).filter(([key,val]) => key.length === 3)
)

console.log(res)
// {abc: 1, def: 2}

try.catch

以前catch後面必需要有e異常變量這個參數，有時候並無必要

try {
...
} catch (e) {
    ...
}

ES10以後括號能夠刪掉

try {
 ...
} catch {
  ...
}

Symbol

Symbol.prototype.description

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

const name = Symbol('My name is axuebin')
console.log(name.toString()) // Symbol(My name is axuebin)
console.log(name) // Symbol(My name is axuebin)
console.log(name === 'Symbol(My name is axuebin)') // false
console.log(name.toString() === 'Symbol(My name is axuebin)') // true

如今能夠經過 description 方法獲取 Symbol 的描述:

const name = Symbol('My name is axuebin')
console.log(name.description) // My name is axuebin
console.log(name.description === 'My name is axuebin') // My name is axuebin

BigInt

新增的第七種基本數據類型，用來處理超過2的53次方之外的數

console.log(11n);
// 11n
const a = 11n
console.log(typeof a)
// bigint 是數字，能夠進行運算
console.log(typeof 11)
// number

PS: 七種基本數據類型:

String、Number、Boolean、Null、Undefined、Symbol、BigInt

ES6-ES10學習版圖