Các hoạt động rest và spread

9.1 Spread (toán tử unpack)

Các hoạt động rest và spread trong JavaScript cung cấp nhiều khả năng để làm việc với mảng, đối tượng và hàm. Những hoạt động này giúp đơn giản hóa mã, làm cho nó trở nên rõ ràng và linh hoạt hơn. Trong bài giảng này, chúng ta sẽ xem xét chi tiết các khái niệm cơ bản về rest và spread, cũng như các ví dụ sử dụng của chúng.

Toán tử spread (...) cho phép "giải nén" các mảng và đối tượng tại những nơi mà mong đợi không được nhiều hơn một phần tử. Điều này có thể hữu ích khi sao chép, kết hợp các mảng hoặc đối tượng, cũng như khi truyền các tham số vào hàm.

Ví dụ 1: Sao chép mảng

Trong ví dụ này, copiedArray là một bản sao của originalArray.

Ở đây, toán tử … giải nén mảng thành một danh sách biến, và toán tử [] đóng gói nhóm biến vào một mảng mới:

    
      const originalArray = [1, 2, 3];
      const copiedArray = [...originalArray];

      console.log(copiedArray); // Xuất ra: [1, 2, 3]
    
  

Ví dụ 2: Kết hợp mảng

Trong ví dụ này, hai mảng array1 và array2 được kết hợp thành một mảng combinedArray.

Ở đây, toán tử … giải nén cả hai mảng thành một danh sách biến, và toán tử [] đóng gói nhóm biến vào một mảng mới:

    
      const array1 = [1, 2, 3];
      const array2 = [4, 5, 6];
      const combinedArray = [...array1, ...array2];

      console.log(combinedArray); // Xuất ra: [1, 2, 3, 4, 5, 6]
    
  

Ví dụ 3: Truyền tham số vào hàm

Trong ví dụ này, mảng numbers được giải nén thành ba tham số cho hàm sum():

    
      function sum(a, b, c) {
        return a + b + c;
      }

      const numbers = [1, 2, 3];

      console.log(sum(...numbers)); // Xuất ra: 6
    
  

Ví dụ 4: Sao chép đối tượng

Trong ví dụ này, copiedObject là một bản sao của originalObject:

    
      const originalObject = { a: 1, b: 2 };
      const copiedObject = { ...originalObject };

      console.log(copiedObject); // Xuất ra: { a: 1, b: 2 }
    
  

Ví dụ 5: Kết hợp đối tượng

Trong ví dụ này, hai đối tượng obj1 và obj2 được kết hợp thành một đối tượng combinedObject:

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

      console.log(combinedObject); // Xuất ra: { a: 1, b: 2, c: 3, d: 4 }
    
  

9.2 Rest (toán tử tham số còn lại)

Toán tử rest (...) cho phép thu thập nhiều phần tử thành một mảng. Điều này rất hữu ích khi làm việc với các hàm nhận số lượng tham số biến đổi, cũng như khi phân rã mảng và đối tượng.

Ví dụ 1: Tham số còn lại trong hàm

Trong ví dụ này, hàm sum() nhận bất kỳ số lượng tham số nào và tính tổng chúng:

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

      console.log(sum(1, 2, 3)); // Xuất ra: 6
      console.log(sum(4, 5, 6, 7)); // Xuất ra: 22
    
  

Ví dụ 2: Phân rã mảng với rest

Trong ví dụ này, hai phần tử đầu tiên của mảng được gán cho các biến first và second, còn lại các phần tử được thu thập thành một mảng rest:

    
      const [first, second, ...rest] = [1, 2, 3, 4, 5];

      console.log(first);  // Xuất ra: 1
      console.log(second); // Xuất ra: 2
      console.log(rest);   // Xuất ra: [3, 4, 5]
    
  

Ví dụ 3: Phân rã đối tượng với rest

Trong ví dụ này, các thuộc tính a và b được trích xuất thành các biến riêng lẻ, còn lại các thuộc tính được thu thập thành một đối tượng rest:

    
      const { a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4 };

      console.log(a);  // Xuất ra: 1
      console.log(b);  // Xuất ra: 2
      console.log(rest); // Xuất ra: { c: 3, d: 4 }
    
  

9.3 Ứng dụng của rest và spread trong các bài toán thực tế

Ví dụ 1: Kết hợp mảng có điều kiện

Trong ví dụ này, cài đặt của người dùng userSettings ghi đè lên các giá trị mặc định defaultSettings:

    
      const defaultSettings = { theme: 'dark', showNotifications: true };
      const userSettings = { showNotifications: false, fontSize: 14 };
      const settings = { ...defaultSettings, ...userSettings };

      console.log(settings); // Xuất ra: { theme: 'dark', showNotifications: false, fontSize: 14 }
    
  

Ví dụ 2: Chia mảng thành các phần

Trong ví dụ này, mảng numbers được chia thành hai phần sau khi trích xuất hai phần tử đầu tiên:

    
      const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      const [first, second, ...rest] = numbers;
      const firstHalf = rest.slice(0, Math.floor(rest.length / 2));
      const secondHalf = rest.slice(Math.floor(rest.length / 2));

      console.log(firstHalf); // Xuất ra: [3, 4, 5, 6]
      console.log(secondHalf); // Xuất ra: [7, 8, 9, 10]