Spread & Rest Operators

Trong JavaScript, Spread và Rest Operators đều sử dụng dấu ba chấm ... nhưng chúng có mục đích và cách sử dụng khác nhau. Dưới đây là giải thích chi tiết:

1. Spread Operator

Spread Operator (...) được sử dụng để trải rộng các phần tử của một mảng hoặc các thuộc tính của một đối tượng. Nó thường được dùng để:

Sao chép mảng hoặc đối tượng:

const arr1 = [1, 2, 3];
const arr2 = [...arr1];
console.log(arr2); // [1, 2, 3]

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1 };
console.log(obj2); // { a: 1, b: 2 }

Kết hợp mảng hoặc đối tượng:

const arr1 = [1, 2];
const arr2 = [3, 4];
const combinedArray = [...arr1, ...arr2];
console.log(combinedArray); // [1, 2, 3, 4]

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const combinedObject = { ...obj1, ...obj2 };
console.log(combinedObject); // { a: 1, b: 2 }

Truyền các phần tử của mảng như các đối số của một hàm:

const numbers = [1, 2, 3];
function sum(a, b, c) {
  return a + b + c;
}
console.log(sum(...numbers)); // 6

2. Rest Operator

Rest Operator (...) được sử dụng để gộp các đối số còn lại thành một mảng hoặc một đối tượng. Nó thường được dùng trong các trường hợp sau:

Hàm với số lượng đối số không xác định:

function sum(...numbers) {
  return numbers.reduce((acc, num) => acc + num, 0);
}
console.log(sum(1, 2, 3)); // 6
console.log(sum(1, 2, 3, 4, 5)); // 15

Destructuring để lấy các phần tử còn lại:

const [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 1
console.log(rest);  // [2, 3, 4]

const { a, ...others } = { a: 1, b: 2, c: 3 };
console.log(a);     // 1
console.log(others); // { b: 2, c: 3 }

Kết luận

• Spread Operator được sử dụng để trải rộng các phần tử hoặc thuộc tính.
• Rest Operator được sử dụng để gộp các phần tử hoặc thuộc tính còn lại.

Cả hai đều là những công cụ mạnh mẽ trong JavaScript hiện đại, giúp viết code ngắn gọn và dễ hiểu hơn.