JavaScript - Tham số hàm thông minh

Xin chào các pháp sư JavaScript tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của các tham số hàm thông minh. Là người dạy máy tính hàng xóm thân thiện của bạn, tôi ở đây để hướng dẫn bạn qua những khái niệm này với những giải thích rõ ràng và nhiều ví dụ. Vậy, hãy lấy keyboards của bạn (như những cây phù thủy) và cùng nhau lặn sâu vào!

Tham số hàm mặc định

Tham số mặc định là gì?

Hãy tưởng tượng bạn đang đặt hàng một chiếc pizza. Bạn có thể nói, "Tôi muốn một chiếc pizza pepperoni lớn." Nhưng nếu bạn không chỉ định kích thước? Có phải sẽ tốt nếu nhà hàng pizza mặc định rằng bạn muốn một chiếc pizza trung bình? Đó chính xác là điều mà các tham số mặc định làm trong các hàm JavaScript!

Tham số mặc định cho phép chúng ta chỉ định các giá trị mặc định cho các tham số hàm. Nếu một đối số không được cung cấp hoặc là undefined, giá trị mặc định sẽ được sử dụng.

Hãy xem một ví dụ đơn giản:

function greet(name = "friend") {
console.log(`Hello, ${name}!`);
}

greet(); // Output: Hello, friend!
greet("Alice"); // Output: Hello, Alice!

Trong ví dụ này, nếu chúng ta không cung cấp một tên, hàm sẽ sử dụng "friend" làm mặc định. Đó như có một robot thân thiện nói "Hello, friend!" khi nó không biết tên bạn!

Tham số mặc định phức tạp hơn

Tham số mặc định có thể hơn cả các giá trị đơn giản. Chúng có thể là các biểu thức hoặc thậm chí là các cuộc gọi hàm. Hãy xem một ví dụ phức tạp hơn:

function calculateArea(length, width = length) {
return length * width;
}

console.log(calculateArea(5)); // Output: 25
console.log(calculateArea(5, 3)); // Output: 15

Ở đây, nếu chúng ta không cung cấp một chiều rộng, nó sẽ sử dụng chiều dài làm mặc định. Điều này hoàn hảo cho việc tính diện tích của một hình vuông (ở đó chiều dài bằng chiều rộng) hoặc một hình chữ nhật!

Tham số còn lại trong JavaScript

Tham số còn lại là gì?

Tham số còn lại giống như một túi ma thuật có thể chứa bất kỳ số lượng vật phẩm nào. Trong JavaScript, nó 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.

Hãy xem nó trong hành động:

function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3)); // Output: 6
console.log(sum(1, 2, 3, 4, 5)); // Output: 15

Trong ví dụ này, ...numbers là túi ma thuật của chúng ta. Nó có thể chứa bất kỳ số lượng đối số nào, và chúng ta có thể làm việc với chúng như một mảng bên trong hàm.

Kết hợp tham số còn lại với các tham số thông thường

Chúng ta cũng có thể sử dụng tham số còn lại cùng với các tham số thông thường:

function introduce(greeting, ...names) {
names.forEach(name => console.log(`${greeting}, ${name}!`));
}

introduce("Hello", "Alice", "Bob", "Charlie");
// Output:
// Hello, Alice!
// Hello, Bob!
// Hello, Charlie!

Ở đây, greeting là một tham số thông thường, và ...names bắt giữ phần còn lại của các đối số.

Trích xuất hoặc các tham số có tên

Trích xuất là gì?

Trích xuất giống như unpacking một vali. Thay vì lấy từng món đồ một, bạn có thể lấy nhiều món đồ cùng một lúc và đặt tên cho chúng.

Hãy xem một ví dụ với trích xuất đối tượng:

function printUserInfo({ name, age, city = "Unknown" }) {
console.log(`Name: ${name}, Age: ${age}, City: ${city}`);
}

const user = { name: "Alice", age: 30 };
printUserInfo(user); // Output: Name: Alice, Age: 30, City: Unknown

const anotherUser = { name: "Bob", age: 25, city: "New York" };
printUserInfo(anotherUser); // Output: Name: Bob, Age: 25, City: New York

Trong ví dụ này, chúng ta đang trích xuất đối tượng được truyền vào hàm, lấy ra name, age, và city (với giá trị mặc định).

Trích xuất mảng

Chúng ta cũng có thể sử dụng trích xuất với các mảng:

function getFirstAndLast([first, ...rest]) {
return { first, last: rest.pop() };
}

const result = getFirstAndLast(["Apple", "Banana", "Cherry", "Date"]);
console.log(result); // Output: { first: "Apple", last: "Date" }

Hàm này nhận một mảng, trích xuất phần tử đầu tiên, và sử dụng tham số còn lại để lấy phần tử cuối cùng.

Kết hợp trích xuất với tham số mặc định và còn lại

Bây giờ, hãy kết hợp tất cả các khái niệm chúng ta đã học vào một hàm siêu thông minh:

function createTeam({ leader, members = [], maxSize = 5 } = {}) {
const team = [leader, ...members].slice(0, maxSize);
console.log(`Team created with ${team.length} members.`);
console.log(`Leader: ${leader}`);
console.log(`Other members: ${members.join(", ") || "None"}`);
}

createTeam({ leader: "Alice", members: ["Bob", "Charlie"] });
// Output:
// Team created with 3 members.
// Leader: Alice
// Other members: Bob, Charlie

createTeam({ leader: "David" });
// Output:
// Team created with 1 members.
// Leader: David
// Other members: None

createTeam();
// Output:
// Team created with 0 members.
// Leader: undefined
// Other members: None

Hàm này sử dụng trích xuất đối tượng với giá trị mặc định, và thậm chí có một đối tượng mặc định trong trường hợp không có đối số nào được truyền!

Tóm tắt các phương pháp

Dưới đây là bảng tóm tắt các phương pháp chúng ta đã覆盖:

Phương pháp	Mô tả	Ví dụ
Tham số mặc định	Cung cấp giá trị mặc định cho các tham số hàm	function greet(name = "friend")
Tham số còn lại	Bắt giữ một số lượng không xác định các đối số như một mảng	function sum(...numbers)
Trích xuất đối tượng	Lấy ra các thuộc tính từ đối tượng được truyền vào	function printUserInfo({ name, age })
Trích xuất mảng	Lấy ra các phần tử từ mảng được truyền vào	function getFirstAndLast([first, ...rest])

Và đó là tất cả, các học sinh yêu quý của tôi! Chúng ta đã khám phá thế giới ma thuật của các tham số hàm thông minh trong JavaScript. Nhớ rằng, những kỹ thuật này giống như các công cụ trong hộp công cụ lập trình của bạn. Càng gyak sử dụng chúng, chúng sẽ càng trở nên tự nhiên. Vậy, hãy tiến lên và tạo ra một số hàm thông minh, linh hoạt và mạnh mẽ! Chúc các bạn lập trình vui vẻ! ??

Credits: Image by storyset