Toán tử trải rộng (Spread Operator) — ký hiệu bằng ba dấu chấm ... — là một tính năng mạnh mẽ trong JavaScript, cho phép giải nén các cấu trúc lặp được (như mảng, chuỗi, hoặc đối tượng) thành các phần tử riêng biệt. Trong các dự án sử dụng framework Vue kết hợp hệ thống quản trị RuoYi, toán tử này thường xuất hiện khi xử lý tham số API, sao chép trạng thái, hoặc truyền dữ liệu linh hoạt giữa các lớp.

1. Giải nén mảng thành danh sách giá trị

Khi cần truyền từng phần tử của mảng vào hàm hoặc tạo mảng mới, toán tử trải rộng giúp loại bỏ vòng lặp thủ công:

const digits = [7, 8, 9];
const sequence = [0, 1, ...digits, 10];
console.log(sequence); // [0, 1, 7, 8, 9, 10]

2. Kết hợp nhiều tập dữ liệu

Thay vì dùng concat(), bạn có thể ghép mảng một cách trực quan và không làm thay đổi mảng gốc:

const base = ['alpha', 'beta'];
const extras = ['gamma', 'delta'];
const fullList = [...base, 'epsilon', ...extras];

3. Sao chép nông đối tượng

Trong ngữ cảnh Vue, việc tránh tham chiếu trực tiếp đến this.queryParams là thiết yếu để đảm bảo tính bất biến (immutability). Toán tử trải rộng cung cấp cách sao chép nhanh mà không cần thư viện hỗ trợ:

const filterConfig = {
  status: 'active',
  category: 'service',
  priority: 'high'
};

const requestPayload = { ...filterConfig, timestamp: Date.now() }; 
// Tạo đối tượng mới, không ảnh hưởng đến filterConfig

4. Truyền tham số hàm động

Khi gọi hàm nhận nhiều tham số riêng lẻ nhưng dữ liệu lại nằm trong mảng, trải rộng giúp chuyển đổi liền mạch:

const calculateTotal = (a, b, c, d) => a + b + c + d;
const values = [10, 20, 30, 40];
console.log(calculateTotal(...values)); // 100

5. Trường hợp thực tế trong RuoYi

Trong module xuất dữ liệu Excel, đoạn mã sau minh họa cách triển khai toán tử trải rộng để đóng gói tham số truy vấn:

this.download(
  'work/contract/export',
  { ...this.queryParams },
  `export_contract_${Date.now()}.xlsx`
);

Giả sử this.queryParams có nội dung:

{
  startDate: '2024-03-01',
  endDate: '2024-09-30',
  departmentId: 205,
  type: 'signed',
  keyword: 'maintenance'
}

Khi viết { ...this.queryParams }, JavaScript sẽ tạo một đối tượng hoàn toàn mới chứa cùng tập thuộc tính — điều này ngăn chặn khả năng sửa đổi gián tiếp this.queryParams trong quá trình gửi yêu cầu. Đồng thời, nếu sau này thêm trường mới vào queryParams, hàm download tự động bao gồm nó mà không cần cập nhật thủ công từng khóa.

So sánh với cách viết tường minh:

this.download(
  'work/contract/export',
  {
    startDate: this.queryParams.startDate,
    endDate: this.queryParams.endDate,
    departmentId: this.queryParams.departmentId,
    type: this.queryParams.type,
    keyword: this.queryParams.keyword
  },
  `export_contract_${Date.now()}.xlsx`
);

Cách dùng ... không chỉ giảm độ dài mã nguồn mà còn nâng cao khả năng mở rộng và giảm thiểu lỗi do thiếu trường khi cấu trúc queryParams thay đổi.