Cách xử lý nhiều đối số tùy chọn trong hàm JavaScript

Phá hủy cấu trúc có lẽ là thay đổi cú pháp lớn nhất đến với JavaScript trong đặc tả ES6. Mặc dù cú pháp mới có vẻ kỳ lạ đối với nhiều lập trình viên JavaScript lâu năm, nhưng một khi bạn có thể nắm bắt được nó, thì việc sử dụng nó có thể rất hiệu quả.

Nếu bạn chưa quen với việc phá hủy, thì đó là khả năng ánh xạ một đối tượng theo nghĩa đen hoặc mảng theo nghĩa đen sang nhiều câu lệnh gán cùng một lúc. Ví dụ

Việc hủy cấu trúc có thể được sử dụng với cú pháp mảng để gán từng giá trị trong mảng cho tên biến ở vị trí tương ứng của mảng bên trái

//Destructuring using an array
let [a,b,c] = [1,2,3];console.log(a,b,c) // 1, 2, 3

Tuy nhiên, phổ biến hơn, nó có thể được sử dụng với các ký tự đối tượng để lấy ra các thuộc tính của đối tượng mà bạn muốn sử dụng làm biến

//Destructuring using an object literal. 
//Must be the same property name
let {x,y,z} = {x: 10, y: 20, z: 30};

console.log(x,y,z); //10, 20, 30

Lưu ý - Trong ví dụ về đối tượng ở trên, tên thuộc tính phải giống nhau. Vị trí không quan trọng ở đây không giống như ví dụ về mảng

Nếu bạn muốn đổi tên một cái gì đó trong quá trình hủy, bạn có thể sử dụng cú pháp keyName:newKeyName ở phía bên trái của quá trình hủy của bạn

//If you want to rename your properties...
let {x:newX,y:newY,z:newZ} = {x: 10, y: 20, z: 30};

console.log(newX,newY,newZ); //10, 20, 30

Lúc đầu, điều này có vẻ giống như một số đường cú pháp trên các câu lệnh gán, nhưng điều làm cho nó hơn thế nữa là khả năng gán các giá trị mặc định cho các biến tại thời điểm phá hủy.

let {x = 5, y = 8, z = 13} = {x: 10, y: 20};

console.log(x,y,z); //10, 20, 13

Điều này khá quan trọng. Giả sử rằng vế phải của biểu thức gán không phải là một đối tượng theo nghĩa đen mà là một lời gọi hàm trong phần khác của ứng dụng của bạn. Một ngày nọ, một nhà phát triển xuất hiện và triển khai câu lệnh trả về ngắn mạch trong chức năng khác đó và bây giờ cuộc gọi của bạn không nhận được phản hồi như mong đợi. Khả năng thiết lập mặc định tại thời điểm chuyển nhượng giúp bảo vệ mã của bạn dễ dàng hơn nhiều

Khi bạn truyền một đối số cho một hàm, trước khi hàm đó bắt đầu thực thi, nó sẽ gán đối số mà bạn đã truyền vào cho tham số tương ứng trong chữ ký hàm của nó. Vì nó là một câu lệnh gán, điều đó có nghĩa là chúng ta có thể sử dụng hàm hủy để gán các giá trị tham số trong một hàm

//destructuring to assign parameters
let myFunc = function({x,y,z}) {
    console.log(x,y,z);
};

myFunc({x:10,y:20,z:30}); //10 20 30

Như đã trình bày trước đây, chúng ta cũng có thể đổi tên các khóa của mình trong quá trình phá hủy

//you can also rename them as before
myFunc = function({x:newX,y:newY,z:newZ}) {
    console.log(newX,newY,newZ);
};

myFunc({x:10,y:20,z:30}); //10 20 30

Cuối cùng, chúng ta có thể gán các giá trị mặc định cho cả các khóa riêng lẻ trong câu lệnh hủy và toàn bộ khối

//setting defaults on the individual values and the whole object works too
myFunc = function({x = 5,y = 8,z = 13} = {x:1,y:2,z:3}) {
    console.log(x,y,z);
};

myFunc(); //1 2 3  (hits the object literal default)
myFunc({}); //5 8 13   (hits the value defaults)

Mặc dù điều này có vẻ hơi tẻ nhạt khi gõ, nhưng nó giúp chúng ta không phải kiểm tra sự tồn tại của từng đối số mà chúng ta đưa vào

Nếu bạn nhớ lại ví dụ đầu tiên về việc gán các giá trị mặc định trong quá trình phá hủy và kết hợp điều đó với những gì chúng ta đã học trong phần trước, thì bạn có thể biết tôi sẽ đi đến đâu với điều này. Nếu bạn có thể hủy cấu trúc các tham số hàm và bạn có thể gán các giá trị mặc định trong quá trình hủy, VÀ các tên theo nghĩa đen của đối tượng phải khớp trong quá trình hủy, điều này có nghĩa là bạn có thể đặt tên và các tham số tùy chọn trong chữ ký hàm của mình. (miễn là bạn sử dụng phá hủy). Đây là một ví dụ

let myFunc = function({x = 5,y = 8,z = 13} = {}) {
    console.log(x,y,z);
};

myFunc({y:15,x:10,a:1}); //10 15 13

Hy vọng rằng tiêu đề của bài viết này không quá gây hiểu lầm. Mặc dù chúng tôi chưa có các đối số tùy chọn và được đặt tên đúng trong Javascript giống như cách mà C# thực hiện, nhưng tôi vừa trình bày một cách để có được hành vi tương đương về mặt chức năng bằng cách sử dụng tính năng phá hủy ES6. Mặc dù tôi không lường trước được mẫu này sẽ thay thế các đối số vị trí, nhưng nó rất tốt cho các tình huống chẳng hạn như nhận một đối tượng trong một cuộc gọi lại lời hứa khi thực hiện cuộc gọi mạng đến máy chủ. Thay vì hy vọng cuộc gọi mạng trả về chính xác những gì bạn đang mong đợi, bạn có thể sử dụng mẫu được mô tả trong bài đăng này để xác định rõ ràng những gì bạn muốn nhận và thiết lập giá trị mặc định cho các giá trị đó

Phương thức có thể có 2 tham số tùy chọn không?

Làm cách nào để xử lý các tham số tùy chọn trong JavaScript?

Một hàm có thể có nhiều tham số JavaScript không?

Các hàm JavaScript có thể có các tham số tùy chọn không?