JavaScript

Spread operator trong JavaScript là gì ?

Posted on by Dục Đoàn Trình
Rate this post

Spread operator (dấu …) trong JavaScript là một tính năng mới trong ECMAScript 6 (ES6) cho phép bạn truyền nhiều giá trị hoặc các phần tử của một mảng hoặc đối tượng vào một hàm hoặc tạo ra một mảng mới.

Các bài viết liên quan:

Lợi ích khi sử dụng spread operator ?

  • Sử dụng spread operator giúp bạn truyền nhiều giá trị hoặc các phần tử của một mảng hoặc đối tượng vào một hàm hoặc tạo ra một mảng mới mà không cần sử dụng các phương thức như push(), concat()
  • Sử dụng spread operator có thể giúp bạn giảm số lượng dòng code và tăng tốc độ xử lý.
  • Sử dụng spread operator có thể giúp bạn tránh việc thay đổi giá trị của một mảng hoặc đối tượng gốc khi muốn tạo một bản sao.
  • Sử dụng spread operator có thể giúp bạn tạo một mảng hoặc đối tượng mới mà không liên quan đến mảng hoặc đối tượng gốc.
  • Sử dụng spread operator có thể giúp bạn tách một mảng hoặc đối tượng thành nhiều giá trị hoặc phần tử mà không cần sử dụng các hàm như slice().
  • Sử dụng spread operator có thể giúp bạn gán giá trị cho nhiều thuộc tính của một đối tượng mà không cần sử dụng các hàm như Object.assign() hoặc _.extend()
  • Spread operator có thể giúp bạn truyền nhiều giá trị hoặc các phần tử của một mảng hoặc đối tượng vào một hàm hoặc tạo ra một mảng mới mà không cần sử dụng các hàm như apply() hoặc call().

Cách sử dụng Spread operator trong JavaScript

Sử dụng Spread operator trong JavaScript rất đơn giản. Chúng ta chỉ cần sử dụng dấu … trước một mảng hoặc đối tượng để sử dụng spread operator.

Ví dụ:

  • Truyền nhiều giá trị vào một hàm:
function sum(a, b, c) {

  return a + b + c;

}

let numbers = [1, 2, 3];

console.log(sum(...numbers)); // 6
  • Tạo một mảng mới bằng cách gộp hai mảng:
let arr1 = [1, 2, 3];

let arr2 = [4, 5, 6];

let arr3 = [...arr1, ...arr2];

console.log(arr3); // [1, 2, 3, 4, 5, 6]
  • Tách một mảng hoặc đối tượng thành nhiều giá trị hoặc phần tử:
let [a, b, c] = [1, 2, 3];

console.log(a); // 1

console.log(b); // 2

console.log(c); // 3
  • Gán giá trị cho nhiều thuộc tính của một đối tượng:
let obj1 = { a: 1, b: 2 };

let obj2 = { c: 3, d: 4 };

let obj3 = { ...obj1, ...obj2 };

console.log(obj3); // { a: 1, b: 2, c: 3, d: 4 }

Những lưu ý khi sử dụng  Spread operator 

  • Cần chú ý rằng spread operator không có thể sử dụng để sao chép một đối tượng hoặc mảng hoàn toàn mới, nó chỉ tạo ra một bản sao tham chiếu của đối tượng hoặc mảng gốc. Nếu muốn tạo ra một bản sao hoàn toàn mới thì cần sử dụng JSON.parse(JSON.stringify(object)) hoặc sử dụng các thư viện như lodash hay underscore.
  • Cần chú ý khi sử dụng spread operator với mảng hoặc đối tượng lồng nhau, sẽ gây ra lỗi hoặc không hoạt động như mong đợi.
  • Cần chú ý khi sử dụng spread operator với các thuộc tính hoặc phần tử của một đối tượng hoặc mảng không tồn tại, sẽ gây ra lỗi hoặc không hoạt động như mong đợi.
  • Cần chú ý khi sử dụng spread operator với các thuộc tính hoặc phần tử của một đối tượng hoặc mảng không tồn tại, sẽ gây ra lỗi hoặc không hoạt động như mong đợi.
  • Cần chú ý khi sử dụng spread operator với các tham số hoặc biến không phải là một mảng hoặc đối tượng, sẽ gây ra lỗi hoặc không hoạt động như mong đợi.
  • Cần chú ý khi sử dụng spread operator với các tham số hoặc biến có giá trị null hoặc undefined, sẽ gây ra lỗi hoặc không hoạt động như mong đợi.
  • Cần chú ý khi sử dụng spread operator với các tham số hoặc biến có giá trị không xác định, sẽ gây ra lỗi hoặc không hoạt động như mong đợi.
  • Cần chú ý khi sử dụng spread operator với các tham số hoặc biến có giá trị đã được sử dụng trước đó, có thể gây ra lỗi hoặc không hoạt động như mong đợi.

Ngoài ra, nếu bạn đang sử dụng spread operator với một mảng hoặc đối tượng lồng nhau, cần chú ý đến việc sử dụng từ khóa ‘deep’ để tránh lỗi hoặc không hoạt động như mong đợi.

Các trường hợp thường sử dụng Spread operator 

Ví dụ 1: Truyền nhiều giá trị vào một hàm:

function sum(a, b, c) {

  return a + b + c;

}

let numbers = [1, 2, 3];

console.log(sum(...numbers)); // 6

Ví dụ 2: Tạo một mảng mới bằng cách gộp hai mảng:

let arr1 = [1, 2, 3];

let arr2 = [4, 5, 6];

let arr3 = [...arr1, ...arr2];

console.log(arr3); // [1, 2, 3, 4, 5, 6]

Ví dụ 3: Tách một mảng hoặc đối tượng thành nhiều giá trị hoặc phần tử:

let [a, b, c] = [1, 2, 3];

console.log(a); // 1

console.log(b); // 2

console.log(c); // 3

Ví dụ 4: Gán giá trị cho nhiều thuộc tính của một đối tượng:

let obj1 = { a: 1, b: 2 };

let obj2 = { c: 3, d: 4 };

let obj3 = { ...obj1, ...};

Ví dụ 5: Gộp nhiều đối tượng lại với nhau:

let obj1 = { a: 1, b: 2 };

let obj2 = { c: 3, d: 4 };

let obj3 = { e: 5, f: 6 };

let obj4 = { ...obj1, ...obj2, ...obj3 };

console.log(obj4); // { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }

Ví dụ 6: Gộp một mảng hoặc đối tượng vào một thuộc tính của một đối tượng khác:

let obj1 = { a: 1, b: 2 };

let obj2 = { c: 3, d: 4 };

let obj3 = { ...obj1, e: obj2 };

console.log(obj3); // { a: 1, b: 2, e: { c: 3, d: 4 } }

Ví dụ 7: Sử dụng spread operator để sao chép một đối tượng hoặc mảng:

let arr1 = [1, 2, 3];

let arr2 = [...arr1];

console.log(arr1 === arr2); // false

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

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

Những ví dụ trên chỉ là một số ví dụ thường sử dụng của Spread operator trong Javascript, còn rất nhiều cách sử dụng khác mà bạn có thể tìm hiểu thêm.

Kết luận 

Spread operator là một tính năng mạnh mẽ trong JavaScript cho phép chúng ta truyền nhiều giá trị, tạo mới một mảng hoặc đối tượng, gán giá trị cho nhiều thuộc tính của một đối tượng, gộp nhiều đối tượng lại với nhau và sao chép một đối tượng hoặc mảng. Nhưng cũng cần chú ý khi sử dụng nó để tránh lỗi hoặc không hoạt động như mong đợi.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now