持续学习之es10特性概述

这是我参与11月更文挑战的第22天，活动详情查看：2021最后一次更文挑战

es10特性概述

新增了Array的flat()方法和flatMap()方法
新增了String的trimStart()方法和trimEnd()方法
Object.fromEntries()
Symbol.prototype.description
String.prototype.matchAll
Function.prototype.toString()现在返回精确字符，包括空格和注释
JSON⊂ECMAScript
简化try {} catch {},修改 catch 绑定
新的基本数据类型BigInt
globalThis
import()
Legacy RegEx
私有的实例方法和访问器

新增了Array的`flat()`方法和`flatMap()`方法

flat()和flatMap()本质上就是是归纳（reduce）与合并（concat）的操作。
flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

flat()方法最基本的作用就是数组降维
其次，还可以利用flat()方法的特性来去除数组的空项

flat()

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]
 
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
 
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
 
//使用 Infinity 作为深度，展开任意深度的嵌套数组
arr3.flat(Infinity); 
// [1, 2, 3, 4, 5, 6]
 
 
//去除空项
var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]
复制代码

flatMap()

var arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]); 
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// 只会将 flatMap 中的函数返回的数组 “压平” 一层
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]
复制代码

新增了String的`trimStart()`方法和`trimEnd()`方法

String.trimStart() 可用于从字符串的开头去掉空白。String.trimEnd() 可用于从字符串的尾部去掉空白。

let  greeting =  "    Hello World";
console.log(greeting.trimStart());// "Hello World"

let greeting = "Hello World    ";
console.log(greeting.trimEnd());// "Hello World"
复制代码

`Object.fromEntries()`

Object.entries()方法的作用是返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for...in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环也枚举原型链中的属性）。

而Object.fromEntries() 则是 Object.entries() 的反转。

Object.fromEntries() 函数传入一个键值对的列表，并返回一个带有这些键值对的新对象。这个迭代参数应该是一个能够实现@iterator方法的的对象，返回一个迭代器对象。它生成一个具有两个元素的类似数组的对象，第一个元素是将用作属性键的值，第二个元素是与该属性键关联的值。

通过 Object.fromEntries，可以将 Map 转化为 Object:

const map = new Map([ ['foo', 'bar'], ['baz', 42] ]);
const obj = Object.fromEntries(map);
console.log(obj); // { foo: "bar", baz: 42 }
复制代码

通过 Object.fromEntries，可以将 Array 转化为 Object:

const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ];
const obj = Object.fromEntries(arr);
console.log(obj); // { 0: "a", 1: "b", 2: "c" }
复制代码

Symbol.prototype.description

只读描述属性，是一个返回Symbol对象的可选描述的字符串。

let mySymbol = `My Symbol`;

let symObj = Symbol(mySymbol);

console.log(symObj) // Symbol(mySymbol);

console.log(String(symObj) === `Symbol(${mySymbol})`); // true

console.log(symObj.description); // "My Symbol"
复制代码

String.protype.matchAll()

matchAll() 方法返回所有与正则表达式匹配字符串的结果的迭代器，包括捕获组。

const string = '十六进制数字:DEADBEEF CAFE'
const regex = '\b\p{ASCII_Hex_digit}+\b/gu'

for(const match of string.match(regex)) {
  console.log(Math)
}
/*
  输出
  DEADBEEF
  CAFE
*/
// 2.string.matchAll 给出每个匹配更加详细的信息
const string = '十六进制数字:DEADBEEF CAFE'
const regex = '\b\p{ASCII_Hex_digit}+\b/gu'

for(const match of string.matchAll(regex)) {
  console.log(Math)
}
/*
 输出
 ["DEADBEEF", index: 8, input: "十六进制数字:DEADBEEF CAFE", groups: undefind]
 ["CAFE", index: 17, input: "十六进制数字:DEADBEEF CAFE", groups: undefind] 
*/
复制代码

Function.prototype.toString()现在返回精确字符，包括空格和注释

toString() 方法返回一个表示函数源代码的字符串。在ES6中，当在函数上调用toString时，它将根据ECMAScript引擎返回该函数的字符串表示形式。如果可能，它将返回源代码，否则-一个标准化的占位符。

this.fruits = []
function buyFruits(fruit) {
  this.fruits = [...this.fruits, fruit]
}
console.log(buyFruits.toString())

/*
function buyFruits(fruit) {
  this.fruits = [...this.fruits, fruit]
}
*/
复制代码

JSON⊂ECMAScript

在ES10之前的版本中，不接受非转义的行分隔符U+2028和段落分隔符U+2029。

U+2028是段落分隔符。
U+2029是行分隔符。

扫描二维码关注公众号，回复： 13306845 查看本文章

let LS = ""
const PS = eval("'\u2029'")
复制代码

简化try {} catch {},修改 catch 绑定

可选的 catch binding 允许开发人员在catch块中，不使用error参数的情况下使用try/catch。

// ES2019 之前使用
try {
  // some code
}catch (err) {
  // error handling code
}

// 现在使用ES2019这样的try / catch：
try  {
  // some code
}catch {
  // error handling code
}
复制代码

新的基本数据类型BigInt

BigInt是第7个原始类型，它是一个任意精度的整数。而不仅仅是在9007199254740992处的最大值。