Những tính năng mới trong ES10 (ECMAScript 2019)

Bày viết này mình sẽ không giới thiệu nhiều về ECMA (ai không biết có thể tìm hiểu tại đây) mà mình sẽ nói luôn các tính năng mới trong ES10 (ECMAScript 2019).

Chú ý: bạn cần update trình duyệt lên phiên bản mới nhất, mới có thể sử dụng được những tính năng này

1. Array.flat().

Phương thức này cho phép chúng ta tạo ra mảng mới với các phần tử của các mảng con.

var arr = [1, 2, 3, 4, [5, 6, [7, 8, 9]]];

console.log(arr.flat()); // [1, 2, 3, 4, 5, 6, [7, 8, 9]]
console.log(arr.flat()); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

Chạy Code

2. Array.flatMap().

Phương thức này tương tự như phương thức map nhưng nó sẽ đồng thời flat luôn mảng kết quả.

var arr = [1, 2, 3, 4, 5];

arrMap = arr.map(cur => [cur, cur + 2]);
console.log(arrMap); // [[1, 3], [2, 4], [3, 5], [4, 6], [5, 7]]

arrFlatMap = arr.flatMap(cur => [cur, cur + 2]);
console.log(arrFlatMap); // [1, 3, 2, 4, 3, 5, 4, 6, 5, 7]

Chạy Code

3. Object.fromEntries().

Phương thức này cho phép chúng ta chuyển đổi một Array hoặc Map sang một object với object key là phần tử đầu của mảng và value là phần tử tiếp theo của mảng.

VD: đối với mảng

var arr = [['name', "Vu Thanh Tai"], ['blog', 'https://toidicode.com']];
var entries = Object.fromEntries(arr);

console.log(entries);
// {name: "Vu Thanh Tai", blog: "https://toidicode.com"}

Chạy Code

VD: Đối với Map.

var arr = new Map([
    ['name', "Vu Thanh Tai"],
    ['blog', 'https://toidicode.com']
]);
var entries = Object.fromEntries(arr);

console.log(entries);
// {name: "Vu Thanh Tai", blog: "https://toidicode.com"}

Chạy Code

VD: bạn có thể chuyển đổi qua lại với phương thức Object.entries()

var obj = {
    name: "Vu Thanh Tai",
    blog: "https://toidicode.com"
};

var arr = Object.entries(obj);
console.log(arr);
// [["name", "Vu Thanh Tai"],  ["blog", "https://toidicode.com"]]

var entries = Object.fromEntries(arr);

console.log(entries);
// {name: "Vu Thanh Tai", blog: "https://toidicode.com"}

Chạy Code

4. String.trimStart() và String.trimEnd().

Phương thức trimStart() có tác dụng xóa bỏ khoảng trắng ở đầu chuỗi. Tương tự phương thức trimEnd() có tác dụng xóa bỏ khoảng trắng ở cuối chuỗi.

VD:

var str = "   Toidicode.com    ";

console.log(str.trimStart());
// "Toidicode.com   "

console.log(str.trimEnd());
// "   Toidicode.com"

Chạy Code

5. Function.toString().

Phuơng thức này sẽ chuyển đổi tất cả mã nguồn của hàm về dạng string.

VD:

function say(name) {
    // this is comment
    return `name ${name}`;
}

console.log(say.toString());
/*
function say(name) {
    // this is comment
    return `name ${name}`;
}
*/

Chạy Code

6. Symbol.description.

Thuộc tính này lấy ra mô tả của Symbol Object.

VD:

var site = 'Toidicode.com';

var sym = Symbol(site);

console.log(sym); // Symbol(Toidicode.com)
console.log(String(sym) === `Symbol(${site})`); // true
console.log(sym.description); // Toidicode.com

Chạy Code

7. Catch tùy chọn.

Bây giờ bạn đã có thể không cần xác định exception trong catch nữa.

VD:

try {
    throw new Error("raise error")
} catch {
    console.log("Catch with none param")
}

// Catch with none param

Chạy Code

8. JSON.Stringifly() hoạt động tốt hơn.

Nếu nhưng trước đây khi sử dụng JSON.Stringifly() hay trả về ill-formed Unicode thì nay nó đã được loại bỏ.

VD:

JSON.stringify('\ud834');
// "\ud834"

Chạy Code

9. Array.sort() ổn định hơn.

Giờ đây chúng ta đã có thể sắp xếp mảng một cách ổn định hơn (trước đây nếu mảng lớn sẽ không được ổn định).

var priceList = [
    {name: 'Lo vi song', price: 10000},
    {name: 'Tran Nhu Nhong', price: 800000},
    {name: 'Nguyen Thi A', price: 240000},
    {name: 'Nguyen Thi B', price: 350000},
    {name: 'Nguyen Thi C', price: 400000},
    {name: 'Beola', price: 20000},
    {name: 'Be De', price: 70000},
    {name: 'Tung Son', price: 300000},
    {name: 'Ngoc Trinh', price: 400000},
    {name: 'Minh Beo', price: 0},
    {name: 'Tram Anh', price: 200000},
];

priceList.sort((a, b) => a.price - b.price);

console.log(priceList)
/*
[
    {name: "Minh Beo", price: 0},
    {name: "Lo vi song", price: 10000},
    {name: "Beola", price: 20000},
    {name: "Be De", price: 70000},
    {name: "Tram Anh", price: 200000},
    {name: "Nguyen Thi A", price: 240000},
    {name: "Tung Son", price: 300000},
    {name: "Nguyen Thi B", price: 350000},
    {name: "Nguyen Thi C", price: 400000},
    {name: "Ngoc Trinh", price: 400000},
    {name: "Tran Nhu Nhong", price: 800000},
 ]
 */

Chạy Code