Spread Operator và Rest Operator trong Javasccript

Spread Operator là gì?

Chắc hẳn, không ít lần bạn thấy ba dấu chấm ... trong Javascript thế này, và tự hỏi cài quỷ này là gì, hôm nay chúng ta sẽ cùng tìm hiểu 3 dấu chấm đó nhé.

Spread tức là 'banh ra', tức là thấy gì sẽ banh nó ra, thôi thì ta cứ đi vào ví dụ cụ thể để bạn dễ hiểu hơn nhé

Spread chuỗi

Ta thử gõ như sau vào Consoletrong trình duyệt để xài Command Line API

Thì sẽ được kết quả sau:

Tức là spread operator đang 'tách' chuỗi string là thành mảng phần tử

Nối mảng

Ví dụ có mảng sau:

const iphones = ['iphone4','iphone5','iphone6'];
const macbooks = ['macbook2012','macbook2013','macbook2014'];

Ta muốn gộp 2 mảng này thành một mảng thì làm như sau:

const AppleProducts = iphones.concat(macbooks);

// ["iphone4", "iphone5", "iphone6", "macbook2012", "macbook2013", "macbook2014"]

Nhưng ta muốn thêm iphone7 , iphone7s và sau mảng iphones và macbook2011 trước macbooks , macbook2015 vào sau cùng thì phải concat rồi push phần tử vô nhiều lần đúng không?

Nhưng với spread operator, mọi chuyện đã nhanh gọn lẹn hơn như sau:

const AppleProducts = [ ...iphones, "iphone7", "iphone7s", "macbook2011", ...macbooks, "macbook2015" ];

//["iphone4", "iphone5", "iphone6", "iphone7", "iphone7s", "macbook2011", "macbook2012", "macbook2013", "macbook2014", "macbook2015"]

Copy Array

Nếu ta copy như thế này thì không đúng:

const oldModels = macbooks;
oldModels[0] = "macbook2010";

// macbooks: ["macbook2010", "macbook2013", "macbook2014"]

Vì khi gán bằng thì khi oldModels thay đổi thì macbooks cũng thay đổi theo.

Với spread operator, ta có thể copy mảng an toàn hơn như sau:

const oldModels = [...macbooks];
oldModels[0] = "macbook2010";

// macbooks: ["macbook2012", "macbook2013", "macbook2014"]

Spread operator khi gọi hàm

Ví dụ ta có hàm tính tổng sum, trong hàm này dùng for ... of

const values = [69,96,1];

function sum(){ 
  var total = 0;
  for (const value of arguments){
    total += value;
  } 
  return total;
} 

console.log(sum(values[0],values[1],values[2]));
// 166

Mà lỡ cái mảng ta truyển vào có 100 phần tử, chẳng lẽ cùng truyền 100 đối số vào sao? Mọi việc sẽ đơn giản hơn nếu dùng spread operator:

console.log(sum(...values)) // 166

...Rest Operator là gì?

Cũng là ba dấu chấm ... nhưng rest lại có cách dùng khác hoàn toàn với spread. Spread tức là banh ra, tách ra, từ một array thành nhiều phần tử.

Còn rest thì ngược lại: gom những phần tử thành array. Rest operator được dùng trong parameter của function và destructuring

...rest trong function

Ví dụ ta có hàm tính điểm trung bình học sinh, với toán, văn nhân hệ số 2, còn lại bao nhiêu môn không cần biết hệ số 1. Mình sẽ viết theo kiểu dùng ...rest luôn, bạn có thể viết lại dùng arguments của hàm và sẽ nhận thấy rằng dùng ...rest sẽ tiết kiệm vài dòng code và nhìn pro hẳn lên

function calculateGPA(math, literature, ...otherSubject){ 
  console.log(otherSubject); // [6, 7, 5, 4] 
}

calculateGPA(8, 7.5, 6, 7, 5, 4);

Lúc này bạn sẽ thấy otherSubject là một array, tức là ...rest đã gom lại thành 1 mảng rồi. Công việc bây giờ chỉ cần dùng hàm sum() ở trên là xong:

function calculateGPA(math, literature, ...otherSubject){
    return (math * 2 + literature * 2 + sum(...otherSubject)) / (otherSubject.length + 4);
}

console.log(calculateGPA(8, 7.5, 6, 7, 5, 4));
// 6.625

Tiếp theo còn một trường hợp hay dùng Rest nữa đó là:

...rest với Destructuring

const VietNamTeam = [ "Nguyen Huu Thang", "Nguyen Cong Phuong", "Luong Xuan Truong", "Nguyen Van Toan", "Nguyen Tuan Anh", "Phan Van Hau", "Ha Duc Chinh" ];

const [coach, captain, ...players] = VietNamTeam;

console.log(coach);
console.log(captain);
console.log(players);

// Nguyen Huu Thang
// Nguyen Cong Phuong
// ["Luong Xuan Truong", "Nguyen Van Toan", "Nguyen Tuan Anh", "Phan Van Hau", "Ha Duc Chinh"]