Chuyên mục
Javascript

6 tính năng tuyệt vời của Javascript ES6

Javascript ES6 mang đến nhiều tính năng mới giúp chúng ta giải quyết công việc một cách hiệu quả, thông minh và thuận tiện hơn. Chúng ta hãy cùng điểm qua 6 tính năng mới của ES6 vô cùng tuyệt vời dưới đây.

Thiết lập Object [key]

Trước đây khi khởi tạo một Object trong Javascript, nếu bạn muốn khai báo một thuộc tính có tên là giá trị của một biến thì phải làm sau khi đã khởi Object:

let tenBien = 'age';
let obj = {
    'name': 'Tung'
};
obj[tenBien] = 20;

Javascript ES6 cung cấp cho chúng ta một cách khởi tạo ngắn gọn hơn:

let tenBien = 'age';
let obj = {
    'name': 'Tung',
    [tenBien]: 20
};

Bằng cách bao tenBien trong cặp ngoặc vuông, chúng ta có thể đưa nó vào trong Object rồi 😉

Arrow Functions

Arrow Functions trong Javascript ES6 giúp chúng ta khai báo hàm một cách ngắn gọn hơn. Ví dụ dưới đây là cách viết một hàm tính bình phương một số theo cách thông thường:

function binhPhuong(a) {
    return a*a;
}

Với Arrow Function, chúng ta có thể viết như sau:

let binhPhuong = (a) => {
    return a*a;
}

Với những hàm chỉ có một dòng return, chúng ta còn có thể viết gọn hơn với Arrow Function:

let binhPhuong = a => a*a;

find và findIndex

Javascript cung cấp cho lập trình viên phương thức Array.prototype.indexOf để tìm kiếm vị trí của một phần tử trong mảng. Tuy nhiên indexOf chỉ cho phép chúng ta tìm kiếm một giá trị cụ thể. findfindIndex cho phép chúng ta tìm kiếm có điều kiện, ví dụ như tìm một phần tử chia hết cho 2.

let arr = [1, 3, 5, 6, 9, 12]
let resultIndex = arr.find( num => num%2 == 0 )  // kết quả là 3 vì phần tử đầu tiên chia hết cho 2 là 6 có index là 3 (bắt đầu từ 0)
let resultValue = arr.findIndex( num => num%2 == 0 )  // kết quả là 6 vì phần tử đầu tiên chia hết cho 2 là 6

Toán tử … (Spread Operator)

Toán tử Spread giúp chúng ta phân tách một mảng hoặc một đối tượng thành các đối số riêng biệt. Chúng ta hãy xem qua ví dụ sau để hiểu rõ hơn:

Ví dụ về Spread Operator với Object

let me = {
    name: 'Tung',
    age: '20'
}
let tungcode = {
    school: 'HaUI'
}
let author = {...me, ...tungcode}
console.log(author) // { name: 'Tung', age: '20', school: 'HaUI' }

Ví dụ về Spread Operator với Array

console.log(Math.min(1, 2, 3, 4, 5, 6)) // 1

let a = [1, 2, 3, 4, 5, 6]
console.log(Math.min(...a)) // 1

let b = [...a, 10, 11]
// b = [1, 2, 3, 4, 5, 6, 10, 11]
console.log(Math.min(...b)) // 1

Template Literals

Trước đây để tạo một string chứa nhiều dòng, chúng ta phải thêm \ vào cuối mỗi dòng để đánh dấu kết thúc dòng. Cú pháp này vừa rối, vừa không đẹp khiến các dev Javascript không hài lòng.

Javascript ES6 cung cấp cho chúng ta Template Literals, giúp tạo string có nhiều dòng với dấu `.

let multiLines = `Chao mung 
cac ban
dang doc
:P
`

let blog = {
    name: 'Tung Code',
    author: 'Tung'
}

let msg = `Welcome to ${blog.name} by ${blog.author}` // Welcome to Tung Code by Tung

Tham số mặc định

Tham số mặc định trong hàm đã được rất nhiều ngôn ngữ hỗ trợ như PHP, Python. Giờ đây Javascript cũng đã tham gia vào cuộc chơi 😛

const xinChao = (name = '') => {
    if(name === '') {
        return 'Hello Guest'
    }
    return `Hello ${name}`
}

console.log(xinChao()) // Hello Guest
console.log(xinChao('Tung')) // Hello Tung

Tổng kết

Trên đây là 6 tính năng trong Javascript mà mình thấy hữu ích nhất. Ngoài ra còn rất nhiều điều thú vị và hữu ích nữa của ES6 mà các bạn nên tìm hiểu tại: http://es6-features.org/

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *