Spread Operator là một syntax rất mạnh mẽ trong javascript, cụ thể là ES6. Nó được sử dụng để thao tác với mảng như thêm phần tử, kết hợp mảng, truyền tham số mảng vào function. Để có thể sử dụng tốt Spread operator trong tiêu chuẩn ES6, bạn có thể tham khảo bài viết dưới đây!

Sử dụng phương thức push () của mảng

Push () là phương thức hỗ trợ truyền nhiều tham số không xác định. Thông thường, người ta sử dụng phương thức apply () để lấp đầy mảng, nhưng điều đó không thuận tiện. Trên thực tế, nó không cần quá rắc rối như vậy. Spread operator có thể giúp bạn thực hiện điều đó.

Ví dụ:

const arr = [ ‘fatfish’, ‘medium’ ]

arr.push(…[ ‘JavaScript’, ‘NodeJs’ ])

console.log(arr) // [‘fatfish’, ‘medium’, ‘JavaScript’, ‘NodeJs’]

Sao chép một mảng mới

Sao chép một mảng là một trong những chức năng thuận tiện nhất của spread operator. Các mảng có giá trị trùng lặp có thể được loại bỏ thông qua cấu trúc dữ liệu đã đặt và spread operator.

Ví dụ:

const arr = [ ‘fatfish’, ‘medium’, ‘JavaScript’, ‘NodeJs’ ]

const copyArr1 = arr.slice(0) // [ ‘fatfish’, ‘medium’, ‘JavaScript’, ‘NodeJs’ ]

// A more convenient way

const copyArr2 = [ …arr ] // [ ‘fatfish’, ‘medium’, ‘JavaScript’, ‘NodeJs’ ]

Xóa các giá trị trùng lặp khỏi mảng

Có thể loại bỏ các mảng giá trị trùng lặp thông qua data structure đã đặt và spread operator. Ví dụ:

const arr = [ ‘fatfish’, ‘fatfish’, ‘medium’, ‘medium’ ]

const uniqueArray = [ …new Set(arr) ]

console.log(uniqueArray) // [‘fatfish’, ‘medium’]

Kết nối nhiều mảng

Chúng ta có thể sử dụng spread operator xâu chuỗi nhiều mảng để có được dữ liệu hoàn toàn mới. Ví dụ

const arr1 = [ ‘fatfish’, ‘medium’ ]

const arr2 = [ ‘JavaScript’, ‘NodeJs’ ]

const arr = [ …arr1, …arr2 ]

console.log(arr) // [‘fatfish’, ‘medium’, ‘JavaScript’, ‘NodeJs’]

Chuyển đổi NodeList thành một mảng thực

Thao tác với DOM là việc các lập trình viên front-end làm hàng ngày như sử dụng document.querySelectorAll để có được NodeList. Thay vào đó, bạn có thể chuyển đổi nó thành một mảng nhờ spread operator. Sau đó, bạn có thể sử dụng forEach, map, v.v.

Ví dụ:

// $divs is a NodeList

const $divs = document.querySelectorAll(‘div’)

// $arrayDivs is An Array

const $arrayDivs = [ …$divs ]

console.log(Array.isArray($divs), Array.isArray($arrayDivs)) // false true

Destructuring

Spread operator thường được sử dụng để hủy cấu trúc các mảng và đối tượng.

Ví dụ: Huỷ cấu trúc mảng

const [ num0, …others ] = [ 1, 2, 3, 4, 5, 6 ]

console.log(num0) // 1

console.log(others) // [2, 3, 4, 5, 6]

Ví dụ: Huỷ đối tượng

const obj = { name: ‘fatfish’, age: 100, luckyNumber: 6 }

const { name, …other } = obj

console.log(name) // fatfish

console.log(other) // { age: 100, luckyNumber: 6 }

Chuyển đổi chuỗi thành mảng

Với spread operator, bạn có thể chuyển đổi chuỗi thành mảng một cách dễ dàng và nhanh chóng. Ví dụ:

const name = ‘fatfish’

const nameArray = [ …name ] // [‘f’, ‘a’, ‘t’, ‘f’, ‘i’, ‘s’, ‘h’]

Hy vọng qua bài viết này bạn có thể hiểu rõ hơn về ES6 Spread Operator và sử dụng nó một cách hiệu quả nhé!