【英】Javascript ES2019中的8个新特性

前言

这ES2019年了，新增了好几个方法，不一定要立马用哈，可以了解一下。本期英文来自@Rienz

正文从这开始～～

I personally love how JavaScript keeps improving and adding more features. TC39 has finished and approved this 8 features for ES2019 which has 4 stages and those stages are.

• Stage 0: Strawman

• Stage 1: Proposals

• Stage 2: Drafts

• Stage 3: Candidates

• Stage 4: Finished/Approved

Here are the links for you can see all the proposals on Stage 0, Stage 1 – 3 and Final Stage.

I also don’t like introductions so let’s start naming and explaining this features one by one.

Optional Catch Binding

The proposal of Optional Catch Binding is to be able to optionally remove the catch binding where it would not be used.

try {
 // trying to use a new ES2019 feature
 // which may not be implemented in other browsers
} catch (unused) {
 // revert back to old way
}

the unused binding can now be remove.

try {
 ...
} catch {
 ...
}

JSON superset

The motivation of this proposal is that JSON strings can contain unescaped U+2028 LINE SEPARATOR and U+2029 PARAGRAPH SEPARATOR characters while ECMAScript strings cannot. Before ES2019 was deployed it would produce an error of SyntaxError: Invalid or unexpected token.

const LS = eval('"\u2028"');
const PS = eval("'\u2029'");

Symbol Description

Symbols was introduce in ES2015 and has very unique features. In ES2019, it can now provide its given description. Its goal is to avoid indirectly getting the provided description from 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 – Revision

We already have the toString method within the function prototype before however in ES2019 it was revised and include the comment that is within the function but note that it doesn’t work on 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

It is a reverse method for Object.entries which can be one of the ways to clone an object.

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

However like I said on my Spread Operator article, Be careful because any embedded object/array is simply being copied by reference.

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

Well-formed JSON.stringify

This was also proposed by the same person and is related on the feature JSON superset. Instead of returning unpaired surrogate code points as single UTF-16 code units, ES2019 represent them with JSON escape sequences.

// Before
console.log(JSON.stringify('\uD800')); // "�"
// Now ES2019
console.log(JSON.stringify('\uD800')); // "\ud800"

String.prototype trimStart and trimEnd

We already have trim method in String prototype which removes spaces between the start and end of the string. However now ES2019 introduced trimStart and 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.prototype flat and flatMap

flat method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth. The depth by default to 1 which flattens the first layer of nested arrays on the array.

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 is similar to flat and related to map in which it maps the array then flattens it afterwards.

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', '!'];

Extra

I would like to also highlight some of the useful upcoming features that are now in Stage 3.

• globalThis

• BigInt

• import()

• Legacy RegEx

• Private instance methods and accessors

• String.prototype.matchAll

关于本文
作者：@Rienz
原文：https://codedam.com/8-new-features-javascript-es2019/

最后，为你推荐

可以在公众号发送关键词 英20190216 可查看译文版