Bài sau đây được dịch dựa vào bài: “ JavaScript & the Spead Operator “ 

1. Giới thiệu

Chắc hẳn, không ít lần bạn thấy ba dấu chấm … trong Javascript thế này, và tự hỏi cái quỷ này là gì. Đó chính là Spread Operator.

Spread Operator cho phép mở rộng các phần tử / biến số / hàm  .

Chúng ta có một vài ví dụ sau để hiểu hơn vấn đề này:

Ví dụ 1:

  1. Tạo 1 dãy tên là : middle
  2. Tạo dãy thứ 2  có chứa dãy: middle đó.
  3. Cho ra kết quả như sau: 
    var middle = [3, 4];
var arr = [1, 2, middle, 5, 6];
console.log(arr);
// Kết quả : [1, 2, [3, 4], 5, 6]

Ở ví dụ 1 ta không sử dụng spread operator. Khi mà mảng được tạo ra, mảng middle được lồng vào trong mảng.Điều này hoàn toàn ổn khi mà ta chỉ có 1 mảng mà thôi

Chúng ta có thể sử dụng spread operator để các phần tử của mảng được mở rộng ra. Hãy nhìn vào dòng code dưới đây là ví dụ 2 khi sử dụng spread operator.

Ví dụ 2:

var middle = [3, 4];
var arr = [1, 2, ...middle, 5, 6];
console.log(arr);
// Kết quả: [1, 2, 3, 4, 5, 6]

Khi ta sử dụng tạo ra mảng arr và sử dụng spread operator vào mảng middle thay vì việc ta lồng vào nhau. Mảng middle được mở rộng ra. Mỗi phần tử của mảng middle được thêm vào mảng arr. Điều đó thay vi việc lồng vào, ta có thể có một mảng vô cùng đơn giản từ 1 đến 6.

 2. Phân chia:

Slice () là một mảng JavaScript cho phép ta có thể copy mảng. Trong trường hợp này, ta có thể sử dụng spread operator để copy mảng

Ví dụ 1:

var arr = ['a', 'b', 'c'];
var arr2 = [...arr];
console.log(arr2);
//Kết quả:  ['a', 'b', 'c']

Ở bên trên,  các giá trị của mảng arr được mở rộng ra để trở thành các chữ cái riêng rẽ với nhau được đặt ở mảng arr2. Chúng ta bây giờ có thể thay đổi mảng arr2 mà không cần quan tâm đến mảng gốc arr .

Kết quả ta thu được bởi vì giá trị của mảng arr được mở rộng để lấp đầy mảng arr2. Chúng ta đang cài đặt arr2 để có thể chứa được mảng arr. Đây là ý tưởng vô cùng hiệu quả nếu chúng ta nhìn vào mà không có spread operator.

Giả dụ chúng ta chỉ đơn giản tạo ra 1 mảng bằng với mảng đó, nó sẽ như thế này:

Ví dụ 2:

var arr = ['a', 'b', 'c'];
var arr2 = arr;
console.log(arr2);
//Kết quả: ['a', 'b', 'c']

Lúc này chúng ta thấy kết quả tương tự với kết quả ở ví dụ 1. Thực tế ra thay vì ta copy và ấn định là là mảng arr2 với 1 giá trị của arr, điều chúng ta thực sự làm là đặt mảng arr2 bằng với mảng arr. Điều đó có nghĩa khi ta thay đổi mảng arr2 thì mảng gốc arr sẽ thay đổi theo.

arr2.push('d');
console.log(arr2);
//Kết quả arr2: ['a', 'b', 'c', 'd']
console.log(arr);
//Kết quả arr: ['a', 'b', 'c', 'd']

Như ta đã thấy, mặc dù chúng ta không dứt khoát đặt giá trị mới vào mảng gốc arr nhưng giá trị mới d vẫn được đưa vào mảng arr

3. Nối chuỗi

Thay vì sử dụng concat() để nối 2 mảng, chúng ta có thể sử dụng spread operator. Đầu tiên ta xem ví dụ sử dụng concat()sau:

Ví dụ 1:

var arr = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];

arr1 = arr.concat(arr2);
console.log(arr);
// ['a', 'b', 'c', 'd', 'e', 'f']

Bây giờ ta sử dụng spread operator:

Ví dụ 2:

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

Cả 2 ví dụ Cho ra kết quả tương tự nhau. Mỗi mảng đã mở rộng cho phép giá trị mảng được đặt vào mảng mới arr

Chú ý: Việc sử dụng spread operator sẽ không thực sử hiệu quả hơn so với sử dụng concat () trong trường hợp nhiều mảng.

4. Toán học

Chúng ta sử dụng hàm toán với spread operator. Chúng ta sử dụng hàm Math.max() cho ví dụ này.

Ví dụ 1:

Math.max();
//Kết quả: -Infinity
Math.max(1, 2, 3);
//Kết quả: 3
Math.max(100, 3, 4);
//Kết quả: 100

Bằng việc không sử dụng spread operator. Cách đơn giản nhất là sử dụng Math.max() ở trong môt mảng .

Ví dụ 2:

var arr = [2, 4, 8, 6, 0];
function max(arr) {
   return Math.max.apply(null, arr);
}
console.log(max(arr));
//Kết quả: 8

Bây giờ, ta làm thử với spread operator. Thay vì phải tạo một hàm và sử dụng phương pháp apply để trả về kết quả của Math.max(). Ta chỉ cần 2 dòng code là đủ:

var arr = [2, 4, 8, 6, 0];
var max = Math.max(...arr);
console.log(max);
//Kết quả: 8