目录

  • 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]]// 带参数，深度为2console.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())// orconsole.log(str.trimLeft())// 去掉字符串前面的空格console.log(str.trimEnd())// orconsole.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是绝对的，并且须要遵循固定的格局。

// 数组转对象 —— entriesconst obj = {'foo':'a','bar':'b'}console.log(Object.entries(obj))//[["foo", "a"],["bar", "b"]]// 数组转对象 —— fromEntriesconst 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)') // falseconsole.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 axuebinconsole.log(name.description === 'My name is axuebin') // My name is axuebin

BigInt

新增的第七种根本数据类型，用来解决超过2的53次方以外的数

console.log(11n);// 11nconst a = 11nconsole.log(typeof a)// bigint 是数字，能够进行运算console.log(typeof 11)// number
PS: 七种根本数据类型:

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

ES6-ES10学习幅员