ES10功能完整指南

ES10仍然只是一个草案。但是大多数功能已经在Chrome中实现，除了Object.fromEntries，那么为什么不尽早开始探索呢？当所有浏览器开始支持它时，你将领先于曲线。这只是时间问题。对于有兴趣探索ES10的人来说，这是一份非外星人指南。

在gitHub上查看我更多的贡献。您的支持是我最大的动力

简述Es10

ES10在新语言功能方面没有ES6那么重要，但它确实添加了一些有趣的东西（其中一些在目前的浏览器中还不起作用）在ES6中，箭头功能是最受欢迎的新功能。ES10会是什么？Es10有那些新功能呢？

Es10新增方法

BigInt - 任意精度整数

BigInt是第7种原始类型。BigInt是一个任意精度的整数。这意味着变量现在可以代表2⁵ 3个数字。而且最大限度是9007199254740992。

1
const b = 1n; //来创建一个BigInt

过去在浏览器中大于9007199254740992不支持的整数值。如果超出，则该值将锁定为MAX_SAFE_INTEGER + 1：

1
2
3
4
const integer = BigInt(9007199254740991); // 初始化一个数字
//integer =  9007199254740991n
const integer = BigInt("9007199254740991"); // 初始化一个字符串
//integer =  9007199254740991n

注：BigInt 不是一个构造函数不能与new一起使用

image
image

类型

1
2
typeof 10; //'number'
typeof 10n; //'bigint'

可以在两种类型之间使用等式运算符：

1
2
10n === BigInt(10); //  true
10n == 10; // true

数学运算符只能在自己的类型中使用：

1
2
3
4
5
200n / 10n
⇨ 20n
200n / 20
⇨ Uncaught TypeError:
   Cannot mix BigInt and other types, use explicit conversions <

BigInt 类型可以与‘-’一起使用但是不能与‘+’一起使用

1
2
3
4
5
-100n
⇨ -100n
+100n
⇨ Uncaught TypeError:
  Cannot convert a BigInt value to a ====number====

string.prototype.matchAll()

该方法返回一个包含所有匹配正则表达式及分组捕获结果的迭代器。

  • 参数 ：正则表达式
  • 返回值：一个迭代器

在 matchAll 出现之前，通过在循环中调用regexp.exec来获取所有匹配项信息

1
2
3
4
5
6
7
8
const regexp = RegExp('foo*','g');
const str = 'table football, foosball';

while ((matches = regexp.exec(str)) !== null) {
  console.log(`Found ${matches[0]}. Next starts at ${regexp.lastIndex}.`);
  // expected output: "Found foo. Next starts at 9."
  // expected output: "Found foo. Next starts at 19."
}

如果使用matchAll，就可以不必使用while循环加exec方式（且正则表达式需使用／g标志）。使用matchAll 会得到一个迭代器的返回值，配合 for…of, array spread, or Array.from() 可以更方便实现功能：

1
2
3
4
5
6
7
8
9
10
11
12
const str = 'table football, foosball';
let matches = str.matchAll(regexp);

for (const match of matches) {
  console.log(match);
}
// Array [ "foo" ]
// Array [ "foo" ]

matches = str.matchAll(regexp);
Array.from(matches, m => m[0]);
// Array [ "foo", "foo" ]

matchAll 的另外一个亮点是更好地获取分组捕获。因为当使用match()和/g标志方式获取匹配信息时，分组捕获会被忽略：

1
2
3
4
5
var regexp = /t(e)(st(\d?))/g;
var str = 'test1test2';

str.match(regexp); 
// Array ['test1', 'test2']

使用 matchAll 可以通过如下方式获取分组捕获:

1
2
3
4
5
6
7

let array = [...str.matchAll(regexp)];

array[0];
// ['test1', 'e', 'st1', '1', index: 0, input: 'test1test2', length: 4]
array[1];
// ['test2', 'e', 'st2', '2', index: 5, input: 'test1test2', length: 4]

也许在美学上它与循环实现时的原始regex.exec非常相似。但如前所述，由于上述许多原因，这是更好的方法。并且删除/ g不会导致无限循环。

动态导入

现在可以将导入分配给变量：

1
2
3
4
element.addEventListener('click', async () => {
    const module = await import(`./api-scripts/button-click.js`);
    module.clickEvent();
});

Array.prototype.flat（）

扁平化多维数组：

1
2
3
4
5
let multi = [1,2,3,[4,5,6,[7,8,9,[10,11,12]]]];
multi.flat();               // [1,2,3,4,5,6,Array(4)]
multi.flat().flat();        // [1,2,3,4,5,6,7,8,9,Array(3)]
multi.flat().flat().flat(); // [1,2,3,4,5,6,7,8,9,10,11,12]
multi.flat(Infinity);       // [1,2,3,4,5,6,7,8,9,10,11,12]

Array.prototype.flatMap()

该方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。

1
2
3
4
5
6
7
8
9
10
11
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]]

为了更好展示flatMap的效果我们来看一下这个例子

1
2
3
4
5
6
7
let arr = ["今天天气不错", "", "早上好"]

arr.map(s => s.split(""))
// [["今", "天", "天", "气", "不", "错"],[""],["早", "上", "好"]]

arr.flatMap(s => s.split(''));
// ["今", "天", "天", "气", "不", "错", "", "早", "上", "好"]

Object.fromEntries()

该方法方法将键值对列表转换为对象。该Object.fromEntries()方法获取键值对列表并返回一个新对象，其属性由这些条目给出。该迭代参数预计将实现的一个对象@@iterator的方法，即返回一个迭代器对象中，产生一个两个元件阵列状物体，其第一个元件是一个将被用作属性键，其第二元件是一个值，并与该属性键关联的值。

1
2
3
4
5
6
7
8
const entries = new Map([
  ['foo', 'bar'],
  ['baz', 42]
]);

const obj = Object.fromEntries(entries);
console.log(obj);
// { foo: "bar", baz: 42 }

使用Object.fromEntries其反向方法Object.entries()和数组操作方法，您可以转换如下对象：

1
2
3
4
5
6
7
8
9
const object1 = { a: 1, b: 2, c: 3 };

const object2 = Object.fromEntries(
  Object.entries(object1)
  .map(([ key, val ]) => [ key, val * 2 ])
);

console.log(object2);
// { a: 2, b: 4, c: 6 }

String.trimStart() & String.trimEnd()

这两个方法是用来去除字符串首位空格的

1
2
3
let greeting = "     Space around     ";
greeting.trimEnd();   // "     Space around";
greeting.trimStart(); // "Space around     ";