Spread operator (…) trong ES6

Spread là trây trét, API giúp bạn trây trét những kiểu dữ liệu có thể trây trét được. Giống như bạn trây trét bơ lên bánh mì hoặc trây trét kem vậy.

Photo by FOODISM360 on Unsplash

ES6 có nhiều API mới rất tiện lợi và thú vị. Chúng ta sẽ từ từ tìm hiểu tất cả những API này, nhưng trước hết hãy thử qua một API giúp chúng ta làm việc hiệu quả hơn với các dạng dữ liệu có tính lặp đi lặp lại như string, array, set, v.v..

Cú pháp thì cực kỳ đơn giản:

...<biến có kiểu dữ liệu lặp đi lặp lại>

Khi sử dụng cú pháp này thì giá trị của biến sẽ được phân rã ra thành các phần tử và tùy theo trường hợp sử dụng mà nó sẽ được xử lý theo các khác nha. Hãy cũng tìm hiểu nó thông qua các ví dụ.

Nếu bạn thấy font trên trang này lỗi, hãy cài extension của 12bit để font đẹp và dễ đọc hơn:
Tải bản dành cho Chrome
Tải bản dành cho Firefox.

Thay thế cho phương thức apply

Ngày xưa, khi hàm có nhiều tham số và chúng ta muốn dùng các phần tử trong mảng để lần lượt làm giá trị cho các tham số thì sẽ code như sau:

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);

Đối với cú pháp spread thì sẽ đơn giản hơn rất nhiều

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);

Hoặc thậm chí là

function myFunction(v, w, x, y, z) { }
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);

Thú vị là có thể dùng với các phương thức có sẵn như Max:

Giúp thao tác với mảng tiện lợi hơn

Để nối array ngày xưa cũng không phức tạp, có thể dùng phương thức concat.

Nhưng còn muốn chèn array vào giữa hoặc tệ hơn là vào vị trí bất kỳ nào đó thì sao? Với spread thì đơn giản hơn nhiều:

Merge object

Merge object cũng đơn giản và ngắn gọn hơn:

Copy array

Hãy xem cách copy sau đây:

Nhìn nó có vẻ ổn nhỉ. nhưng thực ra nó không đúng. Vì đây chỉ là copy preference thôi chứ không phải thực sự copy giá trị:

Nhưng với spread thì hoạt động hoàn hảo:

Chuyển string thành array

Chỉ cần xem string như là một kiểu dữ liệu lặp đi lặp lại các ký tự, thì chúng ta có thể sử dụng spread như sau:

Lời kết

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ự.