ES8: Có gì mới trong ngôn ngữ JavaScript vào năm 2017

Giới thiệu:

Ecmascript8 hay Ecmascript2017 đã được phát hành vào cuối tháng 6 bởi TC39. Bài viết này sẽ giới thiệu các tính năng chính, mới được thêm vào trong ES8 thông qua các ví dụ.

ES8 đang hoạt động! Phát hành đầu mùa hè này, ES8 (còn gọi là ES2017) cung cấp cách mã hóa mới với JavaScript. Hãy khám phá chúng.

Nếu bạn có phiên bản Chrome mới nhất, mở bảng điều khiển và hãy cùng nhau mã hóa.

Object.values()

Truy cập tất cả các giá trị của đối tượng của chúng tôi mà không có bất kỳ phức tạp.

Đây là một ví dụ:

const countries = {
    BR: 'Brazil',
    DE: 'Germany',
    RO: 'Romania',
    US: 'United States of America'
};

Object.values(countries); // ['Brazil', 'Germany', 'Romania', 'United States of America']

Object.entries

Biến thuộc tính đối tượng của bạn trong một mảng các thuộc tính:

const countries = {
    BR: 'Brazil',
    DE: 'Germany',
    RO: 'Romania',
    US: 'United States of America'
};

Object.entries(countries); 

// [['BR', 'Brazil'], ['DE', 'Germany'], ['RO', 'Romania'], ['US','United States of America']]

String padding (padStart and padEnd)

Điều này trả về chuỗi thông qua thêm pad và bắt đầu hoặc ở cuối của nó. Định nghĩa chức năng là:

'string'.padStart(targetLength, padString)

'string'.padEnd(targetLength, padString)

Chúng ta có thể:

'0.10'.padStart(10); // it return a string of length 10, padding empty spaces in the beginning

'hi'.padStart(1);            // 'hi'
'hi'.padStart(5);            // '   hi'
'hi'.padStart(5, 'abcd');    // 'abchi'
'hi'.padStart(10, 'abcd');   // 'abcdabcdhi'

'loading'.padEnd(10, '.');   // 'loading...'

// useful example making things easier to read
'0.10'.padStart(12);         // '       0.10'
'23.10'.padStart(12);        // '      23.10'
'12,330.10'.padStart(12);    // '  12,330.10'

Object.getOwnPropertyDescriptors()

Nó trả về tất cả các descriptor thuộc tính (không phải là thừa kế) của một đối tượng. Các thuộc tính của đối tượng trả về có thể là: value, writable, get, set, configurable and enumerable.

const obj = {
    name: 'Pablo',
    get foo() { return 42; }
};

Object.getOwnPropertyDescriptors(obj);
//
// {
//  "name": {
//     "value": "Pablo",
//     "writable":true,
//     "enumerable":true,
//     "configurable":true
//  },
//  "foo":{
//     "enumerable":true,
//     "configurable":true,
//     "get": function foo()
//     "set": undefined
//  }
// }

Một ví dụ thực tế là: JavaScript có một phương pháp sao chép thuộc tính Object.assign (). Nó sao chép các property có key là key. Như thế này:

const value = source[key]; // get
target[key] = value;       // set

Và trong một số trường hợp nó không thành công vì nó không đúng cách sao chép các thuộc tính với các thuộc tính không mặc định như getters, setters và các thuộc tính không thể ghi.

Ví dụ:

const objTarget = {};
const objSource = {
    set greet(name) { console.log('hey, ' + name); }
};
Object.assign(objTarget, objSource);

objTarget.greet = 'love';     // trying to set fails, sets greet = 'love'

Giải quyết:

const objTarget = {};
const objSource = {
    set greet(name) { console.log('hey, ' + name); }
};
Object.defineProperties(objTarget,          
           Object.getOwnPropertyDescriptors(objSource));

objTarget.greet = 'love'; // prints 'hey, love'

Trailing commas in function parameter lists and calls

Đây là một sự thay đổi cú pháp. Nó cho phép chúng ta viết một khai báo chức năng hợp lệ với dấu phẩy cuối cùng.

getDescription(name, age,) { ... }

Async functions (async and await)

Điều này làm cho nó dễ dàng hơn để làm việc với các chức năng không đồng bộ:

function loadExternalContent() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('hello');
        }, 3000);
    });
}

async function getContent() {
    const text = await loadExternalContent();
    console.log(text);
}

console.log('it will call function');
getContent();
console.log('it called function');

// it prints:

'it will call function' // synchronous
'it called function'    // synchronous
'hello'                 // asynchronous (after 3 seconds)

Tổng kết:

Ở trên là những tính năng mà mình nghĩ là rất hay được bổ sung trong ES8. Ngoài ra còn rất nhiều những tính năng khác nữa các bạn có thể tìm hiểu thêm.

Tham khảo:

https://www.ecma-international.org/ecma-262/7.0/#

https://medium.freecodecamp.org/es8-the-new-features-of-javascript-7506210a1a22