VoMinh
VoMinh
Mar 5, 2018 · 3 min read

Spread là trây trét, API giúp bạn trây trét những kiểu dữ liệu có thể trây trét được. Giống như bạn trây trét bơ lên bánh mì hoặc trây trét kem vậy.

Photo by FOODISM360 on Unsplash

Bài viết đã được chuyển qua blog mới:

ES6 có nhiều API mới rất tiện lợi và thú vị. Chúng ta sẽ từ từ tìm hiểu tất cả những API này, nhưng trước hết hãy thử qua một API giúp chúng ta làm việc hiệu quả hơn với các dạng dữ liệu có tính lặp đi lặp lại như string, array, set, v.v..

Cú pháp thì cực kỳ đơn giản:

...<biến có kiểu dữ liệu lặp đi lặp lại>

Khi sử dụng cú pháp này thì giá trị của biến sẽ được phân rã ra thành các phần tử và tùy theo trường hợp sử dụng mà nó sẽ được xử lý theo các khác nha. Hãy cũng tìm hiểu nó thông qua các ví dụ.

Nếu bạn thấy font trên trang này lỗi, hãy cài extension của 12bit để font đẹp và dễ đọc hơn:
Tải bản dành cho Chrome.
Tải bản dành cho Firefox.

Thay thế cho phương thức apply

Ngày xưa, khi hàm có nhiều tham số và chúng ta muốn dùng các phần tử trong mảng để lần lượt làm giá trị cho các tham số thì sẽ code như sau:

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);

Đối với cú pháp spread thì sẽ đơn giản hơn rất nhiều

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);

Hoặc thậm chí là

function myFunction(v, w, x, y, z) { }
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);

Thú vị là có thể dùng với các phương thức có sẵn như Max:

Giúp thao tác với mảng tiện lợi hơn

Để nối array ngày xưa cũng không phức tạp, có thể dùng phương thức concat.

Nhưng còn muốn chèn array vào giữa hoặc tệ hơn là vào vị trí bất kỳ nào đó thì sao? Với spread thì đơn giản hơn nhiều:

Merge object

Merge object cũng đơn giản và ngắn gọn hơn:

Copy array

Hãy xem cách copy sau đây:

Nhìn nó có vẻ ổn nhỉ. nhưng thực ra nó không đúng. Vì đây chỉ là copy preference thôi chứ không phải thực sự copy giá trị:

Nhưng với spread thì hoạt động hoàn hảo:

Chuyển string thành array

Chỉ cần xem string như là một kiểu dữ liệu lặp đi lặp lại các ký tự, thì chúng ta có thể sử dụng spread như sau:

Lời kết

API mới với chỉ ba dấu chấm nhưng giúp chúng ta tiết kiệm khá nhiều thời gian mà đáng lý phải mất vào những thứ vặt vảnh, lặp đi lặp lại, thay vào đó ta có thể làm những việc quan trọng hơn ví dụ như tìm cái gì đó có thể trây trét thực sự.

12bit

Chia sẻ kiến thức về lập trình web: Javascript, PHP, WordPress, Laravel, VueJS

VoMinh

Written by

VoMinh

Mãi mãi xin được làm ngọn gió, nâng dưới cánh hoa nơi bước chân Người.

12bit

12bit

Chia sẻ kiến thức về lập trình web: Javascript, PHP, WordPress, Laravel, VueJS

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade