Kiến thức ES6 - Cú pháp Spread

​

Khái niệm:

Cú pháp spread cho phép một phép lặp lại các phần tử của mãng (array) hay đối tượng (object).
Cú pháp spread được thể hiện dưới dạng dấu ...

Spread syntax với Array​

Xét ví dụ về Array sau:

const oldArray = [1, 2, 3];
const newArray = [oldArray, 4, 5];
console.log(newArray); /* ouput: (3) [Array(3), 4, 5] */

Với cách viết như trên, sẽ tạo một Array bên trong một Array mới.
Tuy nhiên với cách dùng spread syntax sẽ cho ta một cấu trúc Array mới, với các phần tử của Array mới bao gồm các phần tử của Array đã khai báo.

const oldArray = [1, 2, 3];
const newArray = [...oldArray, 4, 5];
console.log(newArray); /* ouput: [1, 2, 3, 4, 5] */

Nội dung trên sẽ cho kết quả [1, 2, 3, 4, 5].
Ta thấy kết quả cuối cùng rất đẹp đúng không? ^^

Spread syntax với Object​

Cũng tương tự như Array, ta xét ví dụ về Object sau:

const oldObject = {
  name: 'Lê Đăng Dũng'
};

const newObject = {
  oldObject,
  age: 4
};

console.log(newObject); /* ouput: {oldObject: {…}, age: 4} */

Nội dung trên, sẽ tạo một object bên trong một object mới.
Tuy nhiên với cách dùng spread syntax sẽ cho ta một object mới, với các phần tử của object mới bao gồm các phần tử của object đã khai báo.

const oldObject = {
  name: 'Lê Đăng Dũng'
};

const newObject = {
  ...oldObject,
  age: 5
};

console.log(newObject); /* ouput: {name: "Lê Đăng Dũng", age: 5} */

Ta thấy khi sử dụng spread syntax thì kết quả đã trở nên đẹp hơn rất nhiều.