Array.prototype. {Flat, flatMap}
flat()
is a new instance method of array, it can create one-dimensional array from a multi-dimensional array.
For example:
1 2 3 | <span class="token punctuation">[</span> <span class="token string">'Dog'</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token string">'Sheep'</span> <span class="token punctuation">,</span> <span class="token string">'Wolf'</span> <span class="token punctuation">]</span> <span class="token punctuation">]</span> <span class="token punctuation">.</span> <span class="token function">flat</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token comment">//[ 'Dog', 'Sheep', 'Wolf' ]</span> |
By default the function will only “flat” one way, you can add param to set the number of dimensions you want. You can set infinity
to flat all dimensions:
1 2 3 4 5 6 7 | <span class="token punctuation">[</span> <span class="token string">'Dog'</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token string">'Sheep'</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token string">'Wolf'</span> <span class="token punctuation">]</span> <span class="token punctuation">]</span> <span class="token punctuation">]</span> <span class="token punctuation">.</span> <span class="token function">flat</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token comment">//[ 'Dog', 'Sheep', [ 'Wolf' ] ]</span> <span class="token punctuation">[</span> <span class="token string">'Dog'</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token string">'Sheep'</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token string">'Wolf'</span> <span class="token punctuation">]</span> <span class="token punctuation">]</span> <span class="token punctuation">]</span> <span class="token punctuation">.</span> <span class="token function">flat</span> <span class="token punctuation">(</span> <span class="token number">2</span> <span class="token punctuation">)</span> <span class="token comment">//[ 'Dog', 'Sheep', 'Wolf' ]</span> <span class="token punctuation">[</span> <span class="token string">'Dog'</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token string">'Sheep'</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token string">'Wolf'</span> <span class="token punctuation">]</span> <span class="token punctuation">]</span> <span class="token punctuation">]</span> <span class="token punctuation">.</span> <span class="token function">flat</span> <span class="token punctuation">(</span> <span class="token number">Infinity</span> <span class="token punctuation">)</span> <span class="token comment">//[ 'Dog', 'Sheep', 'Wolf' ]</span> |
You must be familiar with the array map()
method of arrays. As you know, it is used to execute a certain function on each element of the array.
flatMap()
is a new instance method of an associative array between flat()
and map()
. This is useful when running a function that returns an array but wants the array to be flat:
1 2 3 4 5 | <span class="token punctuation">[</span> <span class="token string">'My dog'</span> <span class="token punctuation">,</span> <span class="token string">'is awesome'</span> <span class="token punctuation">]</span> <span class="token punctuation">.</span> <span class="token function">map</span> <span class="token punctuation">(</span> words <span class="token operator">=></span> words <span class="token punctuation">.</span> <span class="token function">split</span> <span class="token punctuation">(</span> <span class="token string">' '</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token comment">//[ [ 'My', 'dog' ], [ 'is', 'awesome' ] ]</span> <span class="token punctuation">[</span> <span class="token string">'My dog'</span> <span class="token punctuation">,</span> <span class="token string">'is awesome'</span> <span class="token punctuation">]</span> <span class="token punctuation">.</span> <span class="token function">flatMap</span> <span class="token punctuation">(</span> words <span class="token operator">=></span> words <span class="token punctuation">.</span> <span class="token function">split</span> <span class="token punctuation">(</span> <span class="token string">' '</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token comment">//[ 'My', 'dog', 'is', 'awesome' ]</span> |
Optional catch
Previously, when using try/catch
you always had to write:
1 2 3 4 5 6 | <span class="token keyword">try</span> <span class="token punctuation">{</span> <span class="token comment">//..</span> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span> e <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">//handle error</span> <span class="token punctuation">}</span> |
even if you don’t need to use e
to handle errors. Now you can remove it if you don’t need it:
1 2 3 4 5 6 | <span class="token keyword">try</span> <span class="token punctuation">{</span> <span class="token comment">//..</span> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">{</span> <span class="token comment">//handle error</span> <span class="token punctuation">}</span> |
Object.fromEntries ()
Since ES2017, Object has more method entries()
. It returns an array containing all the properties of the object, the return array will be in the form of key and value pairs:
1 2 3 | <span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token punctuation">{</span> name <span class="token punctuation">:</span> <span class="token string">'Fred'</span> <span class="token punctuation">,</span> age <span class="token punctuation">:</span> <span class="token number">87</span> <span class="token punctuation">}</span> Object <span class="token punctuation">.</span> <span class="token function">entries</span> <span class="token punctuation">(</span> person <span class="token punctuation">)</span> <span class="token comment">// [['name', 'Fred'], ['age', 87]]</span> |
ES2019 brings a new method fromEntries()
, used to create a new object from an array of properties:
1 2 3 4 5 6 | <span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token punctuation">{</span> name <span class="token punctuation">:</span> <span class="token string">'Fred'</span> <span class="token punctuation">,</span> age <span class="token punctuation">:</span> <span class="token number">87</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> entries <span class="token operator">=</span> Object <span class="token punctuation">.</span> <span class="token function">entries</span> <span class="token punctuation">(</span> person <span class="token punctuation">)</span> <span class="token keyword">const</span> anotherPerson <span class="token operator">=</span> Object <span class="token punctuation">.</span> <span class="token function">fromEntries</span> <span class="token punctuation">(</span> entries <span class="token punctuation">)</span> person <span class="token operator">!==</span> anotherPerson <span class="token comment">//true </span> |
String.prototype. {TrimStart, trimEnd}
This feature appeared in v8 / Chrome and later it was also standardized in ES2019.
trimStart()
Returns a string whose whitespace has been removed at the beginning of the original string:
1 2 3 4 5 | <span class="token string">'Testing'</span> <span class="token punctuation">.</span> <span class="token function">trimStart</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token comment">//'Testing'</span> <span class="token string">' Testing'</span> <span class="token punctuation">.</span> <span class="token function">trimStart</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token comment">//'Testing'</span> <span class="token string">'Testing '</span> <span class="token punctuation">.</span> <span class="token function">trimStart</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token comment">//'Testing '</span> <span class="token string">' Testing '</span> <span class="token punctuation">.</span> <span class="token function">trimStart</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token comment">//'Testing '</span> |
trimEnd()
Returns a string with spaces removed at the end of the original string:
1 2 3 4 5 | <span class="token string">'Testing'</span> <span class="token punctuation">.</span> <span class="token function">trimEnd</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token comment">//'Testing'</span> <span class="token string">'Testing '</span> <span class="token punctuation">.</span> <span class="token function">trimEnd</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token comment">//' Testing'</span> <span class="token string">' Testing'</span> <span class="token punctuation">.</span> <span class="token function">trimEnd</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token comment">//' Testing'</span> <span class="token string">' Testing '</span> <span class="token punctuation">.</span> <span class="token function">trimEnd</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token comment">//' Testing'</span> |
Symbol.prototype.description
You can now get a description of a symbol by accessing the description
property instead of using the toString()
method:
1 2 3 | <span class="token keyword">const</span> testSymbol <span class="token operator">=</span> <span class="token function">Symbol</span> <span class="token punctuation">(</span> <span class="token string">'Test'</span> <span class="token punctuation">)</span> testSymbol <span class="token punctuation">.</span> description <span class="token comment">// 'Test'</span> |
Improve JSON
Before being improved, if a string contained line characters ( u2028) and text segments ( u2029), when using JSON.parse()
, those characters would be reported as SyntaxError
. Now they can be normal parse.
Fix JSON.stringify () error
Fix JSON.stringify()
output error when handling UTF-8 code points instead (from U + D800 to U + DFFF).
Previously, when calling JSON.stringify()
with alternate code points, it returned an error Unicode character (the “�” character).
Now, those alternative code points can now be represented as strings in a normal way with JSON.stringify()
, and can be converted back to their original form using JSON.parse()
.
Function.prototype.toString ()
The function has an instance method called toString()
returns a string containing the function’s code.
ES2019 changed the return value of this method to avoid removing comments and other characters (such as whitespace), representing the exact code of the declared function.
Previously, the function was declared as follows:
1 2 | <span class="token keyword">function</span> <span class="token comment">/* this is bar */</span> <span class="token function">bar</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> |
The result will look like this:
1 2 | bar <span class="token punctuation">.</span> <span class="token function">toString</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token comment">//'function bar() {}'</span> |
Now the result will look like this:
1 2 | bar <span class="token punctuation">.</span> <span class="token function">toString</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">//'function /* this is bar */ bar() {}'</span> |
(Over)
By the time this article is completed, ES2019 is the latest version of ECMAScript, so I would like to pause the series here. I will try to update when new features are released, thank you for watching in the past.