Các tham số mặc định giúp làm việc với các chức năng dễ dàng hơn rất nhiều. Bằng cách sử dụng các tham số mặc định, bạn có thể cho các chức năng của mình biết những tham số nào chúng nên sử dụng trong trường hợp bạn chưa chỉ định bất kỳ tham số nào. Điều này có thể giúp tránh lỗi và làm cho mã của bạn dễ đọc hơn.
JavaScript đã giới thiệu các tham số mặc định trong ES2015. Những điều này cho phép bạn khởi tạo một hàm với các giá trị được xác định trước.
Trong hướng dẫn này, chúng ta sẽ nói về các tham số mặc định là gì, cách bạn có thể sử dụng chúng và những loại biểu thức nào bạn có thể chỉ định làm tham số mặc định. Chúng tôi sẽ giới thiệu cho các bạn một vài ví dụ để bạn có tất cả mã cần thiết để bắt đầu.
Tham số so với Đối số:Trận chiến
Trước khi bắt đầu, chúng ta hãy giải quyết một câu hỏi lâu đời từ những người mới bắt đầu:sự khác biệt giữa tham số và đối số là gì? Bạn cần biết sự khác biệt trước khi bắt đầu làm việc với các tham số mặc định trong JavaScript.
Tham số là một biến được đặt tên mà bạn chuyển vào một hàm JavaScript. Một tham số không bao giờ được gán giá trị trực tiếp cho nó. Nó là một trình giữ chỗ cho một giá trị mà bạn sẽ chuyển vào một hàm. Dưới đây là ví dụ về một tham số:
function sayHello(name) {
console.log("Hello, " + name);
}
Trong ví dụ này, "tên" là tham số của chúng ta. Nó không có bất kỳ giá trị nào được gán cho nó.
Mặt khác, các đối số là các giá trị được chuyển cho một hàm:
sayHello("Brett");
Mã của chúng tôi trả về:“Xin chào, Brett”. “Brett” là một ví dụ về đối số, là giá trị mà chúng ta đã chuyển qua hàm của mình.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Việc gọi một hàm mà không chỉ định tất cả các tham số của nó có thể dẫn đến lỗi:
sayHello()
Mã của chúng tôi trả về:Hello, undefined . Đó là bởi vì chúng tôi đã không chuyển một giá trị cho chức năng của mình.
Tham số mặc định của JavaScript
Chúng tôi có thể khắc phục sự cố này bằng cách chỉ định một tham số mặc định. Một tham số mặc định cho phép bạn chỉ định một giá trị sẽ được gán cho một tham số trong trường hợp không có tham số nào được chỉ định.
Phép gán giá trị mặc định sử dụng toán tử gán:
function sayHello(name="World") {
console.log("Hello, " + name);
}
sayHello();
Mã của chúng tôi trả về:Hello, World . Bạn có thể thấy rằng chúng tôi chưa chỉ định đối số trong ví dụ này. Thay vào đó, chúng tôi đã đặt một tham số hàm mặc định. Trong trường hợp này, bất kỳ khi nào một đối số không được chỉ định, giá trị của tham số "name" trong hàm của chúng ta sẽ trở thành "World".
Điều này dễ dàng hơn nhiều so với việc phải kiểm tra thủ công xem một giá trị có được chỉ định hay không.
Một tham số mặc định có thể có bất kỳ giá trị hoặc đối tượng nguyên thủy nào được gán làm giá trị của nó. Dưới đây là một số ví dụ về các tham số mặc định hợp lệ:
- Chuỗi:“Latte”
- Con số:2,40
- Boolean:true
- Mảng:[“Steven”, false]
- Đối tượng:{name:“Steven”, trung thànhCustomer:false}
Chỉ định Nhiều Tham số Mặc định
Không có giới hạn về số lượng tham số mặc định mà bạn có thể chỉ định trong một hàm. Hãy xem xét đoạn mã sau:
function createOrder(coffee="Espresso", price=1.75) {
console.log("Order: " + coffee);
console.log("Price: $" + price);
}
createOrder(); Mã của chúng tôi trả về:
Order: Espresso Price: $1.75
Trong ví dụ này, chúng tôi đã chỉ định hai thông số mặc định:cà phê và giá. Bạn cũng có thể kết hợp các tham số bạn chỉ định giữa các tham số mặc định và thông thường. Khi bạn làm điều này, bạn phải đặt bất kỳ thông số thông thường nào trước thông số mặc định. Hãy xem xét ví dụ này:
function createOrder(coffee, price=1.75) {
console.log("Order: " + coffee);
console.log("Price: $" + price);
}
createOrder("Cappuccino"); Mã của chúng tôi trả về:
Order: Cappuccino Price: $1.75
Chúng tôi đã chỉ định một đối số:Cappuccino. Đây là tên của loại cà phê mà chúng tôi đã gọi. Bởi vì chúng tôi chưa chỉ định giá trị mặc định cho tham số này, chúng tôi cần chỉ định một giá trị đối số; nếu không, "không xác định" sẽ được trả về.
Chúng tôi đã khai báo rằng giá trị mặc định cho "price" phải là "1,75". Vì chúng tôi đặt thông số mặc định này nên bất kỳ lúc nào chúng tôi không chỉ định giá, thông số này sẽ tự động được đặt thành “1,75”.
Điều quan trọng là bạn phải chỉ định bất kỳ thông số thông thường nào trước thông số mặc định của mình. Điều này là do các giá trị cho các tham số thông thường được gán theo thứ tự khi chúng xuất hiện trong lệnh gọi hàm của bạn.
Chức năng như một tham số mặc định
Một chức năng có thể được đặt làm tham số mặc định. Điều này rất hữu ích nếu giá trị bạn muốn chuyển vào một hàm được tính bằng một hàm khác.
Trong đoạn mã sau, chúng ta sẽ tạo một hàm tạo tên người dùng giả ngẫu nhiên cho người chơi mới trên trò chơi điện tử:
function getRandomUsername() {
var number = Math.floor(Math.random() * 100);
var username_list = ['Crash', 'Steve', 'Lucinda', 'Ellie'];
var username = username_list[Math.floor(Math.random() * username_list.length)];
var final_username = username + number;
return final_username;
}
function createUser(username = getRandomUsername(), email) {
console.log('Your username is: ' + username);
console.log('Your email is: ' + email);
}
createUser('test@test.com'); Mã của chúng tôi trả về:
Your username is: Crash87 Your email is: test@test.com
Hãy chia nhỏ mã của chúng ta.
Chúng tôi đã khai báo một hàm có tên là getRandomUsername() tạo ra một tên người dùng giả ngẫu nhiên. Điều này hoạt động bằng cách tạo một số ngẫu nhiên và chọn ngẫu nhiên một tên người dùng từ danh sách bốn tên người dùng. Số ngẫu nhiên sau đó được thêm vào cuối tên người dùng. Hàm này trả về tên người dùng mới được tạo
Trong createUser của chúng tôi , chúng tôi đã đặt giá trị mặc định của thông số “tên người dùng” bằng với getRandomUsername() của chúng tôi chức năng. Điều này có nghĩa là bất cứ khi nào chúng tôi không chỉ định tên người dùng cho người dùng mới của mình, một tên người dùng sẽ được tạo ngẫu nhiên.
Sau đó, mã của chúng tôi in ra tên người dùng cũng như địa chỉ email của họ vào bảng điều khiển.
Kết luận
Các tham số mặc định cho phép bạn đặt một giá trị sẽ được gán cho một tham số nếu một tham số không được chỉ định làm đối số trong một lời gọi hàm. Các tham số mặc định giúp làm cho các hàm của bạn dễ đọc hơn và giảm các vấn đề có thể phát sinh khi một giá trị không được chuyển cho một hàm.
Bây giờ, bạn đã sẵn sàng để bắt đầu làm việc với các tham số mặc định của JavaScript như một chuyên gia!