JavaScript ES2019 新增特性完整指南
本文详细解析 JavaScript ES2019 标准中引入的八项核心更新。内容涵盖可选的 Catch 绑定、JSON 超集支持、Symbol.description 属性、Function.prototype.toString 修订版、Object.fromEntries 方法、JSON.stringify 格式优化以及 String 和 Array 的原型扩展。文章通过具体代码示例说明各特性的用法、限制及实际应用场景,帮助开发者快速掌握 ES2019 的关键改进。
ES2019 提案阶段概述
前言
JavaScript 语言持续演进,不断引入新功能。TC39 已完成并批准了 ES2019 标准中的 8 项功能,这些功能经历了四个不同的提案阶段,分别是:
- Stage 0: Strawman(初步构想)
- Stage 1: Proposals(正式提案)
- Stage 2: Drafts(草案)
- Stage 3: Candidates(候选)
- Stage 4: Finished/Approved(已完成/已批准)
以下链接可以查看Stage 0,Stage 1 – 3 和Final Stage
可选的 Catch 绑定
可选的 Catch 绑定
允许在不需要使用 catch 参数时省略该绑定。
try {
// trying to use a new ES2019 feature
// which may not be implemented in other browsers
} catch (unused) {
// revert back to old way
}
现在可以移除未使用的错误变量绑定。
try {
...
} catch {
...
}
JSON 超集与符号说明
JSON 超集
该提案的动机在于,JSON 字符串允许包含未转义的 U+2028 LINE SEPARATOR 和 U+2029 PARAGRAPH SEPARATOR 字符,而 ECMAScript 字符串此前不允许。在 ES2019 之前,尝试在字符串字面量中使用这些字符会引发 SyntaxError: Invalid or unexpected token 错误。
const LS = eval('"\u2028"');
const PS = eval("'\u2029'");
符号说明
符号(Symbol)在 ES2015 中引入,具有独特功能。在 ES2019 中,Symbol 现在提供了 description 属性,用于直接获取创建时提供的描述。此举旨在避免通过间接调用 Symbol.prototype.toString 来获取描述。
const mySymbol = Symbol("myDescription");
console.log(mySymbol); // Symbol(myDescription)
console.log(mySymbol.toString()); // Symbol(myDescription)
console.log(mySymbol.description); // myDescription
Function.prototype.toString 修订版
Function.prototype.toString - 修订版
此前我们已使用函数原型中的 toString 方法,但在 ES2019 中该方法经过修订,现在返回的字符串包含函数内部的注释。需要注意的是,此行为在箭头函数(Arrow Functions)上不起作用。
function /* comment */ foo /* another comment */() {}
// Before
console.log(foo.toString()); // function foo(){}
// Now ES2019
console.log(foo.toString()); // function /* comment */ foo /* another comment */ (){}
// Arrow Syntax
const bar /* comment */ = /* another comment */ () => {};
console.log(bar.toString()); // () => {}
Object.fromEntries 方法
Object.fromEntries
这是 Object.entries 的反向操作方法,也是克隆对象的方法之一。
const obj = {
prop1: 1,
prop2: 2
};
const entries = Object.entries(obj);
console.log(entries); // [ [ 'prop1', 1 ], [ 'prop2', 2 ] ]
const fromEntries = Object.fromEntries(entries);
console.log(fromEntries); // Object { prop1: 1, prop2: 2 }
console.log(obj === fromEntries); // false
注意:任何嵌入式对象或数组仅通过引用进行复制。
格式良好的 JSON.stringify
格式良好的 JSON.stringify
该特性由同一提案者提出,与 JSON 超集特征相关。ES2019 不再将未配对的代理代码点(unpaired surrogate code points)作为单个 UTF-16 代码单元返回,而是使用 JSON 转义序列表示它们。
// Before
console.log(JSON.stringify("\uD800")); // "�"
// Now ES2019
console.log(JSON.stringify("\uD800")); // "\ud800"
String 原型扩展:trimStart 和 trimEnd
String.prototype trimStart 和 trimEnd
我们此前已使用 String 原型中的 trim 方法,用于删除字符串开头和结尾的空格。ES2019 引入了 trimStart 和 trimEnd 方法,分别用于仅删除开头或结尾的空格。
// Trim
const name = " Codedam ";
console.log(name.trim()); // "Codedam"
// Trim Start
const description = " Unlocks Secret Codes ";
console.log(description.trimStart()); // "Unlocks Secret Codes "
// Trim End
const category = " JavaScript ";
console.log(category.trimEnd()); // " JavaScript"
Array 原型扩展:flat 和 flatMap
Array.prototype flat 和 flatMap
flat 方法创建一个新数组,所有子数组元素以递归方式连接到指定的深度。默认情况下,深度为 1,即仅展平数组的第一层嵌套数组。
const arr = [1, 2, [3, 4, [5, 6]]];
arr.flat(); // [1, 2, 3, 4, [5, 6]]
arr.flat(2); // [1, 2, 3, 4, 5, 6]
// You can use Infinity to flatten all the nested arrays no matter how deep the array is
const arrExtreme = [1, [2, [3, [4, [5, 6, 7, [8, 9]]]]]];
arrExtreme.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
flatMap 类似于 flat,并与 map 相关。它先对数组进行映射操作,然后将结果展平。
const arr = ["Codedam", "is Awsome", "!"];
const mapResult = arr.map(item => item.split(" "));
console.log(mapResult); // [ [ 'Codedam' ], [ 'is', 'Awsome' ], [ '!' ] ]
const flatMapResult = arr.flatMap(chunk => chunk.split(" "));
console.log(flatMapResult); // ['Codedam', 'is', 'Awsome', '!'];
其他即将推出的功能
其他
此处强调一些目前处于 Stage 3 的有用即将推出的功能。
- globalThis
- BigInt
- import()
- Legacy RegEx
- Private instance methods and accessors
- String.prototype.matchAll
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。
JavaScript怎么准确判断数据类型:typeof、instanceof与Object.prototype.toString
2026-11-05 17:09:21
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么?
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
D3.js 与 ECharts 选型对比:灵活性 vs 开发效率
2026-11-05 09:45:01
