Một số tip trick hay khi sử dụng Spread Operator trong Javascript

117

Xin chào các bạn mình là Triều Vĩ. Hôm nay chúng ta sẽ cùng nhau đi tìm hiểu về Spread Operator trong Javascrip nhé. Nói vui là sử dụng dấu “3 chấm” đấy! ^^

Chắc hẵn bạn nào đã từng code với Javascript ES6 thì cũng đã từng sử dụng qua Spread Operator rồi. Dùng thì dùng thế thôi nhưng mình biết là có nhiều bạn sẽ không hiểu nó là gì và hoạt động ra làm sao. Để hiểu rõ hơn chúng mình cùng đi sâu vào vấn đề nhé!

#1 Spread Operator là gì?

“Spread Operator nó cho phép chuyển đổi một chuỗi thành nhiều argument (trong trường hợp gọi với hàm) hoặc nhiều phần tử (cho array). Thêm vào nữa nó cũng cho phép làm nhiệm vụ destructure. Operator có cú pháp (syntax) là 3 dấu chấm ...

Để hiểu rõ hơn về khái niệm của Spread Operator các bạn có thể truy cập đường dẫn ở bài viết này để hiểu rõ hơn về nó nhé! Link tại đây !

#2 Một số ví dụ hiểu rõ hơn về Spread Operator

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

Trước kia, khi một hàm có nhiều tham số và mình 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ì chúng ta sẽ code như sau:

var myFunction = (a,b,c) => { } //ES6
var test = [0, 1, 2];
myFunction.apply(null, test);

Khá ra rườm rà nhỉ? Nhưng giờ đây với Spread Operator chúng ta sẽ viết một cách đơn giản và dễ hiểu hơn như sau:

var myFunction = (a,b,c) => { } //ES6
var test = [0, 1, 2];
myFunction(...test)

// HOẶC CÓ THỂ LÀ

var myFunction = (a,b,c,d,e) => { } //ES6
var test = [0, 1];
myFunction(-1, ...test, 2, ...[3]);

Có một điều thú vị hơn nữa là có thể sử dụng với phương thức Max

let numbers = [2,5,7,8,0,11,9,6]
=> console.log(Math.max(...numbers))

Thao tác với mảng tiện lợi hơn

Ngày xưa muốn nối mảng lại với nhau ta có thể sử dụng phương thức concat rất chi là đơn giản như thế này đây :

let test1 = [1, 2];
let test2 = [3, 4];
let test3 = [...test1, ...test2]
console.log(test3)

Nhưng với trường hợp chúng ta muốn chèn mảng (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 Operator thì đơn giản như thế này:

et test1 = [1, 2];
let test2 = [3, 4];
let test3 = [5, 6, ...test1, 7, 8, ...test2, 9, 10]
console.log(test3)

Merge & Copy object

Với Spread Operator thì ta có thể merge object một cách đơn giải như sau:

var object01 = { foo: 'bar', x: 42 };
var object02 = { foo: 'baz', y: 13 };

var copyObj = { ...object01 };
// Object { foo: "bar", x: 42 }

var mergedObj = { ...object01, ...object02 };
// Object { foo: "baz", x: 42, y: 13 }

Copy array

Thường thì nếu copy một array thì chúng ta sẽ làm như thế này:

let arr1 = [1,2,3,4]
let arr2 = [5,6,7,8]
let concat = [...arr1, ...arr2]

// concat is [ 1, 2, 3, 4, 5, 6, 7, 8 ]

Nhìn thì có vẻ khá là “ngon lành” nhưng thực sự mà nói thì nó không đúng. Đây chỉ mới là copy preference thôi chứ không phải là copy value. Với Spread Operator chúng ta sẽ làm như vầy:

let arr = [1,2,3,4]
let copy = [...arr]

// console.log(copy) =>  copy is [ 1, 2, 3, 4 ]

#3 Bonus lời kết

Khi làm việc với API với Spread Operator 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ự.

Đây là một số mẹo nhỏ khi sử dụng Spread Operator mà mình biết được. Nếu bạn đọc biết điều gì hay ho về nó hãy comment phía bình luận cùng nhau tham khảo nhé.

Chúc các bạn thành công!