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é
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ử
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"]
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"]
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
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
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à:
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"]
Hy vọng với bài viết này, bạn đã hiểu rõ cũng như phân biệt được Spread Operator và Rest Operator. Mọi góp ý và thắc mắc hãy comment chia sẻ nhé!
Bài viết liên quan
[Case Study] - StatcWeb.Studio dùng nocode để làm tool nocode: 200h - 0 sales - 5 min(s) read - published on January 24, 2021[Case Study] Bán No-code MVP làm trong 100h giá $5000 - 11 min(s) read - published on January 15, 2021Chi tiết mình validate idea với nocode - 3 tuần 60 sales - $567 - 7 min(s) read - published on December 15, 2020Do things that don't scale - Lời khuyên tốt nhất để validate idea làm app - 2 min(s) read - published on November 22, 2020GPT-3 sẽ là phát minh quan trọng kể từ Blockchain - 4 min(s) read - published on September 15, 2020#6 - NoCode MVP - Tổng kết - 5 min(s) read - published on August 22, 2020#5 - NoCode MVP - Buông bỏ để hạnh phúc - 2 min(s) read - published on July 28, 2020#4 - NoCode MVP - Ý tưởng. Một lần chơi lớn - 4 min(s) read - published on July 2, 2020#3 - NoCode MVP - Sức mạnh của Bubble.io - 5 min(s) read - published on June 29, 2020#2 - NoCode MVP - Tại sao là NoCode và tương lai của nó - 7 min(s) read - published on June 28, 2020