Trong bài hướng dẫn này, bạn sẽ học cách sử dụng các Rest Parameter (tham số còn lại) của JavaScript để thu thập các tham số và đặt tất cả chúng vào một mảng.
Rest Parameter là gì?
Phiên bản ES6 cung cấp một loại tham số mới được gọi là Rest Parameter có tiền tố là ba dấu chấm (...).
> Xem thêm: Toán tử Spread trong JavaScirpt
Rest Parameter (hay còn gọi là đại diện của các tham số còn lại) cho phép bạn biểu diễn một số lượng vô hạn đối số dưới dạng một mảng.
Cú pháp sử dụng Rest Paramter:
function myFunc(a, b, ...args) {
// code
}
Tham số cuối cùng (args) được bắt đầu bằng dấu ba chấm (...) được gọi là Rest Parameter (... args).
Tất cả các đối số mà bạn truyền vào trong hàm sẽ ánh xạ tới danh sách tham số.
Trong cú pháp trên, đối số đầu tiên ánh xạ tới a, đối số thứ hai ánh xạ tới b và đối số thứ ba, thứ tư, ... sẽ được lưu trữ trong Rest Parameter args dưới dạng một mảng.
Ví dụ:
myFunc(1, 2, 3, 'x', 'y', 'z');
Lúc này, tham số args sẽ chứa các giá trị:
[3, 'x', 'y', 'z']
Nếu bạn chỉ truyền hai tham số đầu tiên, tham số còn lại sẽ là một mảng trống:
myFunc(1, 2);
... thì args sẽ là:
[]
Tuy nhiên, Rest Parameter phải ở cuối danh sách đối số, nếu không nó sẽ gây ra lỗi:
// Phải đặt Rest Parameter ở cuối
function myFunc(a, ...args, b) {
// code
}
Một số ví dụ sử dụng Rest Parameter trong JavaScript
Để hiểu về Rest Parameter hơn chúng ta cùng làm một số ví dụ.
Ví dụ, giả sử dụng ta muốn cộng nhiều số (mà chưa rõ là có bao nhiêu số). Ta sử dụng Rest Parameter như sau:
function tingTong(...args) {
let tong = 0;
for (const x of args) {
tong += x;
}
return tong;
}
tingTong(1, 2, 3);
Chạy chương trình ta có kết quả:
6
Trong ví dụ này, args là một mảng, do đó, chúng ta có thể sử dụng vòng lặp for of để lặp qua các phần tử của nó và tổng hợp chúng lại.
> Tìm hiểu chi tiết về các loại vòng lặp trong JavaScript
Giả sử hàm tong() có thể truyền các đối số với nhiều kiểu dữ liệu khác nhau như số, chuỗi và boolean... Nhưng bạn chỉ muốn tính tổng các số thì làm thế nào?
Đơn giản, trước khi cộng thì chúng ta kiểm tra kiểu của nó:
function tingTong(...args) {
let tong = 0;
for (let x of args) {
if (typeof x === 'number'){
tong += x;
}
}
return tong;
}
Sau đó, nếu bạn có các đối số lẫn lộn dữ liệu, vẫn có thể tính được:
let kq = tingTong(1, 'a', null, undefined, 2);
console.log(kq);
Kết quả:
3
Hoặc sử dụng cách cao siêu bằng cách kết hợp hàm filter() và hàm reduce() như sau:
function tinhTong(...args) {
return args.filter(e => typeof e === 'number')
.reduce((prev, curr) => prev + curr);
}
> Lưu ý: Nếu không có Rest Parameter, bạn phải sử dụng đối tượng đối số của hàm.
Tuy nhiên, bản thân đối tượng đối số không phải là một thể hiện của kiểu Mảng, do đó, bạn không thể sử dụng trực tiếp phương thức filter(). Trong ES5, bạn phải sử dụng Array.prototype.filter.call() như sau:
function tinhTong() {
return Array.prototype.filter.call(arguments, e => typeof e === 'number')
.reduce((prev, curr) => prev + curr);
}
Như bạn thấy, sử dụng Rest Parameter như ví dụ đầu đã làm cho code gọn nhẹ hơn rất nhiều.
Giả sử bạn cần lọc các đối số dựa trên một kiểu cụ thể như number, string, boolean và null.
function locDuLieu(type, ...args) {
return args.filter(e => typeof e === type);
}
let kq = locDuLieu('string', 1, 'a', null, undefined, 2);
console.log(kq);
> Lưu ý: Tham số đầu tiên bạn phải truyền kiểu mà bạn muốn lọc
Kết quả:
["a"]
Rest Parameter và Arrow Function
Arrow Function không có đối tượng đối số, do đó, nếu bạn muốn truyền một số đối số cho một arrow function, bạn phải sử dụng Rest Parameter.
Ví dụ:
const tinhTong = (...args) => {
return args.filter(e => typeof e === 'number')
.reduce((prev, curr) => prev + curr);
};
const kq = tinhTong(1, 'a', null, undefined, 2);
console.log(kq);
Kết quả:
3
Rest Parameter và Dymanic Function
JavaScript cho phép bạn tạo các dynamic function thông qua constructor. Và có thể sử dụng Rest Parameter trong một dynamic function.
Đây là một ví dụ:
var printArgs = new Function('...args', 'console.log(args)');
printArgs(1, 2, 3);
Kết quả:
[1, 2, 3]
Tổng kết về Rest Parameter trong JavaScript
Như vậy, trong bài hướng dẫn này, bạn đã học được cách sử dụng Rest Parameter trong JavaScript để biểu diễn số lượng đối số không xác định dưới dạng một mảng và sử dụng nó để tính toán.
> Tham khảo ngay chương trình HỌC FRONT END trực tiếp với giảng viên doanh nghiệp. Học chuyên sâu về JavaScript và React.
---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao (Since 2002). Học thực tế + Tuyển dụng ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0383.180086
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
#niit #niithanoi #icthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python