Trong ES6, JavaScript đã giới thiệu nhiều cú pháp mới nhằm tăng tính linh hoạt và tối ưu mã. Ba trong số những cú pháp phổ biến nhất là Destructuring, Rest Parameters, và Spread Syntax. Bài viết này sẽ giúp bạn hiểu rõ từng cú pháp, cách sử dụng, và các ví dụ thực tế.
1.1 Destructuring trong Mảng
Destructuring mảng cho phép bạn trích xuất phần tử từ một mảng vào các biến riêng biệt:
const fruits = ["apple", "banana", "cherry"];
const [first, second, third] = fruits;
console.log(first); // "apple"
console.log(second); // "banana"
console.log(third); // "cherry"
Đặt giá trị mặc định: khi phần tử không tồn tại trong mảng, bạn có thể gán giá trị mặc định.
const [a, b, c = "default"] = ["hello"];
console.log(c); // "default"
Bỏ qua phần tử: Bằng cách dùng dấu phẩy, bạn có thể bỏ qua phần tử.
const [first, , third] = ["a", "b", "c"];
console.log(third); // "c"
1.2 Destructuring trong Object
Với object, Destructuring giúp bạn trích xuất thuộc tính vào các biến nhanh chóng.
const person = { name: "Alice", age: 25, country: "Vietnam" };
const { name, age } = person;
console.log(name); // "Alice"
console.log(age); // 25
Đổi tên biến: Bạn có thể đặt tên mới cho biến khi destructuring
const { name: fullName, age } = person;
console.log(fullName); // "Alice"
Giá trị mặc định: Tương tự mảng, giá trị mặc định được sử dụng khi thuộc tính không tồn tại.
const { gender = "unknown" } = person;
console.log(gender); // "unknown"
1.3 Destructuring trong Hàm
Bạn có thể sử dụng destructuring ngay trong tham số của hàm:
function display({ name, age }) {
console.log(`Name: ${name}, Age: ${age}`);
}
const user = { name: "Bob", age: 30 };
display(user); // "Name: Bob, Age: 30"
2. Rest Parameters
Rest Parameters cho phép bạn thu thập một lượng tham số không giới hạn vào một mảng.
function sum(...numbers) {
return numbers.reduce((acc, curr) => acc + curr, 0);
}
console.log(sum(1, 2, 3, 4)); // 10
Tổng hợp các tham số còn lại: Rest Parameters lấy các tham số còn lại sau các tham số khác.
function display(first, ...others) {
console.log(first); // giá trị đầu tiên
console.log(others); // mảng chứa các giá trị còn lại
}
display(1, 2, 3, 4); // 1, [2, 3, 4]
Lưu ý: Rest Parameters luôn phải đặt ở cuối danh sách tham số của hàm.
3. Spread Syntax
3.1 Spread trong Mảng
Kết hợp mảng: Spread Syntax giúp kết hợp nhiều mảng lại thành một mảng mới.
const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4]
Sao chép mảng: Spread Syntax tạo ra một bản sao độc lập của mảng.
const original = [1, 2, 3];
const copy = [...original];
copy.push(4);
console.log(original); // [1, 2, 3]
console.log(copy); // [1, 2, 3, 4]
3.2 Spread trong Object
Kết hợp object: Spread giúp kết hợp thuộc tính của nhiều object vào một object mới.
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const combinedObj = { ...obj1, ...obj2 };
console.log(combinedObj); // { a: 1, b: 3, c: 4 }
Sao chép object: Tương tự mảng, bạn có thể sao chép object để tạo một bản sao độc lập.
const originalObj = { x: 10, y: 20 };
const copyObj = { ...originalObj };
copyObj.z = 30;
console.log(originalObj); // { x: 10, y: 20 }
console.log(copyObj); // { x: 10, y: 20, z: 30 }
4. So sánh Rest Parameters và Spread Syntax
| Đặc điểm | Rest Parameters | Spread Syntax |
|---|---|---|
| Cú pháp | ...rest | ...spread |
| Mục đích chính | Thu thập nhiều tham số thành một mảng | Trải phần tử từ mảng hoặc object |
| Vị trí sử dụng | Trong tham số hàm | Trong khai báo biến hoặc gọi hàm |
5. Ứng dụng Thực Tế
5.1 Thêm phần tử vào mảng
Khi làm việc với mảng trong React, bạn có thể dễ dàng thêm phần tử bằng Spread Syntax:
const list = ["Item 1", "Item 2"];
const newList = [...list, "Item 3"];
console.log(newList); // ["Item 1", "Item 2", "Item 3"]
5.2 Truyền đối số vào hàm
Spread Syntax cho phép bạn truyền phần tử từ một mảng vào một hàm.
function greet(g1, g2) {
console.log(`${g1} and ${g2}`);
}
const greetings = ["Hello", "Hi"];
greet(...greetings); // "Hello and Hi"
6. Kết luận
Destructuring, Rest Parameters và Spread Syntax là ba công cụ mạnh mẽ giúp mã JavaScript ngắn gọn, dễ hiểu và dễ bảo trì hơn. Việc nắm vững các cú pháp này sẽ giúp bạn tối ưu hóa mã nguồn và làm việc hiệu quả hơn với dữ liệu trong JavaScript.
Ở trên là 1 số chia sẻ về kiến thức JavaScript của mình, vì đây đa phần là kiến thức mình tự học nên có thể bài viết này có thể có nhiều chỗ chưa chính xác và thiếu sót, mong mọi người góp ý ở dưới phần bình luận để bài viết thêm hoàn chỉnh và xây dựng một cộng đồng nơi mọi người có thể chia sẻ kinh nghiệm lập trình cho nhau 😘.
By
By
By
