本篇文章主要介绍了ES10 特性的完整指南，分享给大家，具体如下：
ES10 还只是一个草案。但是除了 Object.fromEntries 之外，Chrome 的大多数功能都已经实现了，为什么不早点开始探索呢"text-align: center">
BigInt -任意精度整数
BigInt 是第七种 原始类型。
BigInt 是一个任意精度的整数。这意味着变量现在可以 在过去，不支持大于 如果您运行谷歌搜索JavaScript string match all，第一个结果将是这样的：如何编写正则表达式“match all”？ 最佳结果将建议 String.match 与正则表达式和 /g 一起使用或者带有 /g 的 RegExp.exec 或者带有 /g 的 RegExp.test 。 首先，让我们看看旧规范是如何工作的。 带字符串参数的 String.match 仅返回第一个匹配： 结果是单个 在 将 string.match 与 regex 参数一起使用也是如此： 让我们使用正则表达式 添加 /g 混合 很好，我们使用 < ES10 方式得到了多个匹配，它一直起作用。 那么为什么要使用全新的 matchAll 方法呢"text-align: center"> 这里创建了 match.groups.color 和 match.groups.bird ： 这一次你可以跳过 /g， [ 'e', index: 1, input: 'hello' ] // Iteration 1 使用 .matchAll() 捕获组示例： .matchAll 具有上面列出的所有好处。它是一个迭代器，可以用 for…of 循环遍历它,这就是整个语法的不同。 现在可以将导入分配给变量： Array.flat() 扁平化多维数组： Array.flatMap() 结果： [Array(2), Array(2), Array(2), Array(2), Array(2)] 使用 Object.fromEntries() 将键值对列表转换为对象: String.trimStart() 与 String.trimEnd() 格式良好的 JSON.stringify() 此更新修复了字符 U+D800 到 U+DFFF 的处理，有时可以进入 JSON 字符串。 这可能是一个问题，因为 JSON.stringify 可能会将这些数字格式化为没有等效 UTF-8 字符的值, 但 JSON 格式需要 解析方法使用格式良好的JSON字符串，如: 注意，要创建正确 JSON 格式的字符串，绝对需要在属性名周围加上双引号。缺少或任何其他类型的引号都不会生成格式良好的JSON。 JSON 字符串格式与 Object Literal 不同，后者看起来几乎一样，但可以使用任何类型的引号括住属性名，也可以包含方法(JSON格式不允许使用方法): 不管怎样，一切似乎都很好。第一个示例看起来是兼容的。但它们也是简单的例子，大多数情况下都能顺利地工作! U+2028 和 U+2029 字符 问题是， ES10 之前的 EcmaScript 实际上并不完全支持 JSON 格式。前 ES10 时代不接受未转义行分隔符 U+2028 和段落分隔符 U+2029 字符: 对于 U+D800 - U+DFFF 之间的所有字符也是如此 如果这些字符潜入 JSON 格式的字符串(假设来自数据库记录)，你可能会花费数小时试图弄清楚为什么程序的其余部分会产生解析错误。 因此，如果你传递 eval 这样的字符串 稳定的 Array.prototype.sort() V8 之前的实现对包含10个以上项的数组使用了一种不稳定的快速排序算法。 但情况不再是这样了，ES10 提供了一个稳定的数组排序: 控制台输出(项目以相反的顺序出现): 新的Function.toString() 函数是对象，并且每个对象都有一个 .toString() 方法，因为它最初存在于Object.prototype.toString() 上。 所有对象（包括函数）都是通过基于原型的类继承从它继承的。 这意味着我们以前已经有 funcion.toString() 方法了。 但是 ES10 进一步尝试标准化所有对象和内置函数的字符串表示。 以下是各种新案例： 典型的例子: 控制台输出(函数体的字符串格式:) 可选的 Catch Binding 在过去，try/catch 语句中的 catch 语句需要一个变量。 try/catch 语句帮助捕获终端级别的错误: 在某些情况下，所需的错误变量是未使用的: 编写此代码的人通过尝试强制 在 ES10 中，捕获错误的变量是可选的 现在可以跳过错误变量: 目前还无法测试上一个示例中的 try 语句的结果，但一旦它出来，我将更新这部分。 标准化 globalThis 对象 这在ES10之前， globalThis 还没有标准化。 在产品代码中，你可以自己编写这个怪物，在多个平台上“标准化”它: 但即使这样也不总是奏效。因此，ES10 添加了 globalThis 对象，从现在开始，该对象用于在任何平台上访问全局作用域: Hashbang 语法 也就是 unix 用户熟悉的 shebang。它指定一个解释器(什么将执行JavaScript文件"htmlcode">
代替 ES10类:private、static 和 公共成员 新的语法字符 #octothorpe（hash tag）现在用于直接在类主体的范围内定义变量，函数，getter 和 setter ......以及构造函数和类方法。 下面是一个毫无意义的例子，它只关注新语法: 老实说，我认为这会让语言更难读。 代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。表示²"htmlcode">
const b = 1n; // 追加 n 以创建 BigInt
9007199254740992 的整数值。如果超过，该值将锁定为 MAX_SAFE_INTEGER + 1:
const limit = Number.MAX_SAFE_INTEGER;
"9007199254740991"); // initialize with "string"
"color: #ff0000">typeof
typeof 10;
"htmlcode">
10n === BigInt(10);
"htmlcode">
200n / 10n
"htmlcode">
-100n
"text-align: left">string.prototype.matchAll()
let string = 'Hello';
let matches = string.match('l');
console.log(matches[0]); // "l"
"l"（注意：匹配存储在 matches[0] 中而不是 matches）“hello”中搜索 "l" 只返回 "l"。/l/ 找到字符 串“hello” 中的 “l” 字符：
let string = "Hello";
let matches = string.match(/l/);
console.log(matches[0]); // "l"
let string = "Hello";
let ret = string.match(/l/g); // (2) [“l”, “l”];
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);
.matchall 方法不需要它，结果如下:
[ 'l', index: 2, input: 'hello' ] // Iteration 2
[ 'l', index: 3, input: 'hello' ] // Iteration 3
const string = 'black*raven lime*parrot white*seagull';
const regex = /("text-align: left">动态导入
element.addEventListener('click', async() => {
const module = await import(`./api-scripts/button-click.js`);
module.clickEvent();
})
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]
let array = [1, 2, 3, 4, 5];
array.map(x => [x, x * 2]);
let array = [1, 2, 3, 4, 5];
array.map(x => [x, x * 2]);
0: (2) [1, 2]
1: (2) [2, 4]
2: (2) [3, 6]
3: (2) [4, 8]
4: (2) [5, 10]flatMap 方法：
array.flatMap(v => [v, v * 2]);
[1, 2, 2, 4, 3, 6, 4, 8, 5, 10]
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 }
let greeting = " Space around ";
greeting.trimEnd(); // " Space around";
greeting.trimStart(); // "Space around ";
UTF-8 编码。
'{ “prop1” : 1, "prop2" : 2 }'; // A well-formed JSON format string
'{ “prop1” : 1, "meth" : () => {}}'; // Not JSON format string
let object_literal = { property: 1, meth: () => {} };
“console.log(' hello ')”，它将执行 JavaScript语句 (通过尝试将字符串转换为实际代码),也类似于 JSON.parse 将处理你的 JSON 字符串的方式。一个稳定的排序算法是当两个键值相等的对象在排序后的输出中出现的顺序与在未排序的输入中出现的顺序相同时。
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);
function () { console.log('Hello there.'); }.toString();
"htmlcode">
Number.parseInt.toString();
"htmlcode">
function () { }.bind(0).toString();
"htmlcode">
Symbol.toString();
"htmlcode">
function* () { }.toString();
"htmlcode">
Function.prototype.toString.call({});
"
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;
}
true 退出 try 子句。但是，这并不是实际发生的情况
(() => {
try {
JSON.parse(text)
return true
} catch(err) {
return false
}
})()
=> false
try {
JSON.parse(text);
return true;
}
catch
{
return false;
}
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');
};
// 访问全局数组构造函数
globalThis.Array(0, 1, 2);
"color: #ff0000">Symbol.description
description 是一个只读属性，它返回 Symbol 对象的可选描述。
let mySymbol = 'My Symbol';
let symObj = Symbol(mySymbol);
symObj; // Symbol(My Symbol)
symObj.description; // "My Symbol"
$ ./index.js
$ node index.js
class Raven extends Bird {
#state = { eggs: 10};
// getter
get #eggs() {
return state.eggs;
}
// setter
set #eggs(value) {
this.#state.eggs = value;
}
#lay() {
this.#eggs++;
}
constructor() {
super();
this.#lay.bind(this);
}
#render() {
/* paint UI */
}
}