JavaScript ES2019的新增功能

by Vali Shah

通过瓦利沙阿

JavaScript ES2019的新增功能 (What’s new in JavaScript ES2019)

Many of us know that there is a standard procedure for Javascript’s latest releases and a committee behind that. In this post, I will explain about who makes the final call on any new specification, what is the procedure for it, and what's new in ES2019.

我们中的许多人都知道Javascript的最新版本有一个标准过程，并且背后有一个委员会。 在本文中，我将解释谁最终对任何新规范进行了调用，执行的程序以及ES2019中的新增功能。

The language specification that drives JavaScript is called ECMAScript. There is a team behind that called Technical Committee 39 [TC39] that reviews every specification before adopting.

驱动JavaScript的语言规范称为ECMAScript。 背后有一个称为技术委员会39 [TC39]的团队，负责在采用之前审查每个规范。

Every change goes through a process with stages of maturity.

每项变更都会经历一个成熟阶段的过程。

• Stage 0: Ideas/Strawman

  阶段0：创意/稻草人

• Stage 1: Proposals

  阶段1：提案

• Stage 2: Drafts

  第二阶段：草稿

• Stage 3: Candidates

  第三阶段：候选人

• Stage 4: Finished/Approved

  阶段4：完成/批准

A feature which reaches Stage 4 will most likely be part of the language specification.

达到阶段4的功能很可能是语言规范的一部分。

Let's dive into the things which are added newly into the specification under ES2019.

让我们深入研究ES2019下规范中新添加的内容。

Array.prototype。{flat，flatMap} (Array.prototype.{flat,flatMap})

Array.prototype.flat() proposed to flatten arrays recursively up to the specified depth and returns a new array.

提议使用Array.prototype.flat()递归地将数组展平到指定depth并返回一个新数组。

Syntax: Array.prototype.flat(depth) depth — Default value 1, Use Infinity to flatten all nested arrays.

语法 ： Array.prototype.flat(depth) depth —默认值1 ，使用Infinity展平所有嵌套数组。

const numbers = [1, 2, [3, 4, [5, 6]]];
// Considers default depth of 1
numbers.flat(); 
> [1, 2, 3, 4, [5, 6]]
// With depth of 2
numbers.flat(2); 
> [1, 2, 3, 4, 5, 6]
// Executes two flat operations
numbers.flat().flat(); 
> [1, 2, 3, 4, 5, 6]
// Flattens recursively until the array contains no nested arrays
numbers.flat(Infinity)
> [1, 2, 3, 4, 5, 6]

Array.prototype.flatMap() maps each element using a mapping function and flattens the result into a new array. It’s identical to the map operation followed by a flat of depth 1.

Array.prototype.flatMap()使用映射函数映射每个元素，并将结果展平为新数组。 与地图操作相同，后跟一个depth 1的flat 。

Syntax: Array.prototype.flatMap(callback) callback: function that produces an element of the new Array.

语法： Array.prototype.flatMap(callback) callback：产生新Array元素的function 。

const numbers = [1, 2, 3];
numbers.map(x => [x * 2]);
> [[2], [4], [6]]
numbers.flatMap(x => [x * 2]);
> [2, 4, 6]

Object.fromEntries (Object.fromEntries)

Object.fromEntries performs the reverse of Object.entries . It transforms a list of key-value pairs into an object.

Object.fromEntries执行与Object.entries相反的操作。 它将一组键值对转换为一个对象。

Syntax: Object.fromEntries(iterable) iterable: An iterable like Array or Map or objects implementing the iterable protocol

语法： Object.fromEntries(iterable) iterable：类似于Array或Map的可迭代对象或实现可迭代协议的对象

const records = [['name','Mathew'], ['age', 32]];
const obj = Object.fromEntries(records);
> { name: 'Mathew', age: 32}
Object.entries(obj);
> [['name','Mathew'], ['age', 32]];

String.prototype。{trimStart，trimEnd} (String.prototype.{trimStart, trimEnd})

