JavaScript ES2019 中的 8 个新功能
1. 可选的 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 { ...}
2.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'");
3. 符号描述
符号是在 ES2015 中引入的,具有非常独特的功能。在 ES2019 中可以提供给定的描述,目的是避免间接从 Symbol.prototype.toString 获取描述。
const mySymbol = Symbol('myDescription');console.log(mySymbol); // Symbol(myDescription)console.log(mySymbol.toString()); // Symbol(myDescription)console.log(mySymbol.description); // myDescription
4. 修订版的 Function.prototype.toString
之前的函数原型已经有 toString 方法,但是在 ES2019 中,它经过了修订,可以包含函数内的注释,不过不适应于箭头函数。
function /* comment */ foo /* another comment */ (){} // Beforeconsole.log(foo.toString()); // function foo(){} // Now ES2019console.log(foo.toString()); // function /* comment */ foo /* another comment */ (){} // Arrow Syntaxconst bar /* comment */ = /* another comment */ () => {} console.log(bar.toString()); // () => {}
5.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
不过需要注意的是,嵌入式对象 / 数组都只是引用。
const obj = { prop1: 1, prop2: 2, deepCopy: { mutateMe: true }}; const entries = Object.entries(obj);const fromEntries = Object.fromEntries(entries);fromEntries.deepCopy.mutateMe = false;console.log(obj.deepCopy.mutateMe); // false
6. 格式化的 JSON.stringify
这个提案是由同一个人提出来的,与 JSON 超集有关。ES2019 将使用 JSON 转义序列表示输出结果,而不是返回 UTF-16 代码单元。
// Beforeconsole.log(JSON.stringify('\uD800')); // "�" // Now ES2019console.log(JSON.stringify('\uD800')); // "\ud800"
7.String.prototype 的 trimStart 和 trimEnd
String 原型已经有了 trim 方法,用来移除字符串开头和结尾的空格。而 ES2019 引入了 trimStart 和 trimEnd。
// Trimconst name = " Codedam ";console.log(name.trim()); // "Codedam" // Trim Startconst description = " Unlocks Secret Codes ";console.log(description.trimStart()); // "Unlocks Secret Codes " // Trim Endconst category = " JavaScript ";console.log(category.trimEnd()); // " JavaScript"
8.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', '!'];
最后,给大家推荐一个前端学习进阶内推交流群685910553(前端资料分享),不管你在地球哪个方位,
不管你参加工作几年都欢迎你的入驻!(群内会定期免费提供一些群主收藏的免费学习书籍资料以及整理好的面试题和答案文档!)
如果您对这个文章有任何异议,那么请在文章评论处写上你的评论。
如果您觉得这个文章有意思,那么请分享并转发,或者也可以关注一下表示您对我们文章的认可与鼓励。
愿大家都能在编程这条路,越走越远。