JavaScript Spread Operator: Hướng dẫn toàn tập

Toán tử spread JavaScript mở rộng mảng trong cú pháp chấp nhận đối số. Spread operator thường dùng để sao chép đối tượng, gộp mảng, hoặc truyền nội dung danh sách vào hàm.

Toán tử spread (spread operator). Không, nó không liên quan đến bánh mì bơ. Trong JavaScript, spread operator có ý nghĩa cụ thể: cách truy cập nội dung của đối tượng lặp được (iterable object). Dù nghe không vui như bôi bơ lên bánh mì, nhưng nó công cụ cực kỳ hữu ích cần biết.

Trong hướng dẫn này, ta nói về JavaScript spread operator và cách hoạt động. Sẽ đi qua vài ví dụ trường hợp dùng phổ biến để bạn bắt đầu.

JavaScript Spread Operator là gì?

Toán tử spread JavaScript cho phép truy cập nội dung của iterable object. Spread operator là ba chấm (ellipsis) theo sau tên iterable muốn truy cập. Toán tử này giới thiệu trong JavaScript ES6.

Ba loại iterable object: mảng (arrays), object literal, và chuỗi (strings). Dùng vòng lặp for, có thể lặp qua tất cả loại dữ liệu này và chạy quy trình chung.

Iterable object hữu ích vì có thể thực thi cùng quy trình nhiều lần. Có thể lặp chuỗi thay thế ký tự. Lặp mảng tạo tổng giá trị lưu trong mảng.

Cú pháp spread operator:

var names = ["John", "Lisa", "Harry"];
var new_names = [...names, "Leslie"];
console.log(new_names);

Trong cú pháp này, dùng ...names truyền nội dung list "names" vào list "new_names". List "new_names" chứa tất cả mục trong "names", thêm tên mới: Leslie.

Ba trường hợp dùng phổ biến spread operator:

• Tạo bản sao iterable.
• Thêm mục vào iterable mới.
• Truyền danh sách đối số vào hàm.

Cú pháp spread đại diện cho tất cả phần tử riêng lẻ trong list.

Spread Operator JavaScript: Tạo bản sao Iterable

Spread operator là phương pháp hiệu quả nhân bản iterable. Dù có cách khác giải quyết, spread operator rất dễ dùng. Để tạo bản sao iterable, chỉ định ba chấm và tên mảng muốn tạo.

Trong ví dụ trước, ta demo với mảng. Cũng có thể dùng spread operator nhân bản JavaScript object:

const lemon_drizzle = {
  name: "Lemon Drizzle",
  price: 1.95,
  vegan: true
}
const new_lemon_drizzle = {...lemon_drizzle};
console.log(new_lemon_drizzle);

Code in ra console:

{ name: "Lemon Drizzle", price: 1.95, vegan: true }

Có vài phân biệt quan trọng. Ta tạo bản sao JavaScript object. Nghĩa là dùng ngoặc nhọn {} thay vì ngoặc vuông [].

Thứ hai, thay vì chỉ định một mảng, ta chỉ định object. Object chứa ba cặp key-value liên quan bánh cupcake "Lemon Drizzle".

Spread JavaScript: Thêm mục vào Iterable mới

Trường hợp dùng spread operator không dừng ở sao chép iterable! Còn nhiều hơn. Spread operator thường dùng thêm mục từ iterable này sang iterable khác. Xem ví dụ:

const cupcakes = [
  'Lemon Drizzle',
  'Chocolate Chip',
  'Vanilla Iced'
];
const new_cupcakes = [...cupcakes, 'Red Velvet', 'Raspberry Dark Chocolate'];
console.log(new_cupcakes);

Code trả về:

["Lemon Drizzle", "Chocolate Chip", "Vanilla Iced", "Red Velvet", "Raspberry Dark Chocolate"]

Ta tạo bản sao mảng gốc "new_cupcakes" cũng bao gồm vài giá trị thêm mới tạo.

Cú pháp tương tự dùng gộp (merge) hai iterable. Chỉ cần chỉ định hai iterable trong ngoặc vuông dùng spread operator:

const old_menu = [
  'Lemon Drizzle',
  'Chocolate Chip',
  'Vanilla Iced'
];
const new_menu = [
  'Red Velvet',
  'Raspberry Dark Chocolate'
];
const final_menu = [...old_menu, ...new_menu];
console.log(final_menu);

Code trả về:

["Lemon Drizzle", "Chocolate Chip", "Vanilla Iced", "Red Velvet", "Raspberry Dark Chocolate"]

Kết quả giống hệt trước nhưng lần này gộp hai mảng.

Spread JavaScript: Truyền đối số vào hàm

Khi truyền nhiều đối số vào hàm JavaScript, dùng spread operator rất giúp ích. Xem ví dụ:

function placeOrder(name, order, price) {
  console.log('Name: ' + name);
  console.log('Order: ' + order);
  console.log('Price: ' + price);
}
placeOrder('Geoff', 'Red Velvet', 1.85);

Code trả về:

Name: Geoff
Order: Red Velvet
Price 1.85

Khai báo hàm placeOrder() nhận ba đối số và in ra console. Mỗi giá trị có nhãn mô tả đối số chứa gì.

Code này functional, nhưng có thể chỉ định đối số trong mảng và dùng spread operator truyền vào hàm:

function placeOrder(name, order, price) {
  console.log('Name: ' + name);
  console.log('Order: ' + order);
  console.log('Price: ' + price);
}
const order = ['Geoff', 'Red Velvet', 1.85];
placeOrder(...order);

Code trả về:

Name: Geoff
Order: Red Velvet
Price 1.85

Output giống hệt, nhưng cách code hoạt động khác. Thay vì truyền giá trị trực tiếp cho hàm, ta chỉ định giá trị trong list. Sau đó dùng spread operator truyền giá trị vào hàm.

Kết luận

Spread operator dùng rộng rãi trong JavaScript. Làm cho việc sao chép iterable object, thêm mục vào iterable mới, và truyền đối số cho hàm trở nên dễ dàng. Cú pháp spread operator là ba chấm, theo sau iterable object muốn truy cập.

Bây giờ bạn sẵn sàng dùng JavaScript spread operator như pro!

Lời khuyên tài nguyên học JavaScript top, sách, khóa học, xem bài How to Learn JavaScript.