20多个小事例带你重温ES10新特性(小结)
ES10 虽然没有像 ES6 那么多新特性，但 ES10 仍然有一些有用的特性。文本通过简单示例来介绍了 ES10 新出来的特性。通过这种方式，咱们就可以快速理解，而不需要看太多的官方解释。
ES10 新特性主要如下：
- 数组方法：flat和flatMap
- Object.fromEntries
- 字符串方法：trimStart 和 trimEnd
- Symbol 的 description 属性
- try { } catch {} // catch 的参数可以省略了
- JSON "color: #ff0000">1. Array.flat() && Array.flatMap
Array.flat()方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。Array.flatMap()方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与map和 深度值1的flat几乎相同，但flatMap通常在合并成一种方法的效率稍微高一些。事例一：
Array.flat()
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.flatMap()
let array = [1, 2, 3, 4, 5]; array.map(x => [x, x * 2]);
array现在的结果：[Array(2), Array(2), Array(2)] 0: (2)[1, 2] 1: (2)[2, 4] 2: (2)[3, 6]
使用
flatMap方式：array.flatMap(v => [v, v * 2]); [1, 2, 2, 4, 3, 6, 4, 8, 5, 10]
综合示例：
2.Object.fromEntries()
Object.fromEntries()方法把键值对列表转换为一个对象。事例一：
let obj = { apple : 10, orange : 20, banana : 30 }; let entries = Object.entries(obj); entries; (3) [Array(2), Array(2), Array(2)] 0: (2) ["apple", 10] 1: (2) ["orange", 20] 2: (2) ["banana", 30] let fromEntries = Object.fromEntries(entries); { apple: 10, orange: 20, banana: 30 }事例二：
3.String.protype.matchAll
早期的一个问题是，如何编写正则表达式
“match all”？最佳的答案将建议
String.match与正则表达式和/g一起使用或者带有/g的RegExp.exec或者带有/g的RegExp.test。咱们先看看旧规范是如何工作的。
带字符串参数的
String.match仅返回第一个匹配：let string = 'Hello'; let matches = string.match('l'); console.log(matches[0]); // "l"结果是单个
"l"（注意：匹配存储在matches[0]中而不是matches）将
string.match与regex参数一起使用也是如此：使用正则表达式
/l/找到字符 串“hello”中的“l”字符：let string = "Hello"; let matches = string.match(/l/); console.log(matches[0]); // "l"
添加 /g 混合
let string = "Hello"; let ret = string.match(/l/g); // (2) [“l”, “l”];
那么为什么要使用全新的
matchAll方法呢"text-align: center">
这里创建了
match.groups.color和match.groups.bird：const string = 'black*raven lime*parrot white*seagull'; const regex = /("htmlcode">// Match all occurrences of the letters: "e" or "l" let iterator = "hello".matchAll(/[el]/); for (const match of iterator) console.log(match);
这一次你可以跳过
/g，.matchall方法不需要它，结果如下:[ 'e', index: 1, input: 'hello' ] // Iteration 1 [ 'l', index: 2, input: 'hello' ] // Iteration 2 [ 'l', index: 3, input: 'hello' ] // Iteration 3
使用 .matchAll() 捕获组示例：
const string = 'black*raven lime*parrot white*seagull'; const regex = /("htmlcode">black*raven at 0 with 'black*raven lime*parrot white*seagull' black raven lime*parrot at 11 with 'black*raven lime*parrot white*seagull' lime parrot white*seagull at 23 with 'black*raven lime*parrot white*seagull' white seagull
也许在美学上它与原始正则表达式非常相似，执行
while循环实现。但是如前所述，由于上面提到的许多原因，这是更好的方法，移除/g不会导致无限循环。综合事例：
4.String.trimStart() 与 String.trimEnd()
trimStart()：删除字符串的开头空格。trimEnd()：删除字符串末尾的空格。事例一：
let greeting = " Space around "; greeting.trimEnd(); // " Space around"; greeting.trimStart(); // "Space around ";
事例二：
5.Symbol.Description
description是一个只读属性，它会返回Symbol对象的可选描述的字符串。事例一：
let mySymbol = 'My Symbol'; let symObj = Symbol(mySymbol); symObj; // Symbol(My Symbol) symObj.description; // "My Symbol"
事例二：
6.catch 的参数可以省略
在过去，
try/catch语句中的catch语句需要一个变量。try/catch语句帮助捕获终端级别的错误:try { // Call a non-existing function undefined_Function undefined_Function("I'm trying"); } catch(error) { // Display the error if statements inside try above fail console.log( error ); // undefined_Function is undefined }在某些情况下，所需的错误变量是未使用的:
try { JSON.parse(text); // <--- this will fail with "text not defined" return true; <--- exit without error even if there is one } catch (redundant_sometmes) <--- this makes error variable redundant { return false; }在 ES10 中，捕获错误的变量是可选的，现在可以跳过错误变量:
事例一：
try { JSON.parse(text); return true; } catch { return false; }事例二：
7. JSON "_blank" href="https://tc39.es/ecma262/#sec-json.parse" rel="external nofollow" >JSON.parse 部分阐明 JSON 确为其一个子集，但由于 JSON 内容可以正常包含
U+2028行分隔符与U+2029段落分隔符而 ECMAScript 却不行。该草案旨在解决这一问题。在这之前，如果你使用
JSON.parse()执行带如上特殊字符的字符串时，只会收到SyntaxError的错误提示。该草案同样是向后兼容的，其对用户唯一的影响是保持原样，即在暂不支持特殊字符解析的运行环境中保持SyntaxError的报错。
8.格式良好的 JSON.stringify()
此更新修复了字符
U+D800到U+DFFF的处理，有时可以进入 JSON 字符串。 这可能是一个问题，因为JSON.stringify可能会将这些数字格式化为没有等效UTF-8字符的值, 但 JSON 格式需要 UTF-8 编码。解析方法使用格式良好的JSON字符串，如:
'{ “prop1” : 1, "prop2" : 2 }'; // A well-formed JSON format string注意，要创建正确 JSON 格式的字符串，绝对需要在属性名周围加上双引号。缺少或任何其他类型的引号都不会生成格式良好的JSON。
'{ “prop1” : 1, "meth" : () => {}}'; // Not JSON format stringJSON 字符串格式与 Object Literal 不同，后者看起来几乎一样，但可以使用任何类型的引号括住属性名，也可以包含方法(JSON格式不允许使用方法):
let object_literal = { property: 1, meth: () => {} };不管怎样，一切似乎都很好。第一个示例看起来是兼容的。但它们也是简单的例子，大多数情况下都能顺利地工作!
U+2028 和 U+2029 字符
问题是， ES10 之前的 EcmaScript 实际上并不完全支持 JSON 格式。前 ES10 时代不接受未转义行分隔符
U+2028和段落分隔符U+2029字符:
对于 U+D800 - U+DFFF 之间的所有字符也是如此
如果这些字符潜入 JSON 格式的字符串(假设来自数据库记录)，你可能会花费数小时试图弄清楚为什么程序的其余部分会产生解析错误。
因此，如果你传递
eval这样的字符串“console.log(' hello ')”，它将执行 JS语句 (通过尝试将字符串转换为实际代码),也类似于JSON.parse将处理你的 JSON 字符串的方式。ES10建议的解决方案是将未配对的代理代码点表示为JSON转义序列，而不是将它们作为单个
UTF-16代码单元返回。
9.稳定的 Array.prototype.sort()
V8 之前的实现对包含10个以上项的数组使用了一种不稳定的快速排序算法。
一个稳定的排序算法是当两个键值相等的对象在排序后的输出中出现的顺序与在未排序的输入中出现的顺序相同时。
但情况不再是这样了，ES10 提供了一个稳定的数组排序:
var fruit = [ { name: "Apple", count: 13, }, { name: "Pear", count: 12, }, { name: "Banana", count: 12, }, { name: "Strawberry", count: 11, }, { name: "Cherry", count: 11, }, { name: "Blackberry", count: 10, }, { name: "Pineapple", count: 10, } ]; // 创建排序函数: let my_sort = (a, b) => a.count - b.count; // 执行稳定的ES10排序: let sorted = fruit.sort(my_sort); console.log(sorted);控制台输出(项目以相反的顺序出现):
事例二：
10.新的 Function.toString()
函数是对象，并且每个对象都有一个
.toString()方法，因为它最初存在于Object.prototype.toString()上。 所有对象（包括函数）都是通过基于原型的类继承从它继承的。这意味着我们以前已经有
funcion.toString()方法了。但是 ES10 进一步尝试标准化所有对象和内置函数的字符串表示。 以下是各种新案例：
典型的例子:
function () { console.log('Hello there.'); }.toString();输出：
"htmlcode">
Number.parseInt.toString(); "htmlcode">
function () { }.bind(0).toString(); "htmlcode">Symbol.toString(); "htmlcode">
上一篇：layui之数据表格--与后台交互获取数据的方法function* () { }.toString(); "htmlcode">Function.prototype.toString.call({}); "
11.BigInt -任意精度整数
BigInt 是第七种 原始类型。
BigInt 是一个任意精度的整数。这意味着变量现在可以
表示²"htmlcode">const b = 1n; // 追加 n 以创建 BigInt
在过去，不支持大于
9007199254740992的整数值。如果超过，该值将锁定为MAX_SAFE_INTEGER + 1:const limit = Number.MAX_SAFE_INTEGER; "9007199254740991"); // initialize with "string" "text-align: center">
12.动态导入
动态导入返回请求模块的模块名称空间对象的
promise。因此，可以配合使用async/await。事例一：
element.addEventListener('click', async() => { const module = await import(`./api-scripts/button-click.js`); module.clickEvent(); })事例二：
13.标准化 globalThis 对象
这在ES10之前， globalThis 还没有标准化，在平时的项目可以通过以下方式来兼容不同的平台：
var getGlobal = function () { if (typeof self !== 'undefined') { return self; } if (typeof window !== 'undefined') { return window; } if (typeof global !== 'undefined') { return global; } throw new Error('unable to locate global object'); };但即使这样也不总是奏效。因此，ES10 添加了
globalThis对象，从现在开始，该对象用于在任何平台上访问全局作用域:但即使这样也不总是奏效。因此，ES10 添加了 globalThis 对象，从现在开始，该对象用于在任何平台上访问全局作用域:
总结
JS 是一种动态语言，这对 web 开发非常有益。自 2015 年 ES6 出现以来，JS 语言经历了一次充满活力的演变。在这篇文章中，咱们回顾了ES10(2019)中出现的特性，并介绍了一些将在
ES11(2020)中保持稳定的特性，因为它们处于state 3，并且很可能在下一个版本中被标准化。尽管这些特性中的许多对于Web应用程序的开发可能不是必需的，但是一些特性可以规制咱们以前通过技巧或大量冗长实现的代码。
代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
原文：https://dev.to/carlillo/12-es10-features-in-12-simple-examples-2cbn
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：解决layui页面按钮点击无反应,也不报错的问题