Logo

菜单

发布于 2026-01-06 9 阅读
0

ECMAScript 2019 的实用特性回顾

ECMAScript 2019 的实用特性回顾

首先，我要为没能像我希望的那样频繁地更新博客而道歉。过去几周忙得不可开交，而且我在2019年珀斯DDD大会上演讲也玩得很开心。

既然已经解决了这个问题，这次我想让我们来看看ECMAScript 2019（又名 ES2019 或 ES10）中新增的功能，因为它们非常令人兴奋，而且能让我们的生活轻松很多😎。

TLDR；

乍一看，这个版本在Array.prototype、flat和 上添加了一些内置函数flatMap。然后我们有了Object.fromEntries直接将 的返回值转换Object.entries为新对象的函数。

我们还有trimStart广泛trimEnd使用的String.prototype非标准版本String.prototype.trimLeft。trimRight

另一个令人兴奋的特性是可选的catch绑定参数。除此之外，还有一些 JSON 方面的改进，例如Symbol.prototype.description允许您为符号指定描述，无论输入如何JSON.stringify都能返回格式良好的UTF-8 编码，并且最后明确规定Function.prototype.toString它必须返回相应的原始文本或标准占位符。

准备好了吗？那就让我们开始吧。

Array.prototype.{flat, flatMap}

flat()是一种新方法，它允许你从多维数组创建一维数组。

假设我们有一个如下所示的数组：

const myArray = [1, 2, 3, [4, 5, 6, [7, 8, 9, [10, 11, 12]]]];
Enter fullscreen mode Exit fullscreen mode

在此之前，flat如果你想实现这个目标，你必须这样做：

const myNewArray = [].concat.apply([], myArray)
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Enter fullscreen mode Exit fullscreen mode

或者：

var myNewArray = myArray.reduce(
  function(prev,curr) {
    return prev.concat(curr)
  }
)
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Enter fullscreen mode Exit fullscreen mode

有了这项新功能，操作就变得非常简单：

var myNewArray = myArray.flat(4);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Enter fullscreen mode Exit fullscreen mode

您还可以串联多个调用：

var myNewArray = myArray.flat().flat().flat().flat();
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Enter fullscreen mode Exit fullscreen mode

函数的参数flat指定了它在数组中查找的深度。如果您不确定数组的深度，只需将以下参数Infinity作为输入即可：

var myNewArray = myArray.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Enter fullscreen mode Exit fullscreen mode

如果您不提供任何输入，默认情况下只会深入一层：

var myNewArray = myArray.flat(); 
// [1, 2, 3, 4, 5, 6, Array(4)];
Enter fullscreen mode Exit fullscreen mode

flatMap另一方面，它允许你使用映射函数映射每个元素，然后将结果扁平化到一个新数组中。你可以把它想象成用map一个单列函数链接一个多列函数flat。然而，无论从使用还是执行效率来看，它都非常有用。

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

let mappedArray = myArray.map(x => [x, x * 2]);
// [Array(2), Array(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]

let mappedFlattenedArr = mappedArray.flat();

// [1, 2, 2, 4, 3, 6, 4, 8, 5, 10]

let myNewArray = myArray.flatMap(v => [v, v * 2]);
// [1, 2, 2, 4, 3, 6, 4, 8, 5, 10]
Enter fullscreen mode Exit fullscreen mode

String.prototype.{trimStart, .trimEnd}

这些方法的作用显而易见。只需记住，我们之前有 ，trimLeft它将被 替换；trimStart而trimRight又将被 替换trimEnd。

let message = ' This is a string with white space around ';

message = message.trimStart();
// 'This is a string with white space around '

message = message.trimEnd();
// 'This is a string with white space around'
Enter fullscreen mode Exit fullscreen mode

Object.fromEntries

此方法获取一个Iterable键值对并将其转换为对象。但让我们看看什么是键值对Iterable：

JavaScript 支持一种协议，允许使用诸如for`…`of和扩展运算符之类的控制结构...来按顺序遍历数组等对象。这种协议称为可迭代对象（Iterable），支持此功能的数据结构也称为可迭代对象。虽然 JavaScript 从一开始就为映射（Map）、数组和集合（Set）提供了可迭代属性，但普通对象默认情况下并不具备此功能。

要了解实际效果：

let entries = new Map([["name", "john"], ["age", 22]]);

