ES6 Spread Operator

Spread operator có cú pháp giống với rest paraterter tuy nhiên cả hai có ý nghĩa khác nhau. Rest paramter được sử dụng khi khai báo hàm, ngược lại spread operator được sử dụng trong các câu lệnh, biểu thức hoặc khi gọi hàm.

Để hiểu về spread operator chúng ta sẽ cùng tham khảo một số ví dụ tiếp sau đây.

Sử Dụng Spread Operator Với Mảng

Nối Mảng (Concatenate Array)

Trước khi ES6 được ra đời thì cách phổ biến để nối mảng là sử dụng phương thức concat() của một mảng với đối số truyền vào là những mảng khác sẽ được nối với mảng này:

var arr_1 = [1, 2, 3];
var arr_2 = [4, 5, 6];

arr_3 = arr_1.concat(arr_2);
console.log(arr_3); //  [1, 2, 3, 4, 5, 6]

Sử dụng spread operator trong ES6 đoạn code trên có thể được viết lại như sau:

arr_3 = [...arr_1, ...arr_2];

Gộp Với Giá Trị Khác

Với spread operator chúng ta còn có thể kết hợp một mảng với giá trị khác:

var numbers = [1, 2, 3]; 
result = ["Car", numbers, "Motobike"];

Với phiên bản trước của ECMAScript để thực hiện việc gộp mảng với các giá trị tuỳ ý khác như trên sẽ cần sử dụng tới rất nhiều các phương thức khác nhau như concat(), push(), slide().

Sử Dụng Spread Operator Với Object

Copy Object

Sử dụng spread operator chúng ta có thể dễ dàng copy object như sau:

var obj_1 = { name: 'ECMAScript' };

var cloned_obj = { ...obj_1 };
console.log(cloned_obj);
// { name: 'ECMAScript' }

Gộp Object

Chúng ta cũng có thể sử dụng spread operator để gộp các object với nhau:

var obj_1 = { name: 'ECMAScript' };
var obj_2 = { year: 2015 };

var cloned_obj = { ...obj_1, ...obj_2 };
console.log(cloned_obj); // { name: 'ECMAScript' }
// {name: "ECMAScript", year: 2015}

Sử Dụng Spread Operator Với Hàm

Với các hàm được khai báo với nhiều tham số khác nhau thì sử dụng spread operator cho phép chúng ta truyền vào một giá trị duy nhất là một mảng:

function myFn (param_1, param_2, param_3) {
}
var args = [1, 2, 3];
myFn(...args);

Chúng ta cũng có thể sử dụng spread operator kết hợp với đối số thông thường:

function myFn (param_1, param_2, param_3, param_4, param_5) {
}
var args = [2, 3, 4];
myFn(1, ...args, 5);
Thêm Bình Luận: