Array.prototype.{flat,flatMap}
flat() là một instance method mới của array, nó có thể tạo ra mảng một chiều từ một mảng đa chiều.
Ví dụ:
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> |
Mặc định hàm sẽ chỉ “flat” một chiều, bạn có thể thêm param để set số chiều bạn muốn. Bạn có thể set infinity để flat toàn bộ các chiều:
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> |
Chắc hẳn các bạn đã quá quen thuộc với method map() của mảng. Như các bạn đã biết, nó được dùng để thực thi một function nào đó trên mỗi phần tử của mảng.
flatMap() là một instance method mới của mảng kết hợp giữa flat() và map(). Nó sẽ khá hữu dụng khi bạn chạy một hàm trả về một mảng nhưng lại muốn mảng đó được 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
Trước đây, khi sử dụng try/catch bạn luôn phải viết:
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> |
kể cả khi bạn không cần dùng đến e để handle lỗi. Giờ thì bạn có thể loại bỏ nó đi nếu không cần dùng:
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()
Từ ES2017, Object có thêm method entries(). Nó trả về một mảng chứa toàn bộ các thuộc tính của object, mảng trả về sẽ có dạng các cặp key, value:
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 mang tới method mới fromEntries(), dùng để tạo một object mới từ một mảng các thuộc tính:
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}
Tính năng này đã xuất hiện trong v8/Chrome và sau đó nó cũng đã được chuẩn hóa trong ES2019.
trimStart()
Trả về một string đã được xóa các khoảng trắng ở đầu của string gốc:
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()
Trả về một string đã được xóa các khoảng trắng ở cuối của string gốc:
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
Giờ bạn có thể lấy description của một symbol bằng cách truy cập thuộc tính description thay vì phải dùng method toString():
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> |
Cải tiến JSON
Trước khi được cải tiến, nếu trong một string có các kí tự phân dòng (u2028) và phân đoạn văn bản (u2029) thì khi dùng JSON.parse(), những kí tự đó sẽ bị báo SyntaxError. Giờ thì chúng đã có thể được parse bình thường.
Sửa lỗi của JSON.stringify()
Sửa lỗi output của JSON.stringify() khi xử lý các code point UTF-8 thay thế (từ U+D800 đến U+DFFF).
Trước đây, khi gọi JSON.stringify() với các code point thay thế thì nó sẽ trả về một ký tự Unicode lỗi (ký tự “�”).
Giờ đây, những code point thay thế đó đã có thể được thể hiện dưới dạng string một cách bình thường bằng JSON.stringify(), và có thể biến đổi lại dạng ban đầu của chúng bằng JSON.parse().
Function.prototype.toString()
Function có một instance method là toString() trả về một đoạn string chứa code của function.
ES2019 đã thay đổi giá trị trả về của method này nhằm tránh việc loại bỏ comment và các kí tự khác (ví dụ như khoảng trắng), thể hiện chính xác code của hàm đã được khai báo ra.
Trước đây, với hàm được khai báo như sau:
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> |
kết quả sẽ như sau:
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> |
còn giờ thì kết quả sẽ như sau:
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> |
(Hết)
Đến thời điểm bài viết này hoàn thành thì ES2019 là phiên bản mới nhất của ECMAScript, vì vậy mình xin tạm dừng series tại đây. Mình sẽ cố gắng cập nhật khi các tính năng mới được phát hành, cảm ơn các bạn đã theo dõi trong thời gian qua. 