let newObj = Object.fromEntries(entries);
// { name: 'john', age: 22 }
Enter fullscreen mode Exit fullscreen mode

一个实际应用场景是解析查询字符串：

let query = Object.fromEntries(new URLSearchParams('foo=bar&baz=qux'));

// { foo: 'bar', baz: 'qux' }
Enter fullscreen mode Exit fullscreen mode

可选的卡扣式装订

可选的 catch 绑定允许我们在 catch 代码块内try/catch不使用参数。error

以前，无论你是否在意，都必须使用这种语法err，例如，当需要回退到旧版功能以支持旧版浏览器时：

try {
  // try to use a web feature which may not be implemented
} catch (unused) {
  // fall back to a less desirable web feature with broader support
}
Enter fullscreen mode Exit fullscreen mode

你ES2019可以这样做：

try {
  // ...
} catch {
  // ...
}
Enter fullscreen mode Exit fullscreen mode

Symbol.description

这个新的只读描述属性是一个字符串，返回对象的可选描述。建议在 返回值不明确的情况Symbol下使用此方法。Symbol.prototype.toString

let description = 'This symbol represents an emoji 😁';

let mySym = Symbol(description);
// Symbol('This symbol represents an emoji 😁')

console.log(mySym.description);
'This symbol represents an emoji 😁'
Enter fullscreen mode Exit fullscreen mode

Function.toString

这种方法非常实用，它可以返回函数的源代码。想象一下，当你需要对一段使用了第三方函数的代码进行故障排除时，这种方法可以帮助你查看其实现方式（前提是它有源代码映射）。

function myFn(emoji) {
  let msg = `${emoji} is hellav an emoji`;
  console.log(msg);
}

console.log(myFn.toString());

// "function myFn(emoji) {
//   let msg = `${emoji} is hellav an emoji`;
//   console.log(msg);
// }"
Enter fullscreen mode Exit fullscreen mode

当然，这种方法并非适用于所有情况。如果我们尝试将其应用于map数组上的函数：

Array.prototype.map.toString();

// "function map() { [native code] }"
Enter fullscreen mode Exit fullscreen mode

由于该函数的实现并非用 JavaScript 编写，因此只会显示该函数是用原生代码编写的。

JSON.stringify

团队对Unicode字符进行了改进，现在此方法不会返回格式错误的数据。

// Non-BMP characters still serialize to surrogate pairs.
JSON.stringify('𝌆')
// → '"𝌆"'
JSON.stringify('\uD834\uDF06')
// → '"𝌆"'

// Unpaired surrogate code units will serialize to escape sequences.
JSON.stringify('\uDF06\uD834')
// → '"\\udf06\\ud834"'
JSON.stringify('\uDEAD')
// → '"\\udead"'
Enter fullscreen mode Exit fullscreen mode

Array.sort稳定

团队决定更改排序实现方式，使其更加稳定（即，相等的元素必须保持其原始顺序）。

const grades = [
  { topic: 'math', grade: 10 },
  { topic: 'literacy', grade: 10 },
  { topic: 'chemical', grade: 13 },
  { topic: 'geography', grade: 12 },
  { topic: 'modern history', grade: 12 },
  { topic: 'art', grade: 13 },
  { topic: 'computer basics', grade: 14 },
  { topic: 'algebra', grade: 14 },
];

grades.sort(a, b => a.grade - b.grade);

// 0: {topic: "math", grade: 10}
// 1: {topic: "literacy", grade: 10}
// 2: {topic: "geography", grade: 12}
// 3: {topic: "modern history", grade: 12}
// 4: {topic: "chemical", grade: 13}
// 5: {topic: "art", grade: 13}
// 6: {topic: "computer basics", grade: 14}
// 7: {topic: "algebra", grade: 14}
Enter fullscreen mode Exit fullscreen mode

概括

总的来说，JavaScript 的发展方向是正确的，它有助于开发者编写更稳定、可靠和一致的代码。您可以在这里找到更多关于其 GitHub 代码库的信息。

希望看到更多 JavaScript 的强大功能，期待很快能与大家分享下一篇文章。

文章来源：https://dev.to/yashints/useful-features-of-ecmascript-2019-reviewed-gdc
使用 Kafka 和 Python...
你参加过哪个训练营？你会推荐它吗？