JavaScript ngày càng phát triển, và ES6 (ECMAScript 2015) đã mang đến những tính năng mạnh mẽ, giúp lập trình viên tối ưu hóa mã nguồn và tăng hiệu suất. Trong bài viết này, hãy cùng Aptech Saigon đào sâu vào những tính năng quan trọng như template literals, arrow functions, let và const, destructuring assignment, rest parameters, spread syntax, cũng như classes và module.
Trước khi ES6 xuất hiện, việc nối chuỗi trong JavaScript thường gặp khó khăn. Template literals giải quyết vấn đề này bằng cách sử dụng backticks (`) để định nghĩa chuỗi. Điều này không chỉ làm cho mã nguồn dễ đọc hơn mà còn mở rộng khả năng tương tác với biểu thức nhúng.
const name = "John";
const greeting = `Hello, ${name}!`;
console.log(greeting); // Output: Hello, John!
Arrow functions cung cấp cú pháp ngắn gọn cho việc định nghĩa hàm, đồng thời giữ ngữ cảnh (context) của "this" nơi chúng được khai báo. Điều này giúp tránh những vấn đề phổ biến với hàm thông thường.
const add = (a, b) => a + b;
console.log(add(2, 3)); // Output: 5
ES6 giới thiệu let và const để quản lý phạm vi của biến. Sự khác biệt chính giữa chúng là const không thể gán lại giá trị sau khi đã được khởi tạo, trong khi let có thể.
let x = 5;
x = 10; // Hợp lệ
const y = 20;
y = 30; // Lỗi: Assignment to constant variable
Destructuring assignment giúp trích xuất giá trị từ mảng hoặc đối tượng một cách nhanh chóng và thuận tiện.
const numbers = [1, 2, 3];
const [a, b, c] = numbers;
console.log(a, b, c); // Output: 1 2 3
const person = { name: "Alice", age: 30 };
const { name, age } = person;
console.log(name, age); // Output: Alice 30
Rest parameters và spread syntax giúp làm cho việc quản lý tham số trở nên linh hoạt và tiện lợi hơn.
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // Output: 10
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // Output: [1, 2, 3, 4, 5, 6]
ES6 giới thiệu khái niệm lập trình hướng đối tượng với classes, giúp tổ chức mã nguồn một cách rõ ràng hơn. Module cung cấp cách để tách biệt chức năng của ứng dụng thành các phần nhỏ, giúp quản lý dự án dễ dàng hơn.
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a sound.`);
}
}
const dog = new Animal("Dog");
dog.speak(); // Output: Dog makes a sound.
// file1.js
export const x = 10;
// file2.js
import { x } from './file1';
console.log(x); // Output: 10
ES6 mở ra một thế giới mới của JavaScript với những tính năng mạnh mẽ. Qua bài viết này, bạn đã hiểu rõ hơn về cách sử dụng template literals, arrow functions, let và const, destructuring assignment, rest parameters, spread syntax, cũng như classes và module. Hãy áp dụng chúng vào mã nguồn của bạn để tận dụng tối đa sức mạnh của JavaScript hiện đại.
Đăng ký tư vấn miễn phí
