Summary of new features of ECMAScript 2019(ES10)

Express Lane:

New features of ES6, ES7, ES8, ES9, ES10, ES11, ES12 and ES13

According to the old rules, first take a look at the new functions of ES2019:

Array.flat() and Array.flatMap(): array flattening
String.trimStart() and String.trimEnd(): remove the beginning and end blank text
String.prototype.matchAll: returns an iterator for all matching objects
Symbol.prototype.description: a read-only attribute that returns an optional description string of a symbol object
Object.fromEntries(): returns an array of key value pairs of enumerable properties of a given object
Optional Catch
JSON Superset superset
JSON.stringify() enhances format conversion
Array.prototype.sort() is more stable
Function.prototype.toString() revised

Array.flat() and Array.flatMap()

Array flattening

Array.flat() flattens the array and passes in the level depth parameter (1 by default) to raise the level for the lower array. If you want to improve all levels, you can write a large number or even Infinity, but it is not recommended.

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

Array.prototype.flatMap() is a combination of Array.prototype.map() and Array.prototype.flat(). Try to flatten the data after map adjustment

[1, 2, [3, 4]].flatMap(v => {
  if (typeof v === 'number') {
    return v * 2
  } else {
    return v.map(v => v * 2)
  }
})
// [2, 4, 6, 8]

String.trimStart() and String.trimEnd(): remove the beginning and end blank text

Remove the blank text at the beginning and end to avoid uncontrolled display. Since ES5, String.prototype.trim() has been used to remove whitespace and newline characters on the head and tail. Now, the head and tail are controlled separately through trimStart(), trimEnd(). trimLeft(), trimlight() are their aliases

const string = ' Hello ES2019! ';
string.trimStart();
// 'Hello ES2019! '
string.trimEnd();
// ' Hello ES2019!'

Is it easier to control?

String.prototype.matchAll

matchAll() returns an iterator for all matched objects

const raw_arr = 'test1  test2  test3'.matchAll((/t(e)(st(\d?))/g));
const arr = [...raw_arr];

Symbol.prototype.description

Symbol is a basic data type introduced in ES6 and can be used as an identifier of object properties. The description property is read-only and can be used to obtain the description of the symbol object to better understand its role.

const symbol = Symbol('This is a Symbol');
symbol;
// Symbol(This is a Symbol)
Symbol.description;
// 'This is a Symbol'

Object.fromEntries(): returns an array of key value pairs of enumerable properties of a given object

We know that ES8 introduced Object.entries converts an object to [key, value] the form of key value pairs can be applied to structures like Map. Everything comes and goes, Object.fromEntries() is used to restore key value pairs to object structures.

const entries = [ ['foo', 'bar'] ];
const object = Object.fromEntries(entries);
// { foo: 'bar' }

Optional Catch

In the process of trying... Catch error handling, if no parameters are passed to catch, the code will report an error. Sometimes we don't care about error situations, such as:

const isValidJSON = json => {
  try {
    JSON.parse(json);
    return true;
  } catch (unusedError) {
    // Unused error parameter
    return false;
  }
};

In the new specification, we can omit the parameters and parentheses of catch binding, which is more flexible.

const isValidJSON = json => {
  try {
    JSON.parse(json);
    return true;
  } catch {
    return false;
  }
};

JSON Superset superset

Previously, if the JSON string contains a row separator (\ u2028) and a paragraph separator (\ u2029), an error will be reported during parsing. Now ES2019 supports them.

JSON.parse('"\u2028"');
// SyntaxError

// ES2019
JSON.parse('"\u2028"');
// ''

JSON.stringify() enhances format conversion

What is the character length of emoji?

' '.length;

The reason why JavaScript interprets emoji as two characters is that UTF-16 represents emoji as a combination of two proxies. Our emoji is encoded with the characters' \ uD83D 'and' \ uDE0E '. However, if you try to write such a character alone, such as' \ uD83D ', it will be considered an invalid text string. In previous releases, these characters will be replaced with special characters:

JSON.stringify('\uD83D');
// '"�"'

Now insert the escape character before the character code, and the result is still readable and valid UTF-8/UTF-16 Code:

JSON.stringify('\uD83D');
// '"\\ud83d"'

Array.prototype.sort() is more stable

Previously, the specification allowed unstable sorting algorithms, such as quick sorting.

In the previous sorting, there may be [{a: 1, b: 2}, {a: 1, b: 3}...], [{a: 1, b: 3}, {a: 1, b: 2}...].
Now all mainstream browsers use stable sorting algorithms. In fact, this means that if we have an array of objects and sort them on a given key, the elements in the list will remain in position relative to other objects with the same key.

let array = [
  {a: 1, b: 2},
  {a: 2, b: 2},
  {a: 1, b: 3},
  {a: 2, b: 4},
  {a: 5, b: 3}
];
array.sort((a, b) => a.a - b.a);
// [{a: 1, b: 2}, {a: 1, b: 3}...] / [{a: 1, b: 3}, {a: 1, b: 2}...]

Function.prototype.toString() revised

Starting from ES2019, Function.prototype.toString() will return the actual text fragments in the source code from beginning to end. This means that comments, spaces, and syntax details are also returned.
function /* a comment */ foo() {}
Previously, Function.prototype.toString() only returned the body of the function, but there were no comments and spaces.

foo.toString();
// 'function foo() {}'

Now, the result returned by the function is consistent with that written:

foo.toString();
// 'function /* a comment  */ foo () {}'

Tags: Javascript ECMAScript ElasticSearch

Posted on Tue, 09 Nov 2021 19:01:28 -0500 by syn1234

Programmer Help