trimStart() removes whitespace from the beginning of a string and trimEnd() removes whitespace from the end of a string.

trimStart()从字符串开头删除空格， trimEnd()从字符串结尾删除空格。

const greeting = ` Hello Javascript! `;
greeting.length;
> 19
greeting = greeting.trimStart();
> 'Hello Javascript! '
greeting.length;
> 18
greeting = 'Hello World!   ';
greeting.length;
> 15
greeting = greeting.trimEnd();
> 'Hello World!'
greeting.length;
> 12

可选的捕捉绑定 (Optional Catch Binding)

Prior to the new specification, it was required to have an exception variable bind to a catch clause. ES2019 made it optional.

在新规范之前，要求将异常变量绑定到catch子句。 ES2019使它成为可选。

// Before
try {
   ...
} catch(error) {
   ...
}
// After
try {
   ...
} catch {
   ...
}

This feature is useful when you want to completely ignore the error. Best practice is to consider handling an error.

当您要完全忽略该错误时，此功能很有用。 最佳实践是考虑处理错误。

There are cases where you know the possible error that could trigger on operations. You can ignore the catch block handling.

在某些情况下，您知道操作可能触发的错误。 您可以忽略catch块处理。

JSON⊂ECMAScript (JSON ⊂ ECMAScript)

The line separator (U+2028) and paragraph separator (U+2029) symbols are now allowed in string literals. Previously, these were treated as line terminators and resulted in SyntaxError exceptions.

现在，字符串文字中允许使用行分隔符(U + 2028)和段落分隔符(U + 2029)。 以前，这些被视为行终止符，并导致SyntaxError异常。

// Produces invalid string before ES2019
eval('"\u2028"');
// Valid in ES2019
eval('"\u2028"');

格式正确的JSON.stringify (Well-formed JSON.stringify)

Instead of unpaired surrogate code points resulting in single UTF-16 code units, ES10 represents them with JSON escape sequences.

ES10不会使用未配对的替代代码点生成单个UTF-16代码单元，而是使用JSON转义序列来表示它们。

JSON.stringify('\uD800');
> '"�"'
JSON.stringify('\uD800');
> '"\\ud800"'

Function.prototype.toString (Function.prototype.toString)

.toString() now returns exact slices of source code text, including whitespaces and comments.

.toString()现在返回源代码文本的精确片段，包括空格和注释。

function /* a comment */ foo () {}
// Previously:
foo.toString();
> 'function foo() {}'
             ^ no comment
                ^ no space
// Now:
foo.toString();
> 'function /* comment */ foo () {}'

Symbol.prototype.description (Symbol.prototype.description)

Read-only property that returns the optional description of a Symbol Object:

只读属性，它返回Symbol对象的可选描述：

Symbol('desc').toString();
> "Symbol(desc)"
Symbol('desc').description;  
> "desc"
Symbol('').description;      
> ""
Symbol().description;
> undefined

结论 (Conclusion)

TC39 keeps all the upcoming specifications which are in stage >1 of the process here. As a developer, It's important to keep tabs on what's happening around. There are many more exciting things coming up like static & private methods and fields in classes, Legacy RegEx, etc. Find out all the new things which are in the proposal stage here.

TC39保持所有即将来临的规格其在阶段>的凝固酶原1 SSħ ERE。 作为一个开发板的左右，它保持对周围发生的事情的标签是非常重要的。 还有更多令人兴奋的事情来了李柯静和在类的私有方法和字段，传统雷杰 X等找出所有的新东西是在提案STA GE ^ h ERE。

code = coffee + developer

code = co ffee + de veloper

Here are a few more interesting topics:

以下是一些更有趣的主题：

• A quick overview of JavaScript Symbols

  JavaScript符号快速概述

• How to adopt a git branching strategy

  如何采用git分支策略

• An Introduction to Git Merge and Git Rebase: What They Do and When to Use Them

  Git合并和Git变基简介：它们做什么以及何时使用它们

翻译自: https://www.freecodecamp.org/news/whats-new-in-javascript-es2019-8af4390d8494/