Not long ago, ECMAScript 2019 (or ES2019) was released to the public. In it, the dev brothers are also looking forward to see what is new and superior to the old versions, as well as when these features can be used on browsers. In this article, I list three features that are supported on the latest versions of Firefox and Chrome. That means developers can use these features now.
1. Object.fromEntries ()
Converting from Object to Array is relatively easy, because Javascript’s default Object object provides us with an entry entries() or Object.entries() . For example:
1 2 3 4 5 | <span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> one <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> two <span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">,</span> three <span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> Object <span class="token punctuation">.</span> <span class="token function">entries</span> <span class="token punctuation">(</span> obj <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// => [["one", 1], ["two", 2], ["three", 3]]</span> |
But what if we want to convert an Array back to an Object (or vice versa)? There are several Javascript libraries that have assisted us in this, such as _.fromPairs() ‘s _.fromPairs _.fromPairs() method . However, downloading a large library just to use a feature has never been a good idea. Understanding this problem, the latest version of Javascript (ES2019) has added a new method that we can convert from Array to Object that is Object.fromEntries() :
1 2 3 4 5 | <span class="token keyword">const</span> myArray <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">[</span> <span class="token string">'one'</span> <span class="token punctuation">,</span> <span class="token number">1</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token string">'two'</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token string">'three'</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">]</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> Object <span class="token punctuation">.</span> <span class="token function">fromEntries</span> <span class="token punctuation">(</span> myArray <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// => {one: 1, two: 2, three: 3}</span> |
2. trimStart () and trimEnd ()
Javascript provides us with a method called trim() , which allows us to remove leading and trailing spaces from a string:
1 2 3 4 5 | <span class="token keyword">const</span> str <span class="token operator">=</span> <span class="token string">" Hello World! "</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> str <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// => "Hello World!"</span> |
However, sometimes we just want to remove the space at the beginning (or at the end) of that string. Now, we can use trimStart() and trimEnd() with trimStart() remove the leading space and trimEnd() remove the space at the end of the string. For example:
1 2 3 4 | <span class="token keyword">const</span> str <span class="token operator">=</span> <span class="token string">" Hello World! "</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> str <span class="token punctuation">.</span> <span class="token function">trimStart</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// => "Hello World! "</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> str <span class="token punctuation">.</span> <span class="token function">trimEnd</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// => " Hello World!"</span> |
3. flat () and flatMap ()
The flat() allows us to reduce the number of levels of a multidimensional array (an array containing other arrays). It takes the input parameter that is the maximum number of levels we want to reduce from the original, the default is 1. The flat() will reduce the number of arrays of the array by 1 and flat(2) will reduce the number of levels. of the array down 2 acute from the root.
1 2 3 4 5 6 | <span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">10</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token number">20</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token number">30</span> <span class="token punctuation">]</span> <span class="token punctuation">]</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> arr <span class="token punctuation">.</span> <span class="token function">flat</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// => [10, 20, [30]]</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> arr <span class="token punctuation">.</span> <span class="token function">flat</span> <span class="token punctuation">(</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// => [10, 20, [30]]</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> arr <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 punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// => [10, 20, 30]</span> |
Besides, flat() also helps us remove empty elements in the array:
1 2 3 4 5 6 | <span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">'a'</span> <span class="token punctuation">,</span> <span class="token punctuation">,</span> <span class="token punctuation">,</span> <span class="token string">'b'</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token string">'c'</span> <span class="token punctuation">,</span> <span class="token string">'d'</span> <span class="token punctuation">]</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> flattened <span class="token operator">=</span> arr <span class="token punctuation">.</span> <span class="token function">flat</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> flattened <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// => ["a", "b", "c", "d"]</span> |
In addition, we also have the method flatMap() , a combination of map() and flat() . First, flatMap() creates a new array with values taken from a given array, and then it decreases the array’s number of levels. For example:
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">[</span> <span class="token number">7</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token number">8</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token number">9</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token number">10</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token number">11</span> <span class="token punctuation">]</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> flattened <span class="token operator">=</span> arr <span class="token punctuation">.</span> <span class="token function">flatMap</span> <span class="token punctuation">(</span> value <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> value <span class="token operator"><</span> <span class="token number">10</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> value <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> flattened <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// => [7, 8, 9]</span> |
Reference: https://blog.logrocket.com/5-es2019-features-you-can-use-today/