ES6 JavaScript: Tất cả tính năng quan trọng bạn cần biết
ES6 (ECMAScript 2015) là bản cập nhật lớn nhất của JavaScript, mang lại hàng loạt cú pháp mới giúp code ngắn gọn, dễ đọc và mạnh mẽ hơn nhiều. Nếu bạn học JavaScript hôm nay, ES6 là tiêu chuẩn – không phải tùy chọn.
let và const – Thay thế var
// var – vấn đề: function scope, bị hoisting
var x = 10;
if (true) {
var x = 20; // ghi đè biến x bên ngoài!
}
console.log(x); // 20 – kết quả không mong muốn
// let – block scope, có thể gán lại
let y = 10;
if (true) {
let y = 20; // y riêng trong block này
}
console.log(y); // 10 – đúng rồi
// const – block scope, KHÔNG thể gán lại
const PI = 3.14159;
// PI = 3; // TypeError!
// Quy tắc: Dùng const mặc định, dùng let khi cần gán lại
Arrow Function – Hàm mũi tên
// ES5
function add(a, b) {
return a + b;
}
// ES6 – Arrow Function
const add = (a, b) => a + b;
const double = x => x * 2;
const greet = () => "Xin chào!";
// Thân hàm nhiều dòng
const getInfo = (name, age) => {
const message = `${name}, ${age} tuổi`;
return message;
};
// Dùng với map/filter
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2); // [2, 4, 6, 8, 10]
const evens = numbers.filter(n => n % 2 === 0); // [2, 4]
Template Literal
const name = "An";
const age = 22;
// ES5
const msg1 = "Xin chào, tôi là " + name + ", " + age + " tuổi.";
// ES6 – Template Literal
const msg2 = `Xin chào, tôi là ${name}, ${age} tuổi.`;
// Multiline
const html = `
<div>
<h1>${name}</h1>
<p>${age} tuổi</p>
</div>
`;
// Biểu thức bên trong ${}
const price = 100000;
console.log(`Giá sau thuế: ${price * 1.1} VND`);
Destructuring
// Array Destructuring
const [a, b, c] = [1, 2, 3];
const [first, , third] = [10, 20, 30]; // bỏ qua phần tử
const [head, ...tail] = [1, 2, 3, 4, 5];
// Object Destructuring
const person = { name: "An", age: 22, city: "HN" };
const { name, age } = person;
const { name: fullName, phone = "Chưa có" } = person;
Spread và Rest Operator
// Spread: mở rộng array/object
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const merged = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
const obj1 = { a: 1 };
const obj2 = { b: 2 };
const combined = { ...obj1, ...obj2 }; // { a: 1, b: 2 }
// Rest: gom các tham số còn lại
function sum(...numbers) {
return numbers.reduce((acc, n) => acc + n, 0);
}
console.log(sum(1, 2, 3, 4, 5)); // 15
Default Parameters
// ES6 – rõ ràng hơn
const greet = (name = "bạn") => `Xin chào, ${name}`;
greet(); // "Xin chào, bạn"
greet("An"); // "Xin chào, An"
function createUser(name, role = "user", active = true) {
return { name, role, active };
}
createUser("An"); // { name: "An", role: "user", active: true }
Class – Lập trình hướng đối tượng
class Animal {
constructor(name, sound) {
this.name = name;
this.sound = sound;
}
speak() {
return `${this.name} kêu ${this.sound}`;
}
}
// Kế thừa với extends
class Dog extends Animal {
constructor(name) {
super(name, "gâu gâu");
}
fetch() {
return `${this.name} đang đi lấy bóng`;
}
}
const dog = new Dog("Buddy");
dog.speak(); // "Buddy kêu gâu gâu"
dog.fetch(); // "Buddy đang đi lấy bóng"
Module – import và export
// math.js – xuất functions
export const PI = 3.14159;
export function add(a, b) { return a + b; }
export default function multiply(a, b) { return a * b; }
// main.js – nhập và dùng
import multiply, { PI, add } from './math.js';
import * as math from './math.js'; // import tất cả
Bảng tổng hợp các tính năng ES6
| Tính năng | Trước ES6 | ES6 |
|---|---|---|
| Khai báo biến | var | let, const |
| Hàm | function() {} | () => {} |
| Nối chuỗi | "Hi " + name | `Hi ${name}` |
| Gán từ object | const x = obj.x | const { x } = obj |
| Gộp array | arr1.concat(arr2) | [...arr1, ...arr2] |
| OOP | function + prototype | class + extends |
| Module | require() (CommonJS) | import/export |
