GALAXY TECH
Chuyên gia Công nghệ
Thứ năm, 05/12/2019 | 00:00 GMT+7

Toán tử Spread được sử dụng để làm gì trong JavaScript?

Tìm hiểu về toán tử lây lan ES6 và một số cách sử dụng thực tế cho tính năng JavaScript mạnh mẽ này!

Toán tử lây lan là một tính năng của JavaScript được giới thiệu với ES6 cho phép bạn truy cập vào bên trong của một đối tượng có thể lặp lại . Thuật ngữ “đối tượng có thể lặp lại” thực sự chỉ là một thuật ngữ khoa học máy tính dành cho một loại kiểu dữ liệu. Cụ thể: mảng, các đối tượng và chuỗi ký tự.

Điều gì khiến chúng "có thể lặp lại"? Các loại JavaScript này có thể được duyệt theo một số kiểu tuần tự. Ví dụ: bạn có thể sử dụng vòng lặp for trên một mảng hoặc với các ký tự đối tượng, bạn có thể sử dụng vòng lặp for… in .

Toán tử spread cung cấp cho bạn quyền truy cập một cách hiệu quả vào “nội dung” bên trong các đối tượng có thể lặp lại này. Hãy xem một ví dụ để minh họa điều đó nghĩa là gì:

const foo = [
  'hello',
  'bonjour',
  'konnichiwa'
];
const bar = [...foo]; // the three dots "..." are the spread operator syntax!

console.log(bar);
// ['hello', 'bonjour', 'konnichiwa'];

Biến bar có một bản sao chính xác từ foo ! Ái chà…

const foo = [
  <^>'hello',
  'bonjour',
  'konnichiwa'<^>
]
const bar = [...foo]

Toán tử spread về cơ bản đã loại bỏ phần bên trong của mảng foo và trải các giá trị trên mảng mới trong bar .

Bây giờ ta đã có một ý tưởng cơ bản, hãy xem xét các nhiệm vụ phổ biến mà toán tử spread có thể hữu ích.

Nhân bản các đối tượng có thể lặp lại

Như ta đã thấy trước đó, toán tử spread là một trong những cách tốt nhất để nhân bản một đối tượng có thể lặp lại. Có nhiều cách phức tạp hơn để làm điều này, nhưng tính ngắn gọn của toán tử spread khiến nó trở nên dễ dàng một cách thú vị.

const foo = ['hello', 'bonjour', 'konnichiwa'];
const bar = ...foo; // uh-oh :<

Kinda lén theo dõi ya. Bạn phải thả nó vào một bộ dấu ngoặc mới trong bar ! 😬

const foo = ['hello', 'bonjour', 'konnichiwa'];
const bar = [...foo]; // woohoo! :>

console.log(bar);
// ['hello', 'bonjour', 'konnichiwa']

Việc sử dụng toán tử spread để sao chép các ký tự đối tượng không khác nhiều so với mảng. Chỉ cần nhớ BYOB (mang theo dấu ngoặc của bạn ):

const foo = {
  english: 'hello',
  french: 'bonjour',
  japanese: 'konnichiwa'
};
const bar = {...foo};

console.log(bar);
// { english: 'hello', french: 'bonjour', japanese: 'konnichiwa' }

Hợp nhất các đối tượng có thể lặp lại

Toán tử spread cũng được dùng để tạo một giá trị duy nhất từ một số giá trị khác!

const foo = ['hello', 'bonjour', 'konnichiwa'];
const bar = ['gutentag', 'hello-ey'];
const baz = [...foo, ...bar];

console.log(baz);
// ['hello', 'bonjour', 'konnichiwa', 'gutentag', 'hello-ey']

Bây giờ baz là giá trị hợp nhất của cả foo và bar . Bạn cũng có thể đặt mảng dàn trải bên trong một mảng khác:

const foo = ['hello', 'bonjour', 'konnichiwa'];
const bar = [...foo, 'gutentag', 'hello-ey'];

console.log(bar);
// ['hello', 'bonjour', 'konnichiwa', 'gutentag', 'hello-ey']

Đây là nơi mà bản năng JavaScript được đào tạo tốt của bạn có thể nghĩ rằng điều này trông thực sự kỳ lạ… Nhưng hãy nhớ rằng toán tử spread chỉ nắm giữ “công cụ”. Bạn đặt “thứ” đó ở đâu là tùy thuộc vào bạn! 💫

Làm thế nào về các nghĩa đen đối tượng? Nó rất giống với việc hợp nhất các mảng:

const foo = {
  english: 'hello',
  french: 'bonjour',
  japanese: 'konnichiwa'
};
const bar = {
  german: 'gutentag',
  canadian: 'hello-ey'
};
const baz = {...foo, ...bar};

console.log(baz);
// { english: 'hello', french: 'bonjour', japanese: 'konnichiwa', german: 'gutentag', canadian: 'hello-ey' }

Bùm! Đây từng là một nhiệm vụ cho Object.assign () nhưng cú pháp spread làm cho điều này ngắn gọn hơn nhiều.

Điều gì xảy ra khi có các khóa trùng lặp?

const foo = {
  english: 'hello',
  french: 'bonjour',
  japanese: 'konnichiwa'
};
const bar = {
  english: 'howdy',
  german: 'gutentag'
};
const baz = {
  ...foo,
  ...bar,
  canadian: 'hello-ey',
  korean: 'annyeong'
};

console.log(baz);
// { english: 'howdy', french: 'bonjour', japanese: 'konnichiwa', german: 'gutentag', canadian: 'hello-ey', korean: 'annyeong' }

Các khóa trùng lặp bị overrides !

Lưu ý dấu chấm lửng đi trước biến không phải sau : ...myVariable không phải myVariable...

Đưa các đối số vào các hàm

Bạn có thể gặp điều này ít thường xuyên hơn, nhưng bạn cũng có thể sử dụng toán tử spread để đưa các đối số vào một hàm.

const cube = [12, 30, 14];

function calcVolume(width, height, depth) {
  return width * height * depth;
};

calcVolume(12, 30, 14);         // basic
calcVolume.apply(null, cube);   // using "apply"
calcVolume(...cube);          // using "spread operator"

Toán tử spread làm cho việc nạp một loạt các đối số vào các hàm vô cùng dễ dàng.

Bạn đã nói điều gì đó về chuỗi

Cuối cùng, bạn cũng có thể sử dụng toán tử spread với các chuỗi vì chúng cũng được coi là một đối tượng có thể lặp lại (nó có các hàm slice và length !)

const foo = "jumanji";
const bar = [...foo];

console.log(bar);
// [ "j", "u", "m", "a", "n", "j", "i" ]

Bạn có thể không gặp phải nhu cầu sử dụng toán tử trải rộng cho các chuỗi trừ khi bạn phát triển phần mềm để xử lý ngôn ngữ tự nhiên hoặc một số loại máy học. Tôi không chắc… Nhưng nó chắc chắn hoạt động trên chuỗi!

Kết luận

Toán tử spread là một tính năng được yêu cầu cao đã có sẵn trong các ngôn ngữ cũ như C ++ và Python, và bây giờ nó ở đây! Nó làm cho một số tác vụ lập trình thông thường thực sự dễ dàng thực hiện và hy vọng bạn đã học được những cách thực tế để sử dụng nó!

XemMDN để biết tài liệu chuyên sâu về toán tử trải.

Tags:

Các tin liên quan