Spread operator (…) trong ES6

/ vominh

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

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:

let numbers = [1, 4, 11, 6, 2, 4, 7, 0] console.log(Math.max(...numbers))

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.

$xslt let a1 = [1, 2]; let a2 = [3, 4]; let a3 = [...a1, ...a2] console.log(a3)

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:

let a1 = [1, 2]; let a2 = [3, 4]; let a3 = [5, 6, ...a1, 7, 8, ...a2, 9, 10] console.log(a3)

Merge object

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

var obj1 = { foo: 'bar', x: 42 }; var obj2 = { foo: 'baz', y: 13 }; var clonedObj = { ...obj1 }; // Object { foo: "bar", x: 42 } var mergedObj = { ...obj1, ...obj2 }; // Object { foo: "baz", x: 42, y: 13 }

Copy array

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

var arr = ['a', 'b', 'c']; var arr2 = arr; console.log(arr2);

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ị:

var arr = ['a', 'b', 'c']; var arr2 = arr; arr2.push('should not be pushed to arr') console.log(arr);

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

var arr = ['a', 'b', 'c']; var arr2 = [...arr]; arr2.push('should not be pushed to arr') console.log(arr);

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:

let senviet = 'senviet' console.log(...senviet)

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