If you haven’t learned ES6 yet, take a look at this.

Mở đầu

Chào các bạn đọc giả thân mến. Trong phạm vi bài viết này, mình sẽ chia sẻ tổng quan những kiến thức, hiểu biết của mình về những tính năng, cú pháp mới trong ES6 hay còn được gọi với một cái tên khác là ES2015.

1. Variable declaration (Khai báo biến: var, let, const)

Trong Javascript có 3 kiểu khai báo biến. Đó là var, letconst. Nhìn chung, các biến được khai báo với từ khóa const không được phép gán lại (reassigned). Trong khi đó, varlet có thể. Ví dụ

const person = "sydinh";
person = "syhiep"; // Error, person trong trường hợp này không thể reassigned
let person = "sydinh";
person = "syhiep";
console.log(person); // "syhiep", person trong trường hợp này có thể được gán lại

2. Arrow function (Hàm mũi tên)

Phiên bản Javascript ES6 giới thiệu các hàm mũi tên, đây là một cách khác để khai báo và sử dụng các hàm (functions). Dưới đây là những lợi ích mà nó mang lại:

  • Xúc tích, ngắn gọn, rõ ràng (Concise)
  • Đối tượng this được pick up từ vùng, bối cảnh xung quanh
  • Không còn return

Ví dụ

function foobar(xxx) { return xxx; }; // Cách truyền thống
console.log(foobar('18+')); // 18+
const foobar = xxx => xxx; // Function trên được viết lại với hàm mũi tên
console.log(foobar('18+')); // 18+

Với arrow funciton. Về cơ bản, bạn không cần phải làm những thủ thuật kiểu như that = this (cái đó = cái này) trước khi gọi một function bên trong một function nữa.

3. Function default parameter value (Giá trị tham số mặc định)

Bắt đầu từ Javascript ES6, bạn có thể thiết lập giá trị mặc định cho các tham số của hàm bằng cách sử dụng cú pháp sau:

function foobar(xxx = '18+') { return xxx; };
console.log(foobar()); // 18+, Do không có giá trị được cung cấp, vì vậy xxx nhận vào giá trị mặc định được gán trong foobar function
console.log(foobar('16+')); // 16+,  Giá trị được cung cấp, vì vậy xxx = "16+"
console.log(foobar(undefined)); // 18+,  Trường hợp này xxx sẽ nhận vào giá trị mặc định
console.log(foobar(null)); // null, Nếu chúng ta truyền vào giá trị tham số bằng null, giá trị của tham số mặc định sẽ ko được áp dụng

4. Destructuring objects and arrays (Tái cấu trúc đối tượng và mảng)

Destructuring là một cách tạo mới biến bằng cách trích xuất một vài giá trị từ dữ liệu được lưu trữ trong các đối tượng hoặc mảng. Ví dụ Object

const person = {
    firstName: "Sy",
    lastName: "Dinh",
    age: 21,
};

Không sử dụng Destructuring

const first_name = person.firstName;
const last_name = person.lastName;

Trường hợp sử dụng Destructuring

const { firstName: first_name, lastName: last_name } = person;
console.log(first_name); // Sy, một biến mới được tạo và bằng với person.firstName
console.log(last_name); // Dinh, last_name = person.lastName
console.log(firstName); // Undefined, firstName chưa được định nghĩa

Destructuring thường được sử dụng để tái cấu trúc tham số là object trong hàm. Không sử dụng Destructuring

function getFullName(person) {
    const firstName = person.firstName;
    const lastName = person.lastName;
    return firstName + ' ' + lastName;
};
getFullName(person); 
// "Sy Dinh"

Sử dụng Destructuring. Chúng ta có một function ngắn gọn hơn

function getFullName({ firstName, lastName }) {
    return firstName + ' ' + lastName;
};
getFullName(person); 
// "Sy Dinh"

Destructuring kết hợp với hàm mũi tên

const getFullName = ({ firstName, lastName }) => firstName + ' ' + lastName;
getFullName(person); 
// "Sy Dinh"

Destructuring với Array cũng khá tương tự. Các bạn tự tìm hiểu thêm nhé.

5. Array methods (Các phương thức làm việc với mảng - map / filter / reduce)

  • Array.prototype.map() nhận vào một mảng và trả về một mảng mới với các phần tử đã được chuyển đổi.
  • Array.prototype.filter() nhận vào một mảng và trả về một mảng mới với các phần tử thỏa mãn điều kiện bên trong hàm.

Ví dụ

const initArray = [0, 1, 2, 3, 4, 5];
const mapArray = initArray.map(n => n * 2); // [0, 2, 4, 6, 8, 10]
const filterArray = initArray.filter(n => n % 2 === 0); // [0, 2, 4]

6. Template literals

Ví dụ

const name = "Sy";
`My name is ${name}, I'm ${20 + 1} years old!`;
// "My name is Sy, I'm 21 years old!"

ES2015 giới thiệu rất nhiều khái niệm khác nữa, mình có thể kể đến như:

  • Spread operator "..." (Toán tử dấu 3 chấm)
  • Imports / Exports
  • Class
  • ...

Phần vì chưa thật sự hiểu sâu nên trong phạm vi bài viết này mình chỉ có thể chia sẻ đến đây thôi. Hi vọng, phần nào giúp ích được các bạn. Chúc các bạn học tốt!

Tài liệu chính thức có tại: http://es6-features.org

Thân ái,

Sy Dinh