Rất nhiều hàm trong JavaScript hỗ trợ truyền vào số lượng tham số không giới hạn, ví dụ:
\nMath.max(arg1, arg2, ..., argN): trả về giá trị lớn nhất của các tham số truyền vào.Object.assign(dest, src1, ..., srcN): copy các thuộc tính từ object src1...N vào dest.Để làm được điều đó, bạn có thể sử dụng dấu ba chấm trong JavaScript.
\n...argsTrong JavaScript, một hàm có thể được gọi với số lượng tham số truyền vào tùy ý, bất kể hàm đó được định nghĩa như thế nào, ví dụ:
\n// hàm tính tổng hai số\nfunction sum(a, b) {\n return a + b;\n}\n\n// gọi hàm và truyền vào số lượng tham số lớn hơn định nghĩa\nconsole.log(sum(1, 2, 3, 4, 5)); // 3Hàm sum được định nghĩa gồm hai tham số a và b. Khi gọi hàm, mình đã truyền vào số lượng tham số nhiều hơn và không có lỗi xảy ra, mặc dù kết quả vẫn là tổng hai số đầu tiên.
Các tham số còn lại của hàm có thể gom lại thành một mảng bằng cách sử dụng dấu ba chấm trong JavaScript, theo sau bởi tên của một mảng chứa các tham số còn lại này.
\nVí dụ sau gom hết các tham số vào mảng args:
// hàm tính tổng tất cả các tham số truyền vào\nfunction sumAll(...args) {\n let sum = 0;\n\n // duyệt mảng để tính tổng\n for (let arg of args) {\n sum += arg;\n }\n\n return sum;\n}\n\nconsole.log(sumAll(1)); // 1\nconsole.log(sumAll(1, 2)); // 3\nconsole.log(sumAll(1, 2, 3)); // 6Ngoài ra, bạn cũng có thể lấy một vài tham số đầu tiên thông qua biến. Các tham số còn lại cho vào mảng.
\nVí dụ sau lấy hai tham số đầu tiên cho vào biến, các tham số còn lại cho vào mảng:
\nfunction showName(firstName, lastName, ...titles) {\n console.log(`${firstName} ${lastName}`); // Julius Caesar\n\n // các biến còn lại được đưa vào mảng\n // ví dụ mảng titles = [\"Consul\", \"Imperator\"]\n console.log(titles[0]); // Consul\n console.log(titles[1]); // Imperator\n console.log(titles.length); // 2\n}\n\nshowName(\"Julius\", \"Caesar\", \"Consul\", \"Imperator\");\n\nChú ý: cú pháp dấu ba chấm trong JavaScript để lấy các tham số còn lại của hàm phải đặt ở cuối danh sách các tham số.
\n
Ví dụ sau sử dụng cú pháp dấu ba chấm ở giữa nên bị lỗi:
\nfunction func(arg1, ...rest, arg2) {\n //\n}\n\n// Uncaught SyntaxError: Rest parameter must be last formal parameterargumentsTrong hàm có một đối tượng đặc biệt là arguments. Đây là đối tượng kiểu array-like và iterable chứa tất cả các tham số của hàm xác định bởi chỉ số, ví dụ:
function sumAll() {\n for (let i = 0; i < arguments.length; i++) {\n console.log(arguments[i]);\n }\n\n // có thể dùng for...of\n // for (let arg of arguments) {\n // console.log(arg);\n // }\n}\n\nsumAll(1, 2, 3, 4, 5);\n\n/*\n1\n2\n3\n4\n5\n*/Khi cú pháp dấu ba chấm trong JavaScript chưa xuất hiện thì arguments là cách được sử dụng để lấy tất cả tham số truyền vào hàm.
Tuy nhiên, cách sử dụng arguments có nhược điểm là:
arguments là array-like nên bạn không thể sử dụng các phương thức của mảng như arguments.map(...).arguments luôn chứa tất cả các tham số của hàm. Bạn không thể chỉ lưu một số tham số như cú pháp dấu ba chấm được.arguments.Bên trên bạn đã biết cách sử dụng cú pháp dấu ba chấm để lấy một mảng các tham số còn lại trong hàm. Tuy nhiên, nhiều khi bạn cần phải làm ngược lại.
\nVí dụ khi sử dụng hàm Math.max để trả về giá trị lớn nhất trong các tham số truyền vào:
\nconsole.log(Math.max(4, 7, 5)); // 7Giả sử, bạn có một mảng [4, 7, 5]. Làm sao để gọi phương thức Math.max với mảng trên?
Bạn không thể truyền thẳng một mảng vào hàm vì Math.max không nhận tham số là mảng:
let arr = [4, 7, 5];\n\nconsole.log(Math.max(arr)); // NaNDĩ nhiên, bạn có thể lấy từng phần tử của mảng để truyền vào hàm:
\nlet arr = [4, 7, 5];\n\nconsole.log(Math.max(arr[0], arr[1], arr[2])); // 7Nhưng vấn đề ở đây là bạn không biết trước số lượng các phần tử của mảng. Nên cách làm trên là không hợp lý.
\nĐể giải quyết vấn đề này, bạn có thể sử dụng cú pháp spread.
\nCú pháp spread cũng sử dụng ba dấu chấm giống như cú pháp lấy các tham số còn lại của hàm như trên, nhưng cách thực hiện ngược lại.
\nKhi biến arr được sử dụng trong lời gọi hàm, mảng arr được phân tách ra thành danh sách các tham số hàm.
Ví dụ với hàm Math.max trên:
let arr = [4, 7, 5];\n\nconsole.log(Math.max(...arr)); // 7\n// vì mảng [4, 7, 5] được tách ra thành danh sách các tham số là 4, 7, 5Bạn có thể truyền nhiều iterable object vào hàm với cú pháp spread:
\nlet arr1 = [3, 5, 1];\nlet arr2 = [4, 6, 2];\n\nconsole.log(Math.max(...arr1, ...arr2)); // 6\n// cả hai mảng arr1, arr2 được trải ra và ghép lại thành dạng\n// Math.max(3, 5, 1, 4, 6, 2)Bạn cũng có thể kết hợp cú pháp spread với việc truyền tham số thông thường:
\nlet arr1 = [3, 5, 1];\nlet arr2 = [4, 6, 2];\n\nconsole.log(Math.max(5, ...arr1, 10, ...arr2)); // 10\n\n// tương đương với:\n// Math.max(5, 3, 5, 1, 10, 4, 6, 2)\n\n💡 Với bài toán tách mảng thành các tham số để truyền vào hàm, bạn có thể sử dụng phương thức
\napplynhư sau:\nlet arr = [4, 7, 5];\n\nconsole.log(Math.max.apply(null, arr)); // 7Trước khi cú pháp spread xuất hiện thì đây là cách đơn giản nhất để giải quyết bài toán này.
\n
Cú pháp spread có thể dùng để ghép mảng, ví dụ:
\nlet arr1 = [3, 5, 1];\nlet arr2 = [4, 6, 2];\nlet arr = [...arr1, ...arr2];\n\nconsole.log(arr); // (6) [3, 5, 1, 4, 6, 2]Trong các ví dụ trên, mình dùng mảng với cú pháp spread. Thực chất, bạn có thể sử dụng bất kỳ iterable object nào.
\nVí dụ sử dụng cú pháp spread để biến string thành mảng các ký tự:
\nlet str = \"Hello\";\n\nconsole.log([...str]); // (5) ['H', 'e', 'l', 'l', 'o']\n\nCú pháp spread sử dụng iterator để lấy các phần tử, giống như cú pháp
\nfor...of.
let str = \"Hello\";\n\nfor (let ch of str) {\n console.log(ch); // H, e, l, l, o\n}Với string, for...of trả về mảng các ký tự và ...str trở thành chuỗi 'H', 'e', 'l', 'l', 'o'. Sau đó, danh sách các kí tự này được truyền vào [] để tạo mảng mới [...str].
Với bài toán này, bạn có thể dùng Array.from(str) cũng cho kết quả tương tự, vì Array.from() chuyển đối tượng iterable thành mảng.
let str = \"Hello\";\n\nconsole.log(Array.from(str)); // (5) ['H', 'e', 'l', 'l', 'o']Tuy nhiên, Array.from và cú pháp spread có sự khác nhau là:
Array.from áp dụng được cho cả đối tượng array-like và iterable object.Trong bài viết copy object trong JavaScript, mình đã đề cập tới cách sử dụng Object.assign() để copy object.
Ngoài ra, bạn cũng có thể dùng cú pháp spread để copy object và mảng.
\nVí dụ về copy mảng với cú pháp spread:
\nlet arr = [1, 2, 3];\n\nlet arrCopy = [...arr];\n// cú pháp spread tách mảng thành danh sách các tham số\n// rồi truyền vào mảng mới\n\n// kiểm tra lại nội dung của hai array trên\nconsole.log(JSON.stringify(arr) === JSON.stringify(arrCopy)); // true\n\n// so sánh bằng thông qua tham chiếu\nconsole.log(arr === arrCopy); // false - không cùng tham chiếu\n\n// thay đổi mảng arr, nhưng mảng arrCopy không thay đổi\narr.push(4);\nconsole.log(arr); // (4) [1, 2, 3, 4]\nconsole.log(arrCopy); // (3) [1, 2, 3]Ví dụ dùng cú pháp spread trong JavaScript để copy object:
\nlet obj = { a: 1, b: 2, c: 3 };\n\nlet objCopy = { ...obj };\n// cú pháp spread tách đối tượng thành danh sách key-value\n// rồi truyền vào object mới\n\n// kiểm tra nội dung hai obj\nconsole.log(JSON.stringify(obj) === JSON.stringify(objCopy)); // true\n\n// so sánh qua tham chiếu\nconsole.log(obj === objCopy); // false - vì không cùng tham chiếu\n\n// sửa đối tượng obj, nhưng đối tượng objCopy không thay đổi\nobj.d = 4;\nconsole.log(JSON.stringify(obj)); // {\"a\":1,\"b\":2,\"c\":3,\"d\":4}\nconsole.log(JSON.stringify(objCopy)); // {\"a\":1,\"b\":2,\"c\":3}Rõ ràng, cách sử dụng cú pháp spread ngắn gọn hơn việc sử dụng Object.assign như sau:
// copy object\nlet objCopy = Object.assign({}, obj);\n\n// copy mảng\nlet arrCopy = Object.assign([], arr);Như mình đã trình bày ở trên, cú pháp dấu ba chấm có thể dùng để:
\nCách phân biệt hai loại cú pháp trên là:
\n► Cú pháp lấy danh sách các tham số còn lại trong hàm
\nDấu ... được sử dụng ở định nghĩa hàm và luôn đặt cuối trong danh sách các tham số.
// định nghĩa hàm\nfunction fn1(arg1, arg2, ...args) { //\n}\n\n// gọi hàm\nfn1(1, 2, 3, 4, 5, 6);► Cú pháp spread
\nDấu ... được sử dụng ở lời gọi hàm (hoặc trong mảng, object) và có thể đặt ở bất kỳ đâu trong danh sách các tham số:
// định nghĩa hàm\nfunction fn1(arg1, arg2, arg3, arg4) {\n //\n}\n\n// gọi hàm\nlet arr = [1, 2, 3, 4];\nfn1(...arr);Cú pháp ba chấm trong JavaScript có thể là cú pháp để lấy tham số còn lại trong hàm hoặc cú pháp spread.
\nCách đơn giản để phân biệt hai loại trên là:
\n... được dùng ở định nghĩa hàm và luôn đặt ở cuối danh sách tham số.... được dùng ở lời gọi hàm (hoặc trong mảng, object) và có thể đặt ở bất kỳ đâu trong danh sách các tham số.Ứng dụng:
\n