ES2019 có gì mới?

0
24

Hàng năm kể từ năm 2015, các tính năng ECMAScript mới được phát hành. Tạo một tiêu chuẩn ECMAScript mới có bốn giai đoạn, từ giai đoạn 0 đến giai đoạn 3, chủ yếu là lập kế hoạch, và dự thảo và giai đoạn 4 là giai đoạn cuối cùng, phát hành.

Bạn đã có thể sử dụng các tính năng mới nhất trong Google Chrome phiên bản 72. Hãy cùng xem xét chính xác ES2019 mang lại cho chúng ta những gì dưới đây:

  • Object.fromEntries(),
  • trimStart() và trimEnd(),
  • flat(),
  • flatMap(),
  • Thuộc tính mô tả đối tượng Symbol,
  • Tùy chọn ràng buộc Catch,
  • JSON.stringify,

Hãy cùng nhau đi từng bước một và xem xem chúng ta có thể sử dụng các tính năng mới của ES2019 này như thế nào.

ES2019 có gì mới?

1. Object.fromEntries()

Chuyển đổi dữ liệu trong Javascript là việc rất phổ biến và hầu như mọi bản cập nhật của ECMAScript đều mang đến những phương pháp mới, đơn giản hơn để làm việc này.

Trong ES2017, chúng ta có một phương thức mới Object.entries(), được sử dụng để chuyển đổi các đối tượng thành mảng.

Nhưng làm ngược lại thì chẳng có cách nào để chuyển đổi mảng cặp key – value thành một đối tượng với một phương thức đơn giản.

Và đây là, ES2019 mang đến cho chúng ta tính năng mới là Object.fromEntries(), tính năng này cho phép chuyển đổi một loạt các cặp key – value trị thành một đối tượng.

Hãy cùng kiểm tra cách thức mà bạn có thể hoàn nguyên phương thức Object.entries bằng tính năng mới ES2019, Object.fromEntries():

var car = {
make: 'Volvo',
seats: 4,
year: 2018,
}

console.log(Object.entries(car)); // [['make', 'Volvo], ['seats', 4], ['year', 2018]];

var carArr = [['make', 'Volvo'], ['seats', 4], ['year', 2018]];
console.log(Object.fromEntries(carArr)); // { make: 'Volvo', seats: 4, year: 2018 };

Từ đoạn mã trên, chúng ta có thể thấy rằng bây giờ việc đảo ngược kết quả Object.entries là rất dễ dàng.

2. trimStart() và trimEnd()

Thao tác với chuỗi rất phổ biến khi làm việc với Javascript ở phía front end. Đôi khi chúng ta cần điều chỉnh các chuỗi thành định dạng cần thiết hoặc chúng ta cần cắt bớt một phần của chuỗi.

ES2019 mang đến cho chúng ta hai tính năng hữu ích có thể được sử dụng cho mục đích này: trimStart()trimEnd(). Phương thức trimStart() loại bỏ các khoảng trắng từ đầu chuỗi và rõ ràng trimEnd() cắt các khoảng trắng từ cuối chuỗi.

Hãy cùng xem một ví dụ về mã:

var string = '    string to trim     ';

console.log(string.trimStart()); // 'string to trim     '
console.log(string.trimEnd()); // '    string to trim'

Cái này có vẻ khá đơn giản phải không?

3. Phương thức flat()

Phương thức array.flat() mới tạo ra một mảng mới với các phần tử mảng con được thu thập theo cách đệ quy cho đến độ sâu cụ thể.

Độ sâu là mặc định là 1, nhưng nó có thể được đặt làm tham số hoặc có thể được đặt thành Infinity để đảm bảo rằng tất cả các mảng con sẽ được làm phẳng.

Hãy để xem một ví dụ:

var array = [1, 2, [4, 4, [4, 7, [20, 1]]]];

console.log(array.flat()); // [1, 2, 4, 4, [4, 7, [20, 1]]]; 
console.log(array.flat(2)); // [1, 2, 4, 4, 4, 7, [20, 1]];
console.log(arra.flat(Infinity)); // [1, 2, 4, 4, 4, 7, 20, 1];

Trong lần sử dụng đầu tiên của phương thức .flat(), nó chỉ thu thập mảng 1 cấp vì đây là độ sâu mặc định.

Trong một console.log khác, mình đã xác định hai độ sâu và nó thu thập các mảng con hai cấp và console.log cuối cùng chúng ta đặt mức độ sâu thành Infinity và nó thu thập tất cả các cấp độ của mảng.

4. Phương thức flatMap()

Nếu bạn thường xuyên làm việc với mảng, có thể bạn biết phương thức .map() hữu ích như thế nào, nó cho phép lặp qua mảng và thực hiện bất kỳ function nào trên mọi phần tử. Phương thức .flatMap() là sự kết hợp của .map().flat().

Hãy cùng xem một ví dụ sử dụng flatMap():

var array = [1, 23, [10, 43]];
console.log(array.flatMap(item => item + 2)); // [3, 25, 12, 45];

Có vẻ như flatMap() là một phương thức rất hữu ích.

5. Thuộc tính mô tả đối tượng Symbol

Symbol được giới thiệu là một tính năng mới trong ES6. Mô tả trong Symbols được thêm chủ yếu cho mục đích gỡ lỗi, nhưng cho đến bây giờ các lập trình viên đã phải chuyển đổi mô tả đó thành chuỗi để có thể truy cập mô tả với console.log.

Bây giờ với phiên bản từ năm 2019, có thể truy cập mô tả bằng symbol.description.

var symbolDesc = 'This is Symbol';
var symbolObj = Symbol(symbolDesc);

console.log(symbolObj.description); // 'This is Symbol';

6. Tùy chọn ràng buộc Catch

Rất nhiều lập trình viên sử dụng câu lệnh try Catch và cho đến bây giờ việc sử dụng ràng buộc trong Catch là cần thiết để tránh SyntaxError, nhưng trong ES2019 thì đã khác.

Hãy cùng xem một ví dụ trước ES2019:

try {
  ...
} catch (value) {
  ...
}

Sau ES2019:

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

Trong ví dụ trên, chúng ta có thể thấy value trong câu lệnh Catch là không cần thiết, và trong trường hợp này, với phiên bản ECMAScript mới nhất bạn có thể bỏ qua nó.

7. JSON.stringify

Việc sử dụng JSON.strignify khá phổ biến khi sử dụng Javascript.

Thay đổi này trong ES2019 đã được giới thiệu để ngăn phương thức JSON.opesify() trả về các chuỗi Unicode không định dạng.

Bây giờ JSON.opesify() sẽ trình bày các điểm code thay thế dưới dạng chuỗi và trong khi chúng ta sử dụng JSON.parse(), nó sẽ được chuyển đổi thành biểu diễn ban đầu.

JSON.stringify('\uDF06\uD834'); // '"\\udf06\\ud834"'
JSON.stringify('\uDEAD'); // '"\\udead"'

Lời kết

ES2019 mang đến cho chúng ta rất nhiều tính năng hữu ích sẽ giúp quá trình lập trình Javascript của chúng ta dễ chịu hơn nhiều.

Tham khảo:

Chúng ta đã thử qua các phương thức quan trọng nhất: Object.fromEntries(), trimStart()trimEnd(), các phương thức flatMap()FlatMap(), thuộc tính mô tả mới cho Symbol, tùy chọn ràng buộc Catch và Siêu dữ liệu JSON.opesify().

Hi vọng bài viết này giúp ích cho bạn.

DevNET

LEAVE A REPLY

Please enter your comment!
Please enter your name here