Spread Operator có gì ngon?

Chắc hẳn đôi ba lần bạn sẽ gặp phải dấu ( ... ) trong JavaScript và bạn đang phân vân xem nó là cái éo gì, vậy hôm nay cùng mình tham khảo về thứ quái quỷ gây nhức não đó nhé 😊

Giới thiệu chút

Dấu ( ... ) chính là một toán tử và có tên gọi là Spread Operator ( nghĩa là 'banh ra' ), thấy gì là banh ra thôi 😂😂 Để dễ hiểu thì cùng mình làm ví dụ về nó nhé


...<Variables have repeating type>

Ví dụ:

Ta có một hàm như sau:


function sayMyName(firstName, lastName) {}

Chúng ta có một Array Object có thông tin firstName và lastName:


var fullName = ["Jos", "Fairy"]

Để gán biến fullName vào argument của firstName và lastName của hàm ta làm như sau:


sayMyName(fullName[0], fullName[1])

Hoặc một cách khác tốt hơn nếu không biết đc biến đó dài bao nhiêu với Function.prototype.apply:


sayMyName.apply(null, fullName)

Ở đây với ES6.. chúng ta có thể áp dụng spread operator như sau:


sayMyName(...fullName)

Giải thích: Ở đây spread biến array fullName thành 2 arguments.

Nghe có vẻ hơi khó hiểu đúng chứ 🙄 Vậy tiếp tục mở rộng thêm nhé. Một ví dụ khác:


var inst = ["sao", "để"];
var arr = ["Làm", inst, "code"];

console.log(arr);

Trên đây, mình đã tạo một array có tên là inst sau đó tạo một array khác có chứa array inst

Kết quả:


["Làm", ["sao", "để"], "code"]

Với việc chèn array inst vào array arr kết quả sẽ cho ta là array lồng nhau. Tuy nhiên nếu kết quả mong muốn là một array có chứa 4 phần tử bao gồm 2 phần tử của array inst. Ở đây với spread thì không còn là vấn đề:


var mid = ["sao", "để"];
var arr = ["Làm", ...mid, "code"];

console.log(arr);

Kết quả:


["Làm", "sao", "để", "code"]

Giải thích: Thay vì việc insert array inst thì spread operator sẽ duyệt qua phần tử của inst và insert chúng vào array arr. Vì thế chúng ta có kết quả là 4 phần tử như trên.

Thay thế Apply

Ngày xưa, chúng ta muốn dùng phần tử mảng để lần lượt truyền vào tham số ta thường dùng cách:


function myFunction(x, y, z) { }
var args = ["à", "thế", "à"];
myFunction.apply(null, args);

Đối với spread đơn giản:


function myFunction(x, y, z) { }
var args = ["à", "thế", "à"];
myFunction(...);

Chuyển String sang Array

Chỉ cần xem String như là kiểu ký tự lặp đi lặp lại thì bạn có thể dùng spread như sau:


let howtocode = 'Làm sao để code'
console.log(...howtocode)

API mới với chỉ ba dấu chấm nhưng giúp chúng ta tiết kiệm khá nhiều thời gian mà đáng lý phải mất vào những thứ vặt vảnh, lặp đi lặp lại, thay vào đó ta có thể làm những việc quan trọng hơn ví dụ như tìm cái gì đó có thể trây trét thực sự.

Tác giả: Jos Hoàng Tiên