Hướng dẫn spread operator javascript

Nội dung bài viết

Video học lập trình mỗi ngày

Spread Operator là gì? Spread Operator trong javascript là một syntax rất mạnh mẽ trong javascript cụ thể là ES6. Nhưng thực tế, có rất nhiều devjs vẫn chưa khai thác hết sự hiểu quả của chức năng này. Khi nào sử dụng Spread Operator thì trong bài này chúng ta lướt qua 5 cách sử dụng phổ biến nhất.

"Spread Operator cho phép chuyển đổi một chuỗi thành nhiều argument (trong trường hợp gọi với hàm) hoặc thành nhiều phần tử (cho array). Thêm vào nữa nó cũng cho phép làm nhiệm vụ destructure. Operator này có syntax là 3 dấu chấm ..., khá là dị hợm và khó hiểu nhỉ, nhưng nói thế chứ cái splat bên Ruby cũng chẳng mấy dễ hiểu hơn cho người mới nhập môn." - kipalog.com

Nếu thật sự bạn muốn hiểu kỹ hơn, có lẽ bạn nên dành thời gian cho bài viết này: "Three dot (...)". Bây giờ chúng ta có thể đi vào nội dung chính của bài viết này, các bạn có thể đọc chậm để hiểu hơn.

Copying an array

Có lẽ đây là một trong những cách sử dụng phổ biến nhất của Spread Operator javascript.

let arr = [1,2,3,4]
let copy = [...arr]
// copy is [ 1, 2, 3, 4 ]

Lưu ý rằng copy chưa phải là một phương pháp "Deep copying".

Tips: Shallow copying và deep copying trong javascript 

Điều quan trọng bạn đừng quên ... , nếu bạn quên điều đó nó sẽ trở thành

let arr = [1,2,3,4]
let copy = [arr]
// copy is [ [1, 2, 3, 4] ]

Concatenate arrays

Dựa trên ví dụ trước, bạn có thể tạo ra một new array thông qua nhiều array cho trước.

let arr1 = [1,2,3,4]
let arr2 = [5,6,7,8]
let concat = [...arr1, ...arr2]
// concat is [ 1, 2, 3, 4, 5, 6, 7, 8 ]

Copy an object

Cũng giống như ví dụ về array ở phần 1 thì object cũng tương tự

let obj = {a: 1, b: 2, c: 3}
let copy = {...obj}
// copy is {a: 1, b: 2, c: 3}

Và nếu sai lầm sẽ trả giá nếu bạn quên đi "three dot..."

let obj = {a: 1, b: 2, c: 3}
let copy = {obj}
// copy is { {a: 1, b: 2, c: 3} }

Merge object

Giờ đây khi Merge object chúng ta sẽ không cần đến sử dụng cách cũ concat(). Mà bạn có thể thực hiện nhanh chóng hơn với spread trong javascript.

let obj1 = {a: 1, b: 2, c: 3}
let obj2 = {d: 4, e: 5, f: 6}

let merge = {...obj1, ...obj2}
// merge is {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6}

Bonus - An Error!

Mặc dù thực tế rằng spread operator trải đều hoạt động trên cả array và object, bạn không thể trộn và khớp các loại dữ liệu này với nhau. Như ví dụ dưới đây.

let obj = {a:1, b:2, c:3}
let copy = [...obj] // this won't work!

Using Spread Operator in logging

Ngoài ra chúng ta có thể sử dụng spread opertor dể loop trong logging.

let fruits = ['🍈', '🍉', '🍋', '🍌'];
console.log(...fruits); //🍈 🍉 🍋 🍌

Ref: dev.to