Toán tử Spread React ES6


Nhà điều hành Spread

Toán tử trải rộng JavaScript ( ...) cho phép chúng tôi sao chép nhanh chóng tất cả hoặc một phần của một mảng hoặc đối tượng hiện có vào một mảng hoặc đối tượng khác.

Thí dụ

const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
const numbersCombined = [...numbersOne, ...numbersTwo];

Toán tử spread thường được sử dụng kết hợp với cấu trúc hủy.

Thí dụ

Gán mục đầu tiên và mục thứ hai từ numberscho các biến và đặt phần còn lại vào một mảng:

const numbers = [1, 2, 3, 4, 5, 6];

const [one, two, ...rest] = numbers;

Chúng ta cũng có thể sử dụng toán tử spread với các đối tượng:

Thí dụ

Kết hợp hai đối tượng này:

const myVehicle = {
  brand: 'Ford',
  model: 'Mustang',
  color: 'red'
}

const updateMyVehicle = {
  type: 'car',
  year: 2021, 
  color: 'yellow'
}

const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle}

Lưu ý rằng các thuộc tính không khớp đã được kết hợp, nhưng thuộc tính khớp, colorđã bị ghi đè bởi đối tượng cuối cùng được truyền updateMyVehicle,. Màu kết quả bây giờ là màu vàng.


Kiểm tra bản thân với các bài tập

Bài tập:

Sử dụng toán tử spread để kết hợp các mảng sau.

const arrayOne = ['a', 'b', 'c'];
const arrayTwo = [1, 2, 3];
const arraysCombined = [];