JavaScript - Tham số Rest: Hướng dẫn chi tiết cho người mới bắt đầu

Xin chào các bạn, những法师 JavaScript tương lai! ? Tôi rất vui được dẫn các bạn đi qua một trong những tính năng hữu ích nhất trong JavaScript hiện đại: Tham số Rest. Là người đã dạy lập trình trong nhiều năm, tôi có thể đảm bảo với các bạn rằng việc thành thạo khái niệm này sẽ làm cho cuộc sống lập trình của bạn trở nên dễ dàng hơn. Hãy cùng khám phá nhé!

Tham số Rest là gì?

Hãy tưởng tượng bạn đang tổ chức một buổi tiệc và bạn không biết sẽ có bao nhiêu khách đến. Bạn chuẩn bị một vài chiếc ghế, nhưng bạn cũng có một chiếc sofa lớn và舒服 có thể chỗ ngồi cho bất kỳ khách nào thêm. Trong JavaScript, tham số Rest giống như chiếc sofa đó - nó có thể xử lý bất kỳ số lượng đối số bổ sung nào bạn ném vào nó!

Tham số Rest cho phép một hàm chấp nhận một số lượng không xác định các đối số dưới dạng một mảng. Nó được biểu diễn bằng ba dấu chấm (...) theo sau là tên tham số.

Hãy cùng nhìn vào một ví dụ đơn giản:

function gatherFriends(firstFriend, ...otherFriends) {
console.log("Người bạn tốt nhất của tôi là: " + firstFriend);
console.log("Những người bạn khác của tôi là: " + otherFriends.join(", "));
}

gatherFriends("Alice", "Bob", "Charlie", "David");

Trong ví dụ này, firstFriend sẽ là "Alice", và otherFriends sẽ là một mảng chứa ["Bob", "Charlie", "David"].

Kết quả sẽ là:

Người bạn tốt nhất của tôi là: Alice
Những người bạn khác của tôi là: Bob, Charlie, David

Tại sao sử dụng Tham số Rest?

1. Độ linh hoạt: Bạn có thể viết các hàm chấp nhận bất kỳ số lượng đối số nào.
2. Độ dễ đọc: Mã của bạn trở nên trực quan và dễ hiểu hơn.
3. Phương pháp của mảng: Bạn có thể sử dụng các phương pháp của mảng trên các tham số đã thu thập.

Tham số Rest vs. Đối tượng Arguments

Trước khi có Tham số Rest, JavaScript có đối tượng arguments. Mặc dù nó có mục đích tương tự, nhưng Tham số Rest có một số ưu thế. Hãy so sánh chúng:

Tính năng	Tham số Rest	Đối tượng Arguments
Loại	True array	Array-like object
Phương pháp của mảng	Hỗ trợ	Không hỗ trợ trực tiếp
Tham số có tên	Có thể sử dụng với	Không thể sử dụng với
Độ rõ ràng	Rõ ràng hơn	Ít rõ ràng

Dưới đây là một ví dụ minh họa sự khác biệt:

// Sử dụng đối tượng arguments
function sumOld() {
let total = 0;
for(let i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}

// Sử dụng tham số rest
function sumNew(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}

console.log(sumOld(1, 2, 3, 4)); // 10
console.log(sumNew(1, 2, 3, 4)); // 10

Như bạn có thể thấy, phiên bản Tham số Rest sạch sẽ hơn và cho phép sử dụng các phương pháp của mảng như reduce.

Toán tử Spread và Tham số Rest

Bây giờ, hãy nói về Toán tử Spread. Nó trông identical với Tham số Rest (ba dấu chấm ...), nhưng nó có mục đích ngược lại. Trong khi Tham số Rest thu thập nhiều phần tử vào một mảng, Toán tử Spread mở rộng một mảng thành các phần tử riêng lẻ.

Dưới đây là một ví dụ thú vị:

function makeSandwich(bread, ...fillings) {
console.log("Bread: " + bread);
console.log("Fillings: " + fillings.join(", "));
}

const myFillings = ["cheese", "tomato", "lettuce"];
makeSandwich("wheat", ...myFillings);

Kết quả:

Bread: wheat
Fillings: cheese, tomato, lettuce

Trong ví dụ này, chúng ta đang sử dụng Toán tử Spread để truyền mảng myFillings dưới dạng các đối số riêng lẻ cho hàm makeSandwich.

Tách cấu trúc với Tham số Rest

Tách cấu trúc giống như unpacking một valise - bạn lấy ra những thứ bạn cần và để lại phần còn lại. Khi kết hợp với Tham số Rest, nó trở thành một công cụ mạnh mẽ. Hãy xem cách nó hoạt động:

const [first, second, ...others] = [1, 2, 3, 4, 5];

console.log(first);  // 1
console.log(second); // 2
console.log(others); // [3, 4, 5]

Điều này hoạt động với các đối tượng cũng:

const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};

console.log(a);    // 10
console.log(b);    // 20
console.log(rest); // {c: 30, d: 40}

Ví dụ thực tế: Tham số hàm

Hãy kết hợp tất cả lại với một ví dụ thực tế hơn. Hãy tưởng tượng bạn đang viết một hàm để tính tổng giá trị của các mặt hàng trong giỏ hàng:

function calculateTotal(discount, ...prices) {
const total = prices.reduce((sum, price) => sum + price, 0);
return total * (1 - discount);
}

const groceries = [5.99, 2.50, 3.75, 1.99];
console.log("Total after 10% discount: $" + calculateTotal(0.1, ...groceries).toFixed(2));

Trong ví dụ này, chúng ta sử dụng Tham số Rest để thu thập tất cả các giá cả, và sau đó sử dụng Toán tử Spread để truyền những giá cả này vào hàm. Kết quả sẽ là:

Total after 10% discount: $12.81

Kết luận

Và đây bạn có nó, các bạn! Chúng ta đã cùng nhau hành trình qua vùng đất của Tham số Rest, so sánh nó với người anh em старший của nó là đối tượng Arguments, khám phá mối quan hệ của nó với Toán tử Spread, và thậm chí kết hợp nó với tách cấu trúc.

Nhớ rằng, Tham số Rest giống như người bạn luôn sẵn sàng giúp đỡ - nó ở đó để làm cho cuộc sống lập trình của bạn dễ dàng hơn và các hàm của bạn linh hoạt hơn. Vậy hãy đi tiếp và rest easy biết rằng bạn đã có công cụ mạnh mẽ này trong bộ công cụ JavaScript của mình!

Chúc các bạn lập trình vui vẻ và mã của bạn luôn linh hoạt và dễ đọc! ??‍??‍?

Credits: Image by storyset