Rest Parameter và Spread Operator trong JavaScript

Rest parameter và spread operator là hai tính năng quan trọng được giới thiệu trong ES6 (ECMAScript 2015). Chúng cho phép bạn viết mã ngắn gọn hơn và dễ hiểu hơn, đặc biệt là khi làm việc với mảng và đối tượng.

Rest Parameter

Rest parameter cho phép một hàm nhận một số lượng đối số không xác định dưới dạng một mảng. Điều này rất hữu ích khi bạn không biết trước hàm của mình sẽ nhận bao nhiêu đối số.

Cú pháp

Rest parameter được định nghĩa bằng cách sử dụng ba dấu chấm (...) theo sau bởi tên tham số.

Ví dụ

function sum(...numbers) {
    return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3)); // Output: 6
console.log(sum(1, 2, 3, 4, 5)); // Output: 15

Trong ví dụ trên, ...numbers là rest parameter, nó nhận tất cả các đối số được truyền vào hàm sum và biến chúng thành một mảng numbers.

Spread Operator

Spread operator cũng sử dụng ba dấu chấm (...) và được sử dụng để tách một mảng hoặc một đối tượng thành các phần tử riêng lẻ. Spread operator rất hữu ích khi bạn muốn sao chép, nối hoặc kết hợp các mảng hoặc đối tượng.

Cú pháp

Spread operator được sử dụng với cú pháp ... trước một mảng hoặc một đối tượng.

Ví dụ với Mảng

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

// Nối hai mảng
const combined = [...arr1, ...arr2];
console.log(combined); // Output: [1, 2, 3, 4, 5, 6]

// Sao chép một mảng
const copy = [...arr1];
console.log(copy); // Output: [1, 2, 3]

Ví dụ với Đối tượng

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };

// Kết hợp hai đối tượng
const combinedObj = { ...obj1, ...obj2 };
console.log(combinedObj); // Output: { a: 1, b: 2, c: 3, d: 4 }

// Sao chép một đối tượng
const copyObj = { ...obj1 };
console.log(copyObj); // Output: { a: 1, b: 2 }

Sử dụng Spread Operator trong Hàm

Spread operator cũng có thể được sử dụng để truyền các phần tử của một mảng như các đối số riêng lẻ vào một hàm.

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

function multiply(a, b, c, d) {
    return a * b * c * d;
}

console.log(multiply(...numbers)); // Output: 24

Kết hợp Rest Parameter và Spread Operator

Bạn cũng có thể kết hợp rest parameter và spread operator trong cùng một hàm hoặc cùng một đoạn mã để tận dụng cả hai tính năng.

Ví dụ

function multiply(multiplier, ...numbers) {
    return numbers.map(num => num * multiplier);
}

const nums = [1, 2, 3, 4];
console.log(multiply(2, ...nums)); // Output: [2, 4, 6, 8]

Trong ví dụ trên, multiply sử dụng rest parameter để nhận các đối số sau multiplier và sử dụng spread operator để truyền các phần tử của nums vào hàm.

Kết luận

Rest parameter và spread operator là hai tính năng mạnh mẽ của JavaScript, giúp bạn làm việc hiệu quả hơn với các mảng và đối tượng. Chúng cung cấp cách viết mã ngắn gọn, rõ ràng và dễ hiểu hơn, đồng thời giảm thiểu các lỗi có thể xảy ra khi làm việc với các cấu trúc dữ liệu phức tạp.

Đăng ký

Rest Parameter và Spread Operator trong JavaScript