ES2019 / ES10有什么新功能?

合集 - 前端开发(23)

1.第一次写博客，关于前端开发deMVC在js中的应用2016-07-122.react开发中的小细节2017-03-193.CSS开启硬件加速来提高网站性能2019-06-174.js中this的指向问题2019-06-105.Js面向对象构造函数继承2017-03-266.Js面向对象原型~构造函数2017-03-197.JavaScript如何工作：垃圾回收机制 + 常见的4种内存泄漏2019-10-288.Promise核心原理解析2019-09-279.图解javascript的this指向2019-09-1210.图解javascript原型链2019-09-0611.被闭包啪啪啪的打脸之 闭包的错误使用2019-08-2812.react解析: render的FiberRoot(三)2019-08-1013.个人小程序应用开发指南2019-07-22

14.ES2019 / ES10有什么新功能?2019-06-21

15.2022前端开发知识总结归纳（前端掌握知识）2022-10-3116.Axios源码解析：请求响应拦截器2021-12-0217.AntV G2可视化引擎, 有用过嘛？2021-11-3018.弄懂！ES6中的Iterator迭代器2020-06-1019.🔥[译] 正交设计组件的好处2020-01-0920.小程序开发指南之性能优化2019-12-0421.聊一聊，React开发中应该规避的点2019-11-2622.解析：让你弄懂redux原理2019-11-0523.关于Web GIS基础知识2024-03-26

收起

ECMAScript（简称ES）是ECMA International在ECMA-262和ISO / IEC 16262中标准化的脚本语言规范。它是为了标准化JavaScript语言而创建的，以便从浏览器供应商那里培养出多个独立的标准实现。

2019年版的ECMAScript规范增加了许多新功能，在这里我将介绍其中的一些新功能。

本文原文链接

Array.flat()

Array.flat() 返回一个新数组，其中任何子数组都被展开。Array.flat() 没有任何参数的调用，只会展开一层深度。可以提供可选的深度参数，支持连续调用。

Example:

let arr = [1, 2, 3, [4, 5, 6, [7, 8, 9, [10, 11, 12]]]];

arr.flat(); // [1, 2, 3, 4, 5, 6, Array(4)];

arr.flat().flat(); // [1, 2, 3, 4, 5, 6, 7, 8, 9, Array(3)];

arr.flat(3); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

//如果不知道长度，可以直接使用Infinity:
arr.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

Array.flatMap()

该 Array.flatMap() ** 方法与ES6Array.Map()**方法相同，但同时也支持展平。该 **Array.flatMap()**方法首先使用映射函数映射每个元素，然后将结果展平为新数组。**flatMap() ** 通常非常有用，因为将两者合并到一个方法中效率更高。
Example:

let arr = [1, 2, 3, 4, 5];

arr.map(x => [x, x * 2]);
// [Array(2), Array(2), Array(2)]
// 0: (2)[1, 2]
// 1: (2)[2, 4]
// 2: (2)[3, 6]
// 3: (2)[4, 8]
// 4: (2)[5, 10]

arr.flatMap(v => [v, v * 2]);
// [1, 2, 2, 4, 3, 6, 4, 8, 5, 10]

String.trimStart() ＆ String.trimEnd()

String.trimStart() 可用于从字符串的开头去掉空白。String.trimEnd() 可用于从字符串的尾部去掉空白。
Example：

let  greeting =  "    Hello World";

console.log(greeting.trimStart());
// "Hello World"

let greeting = "Hello World    ";

console.log(greeting.trimEnd());
// "Hello World"

可选 Catch Binding

可选的 catch binding 允许开发人员在catch块中，不使用error参数的情况下使用try/catch。

Example:

// ES2019 之前使用
try {
  // some code
}
catch (err) {
  // error handling code
}

// 现在使用ES2019这样的try / catch：
try  {
  // some code
}
catch {
  // error handling code
}

Object.fromEntries（）

Object.fromEntries() 创建一个对象或将键值对转换为一个对象。它只接受 Iterable 迭代 例如：Object.fromEntries(Iterable)。

Example:

let entries = new Map([["name", "herrylo"], ["age", 24]]);

console.log(Object.fromEntries(entries));
// { name: 'herrylo', age: 24 }

Symbol.description

只读描述属性，是一个返回Symbol对象的可选描述的字符串。
Example:

let mySymbol = `My Symbol`;

let symObj = Symbol(mySymbol);

console.log(symObj) // Symbol(mySymbol);

console.log(String(symObj) === `Symbol(${mySymbol})`); // true

console.log(symObj.description); // "My Symbol"

ps: 感兴趣的点个关注，每周一文，不止有技术，还有其他推荐哦！