Giới thiệu Spread Operator của ES2015 (hay ES6)
Javascript
247
White

Lơi Rệ viết ngày 18/09/2015

Spread Operator là gì?

Trong ES6 spec có giới thiệu một chức năng mới khá là lợi hại mà không phải ai cũng hay dùng, đó là Spread Operator. Chức năng này không có gì là xa lạ với các ngôn ngữ khác, trong thế giới Ruby thì nó tương đương splat operator.

Spread Operator 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 thành 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 này có syntax là 3 dấu chấm ..., khá là dị hợm và khó hiểu nhỉ, nhưng nói thế chứ cái splat bên Ruby cũng chẳng mấy dễ hiểu hơn cho người mới nhập môn.

Dùng operator này ra sao? Hãy cùng xem xét các chức năng chính của nó thông qua các ví dụ minh hoạ ở dưới.

Cho mở rộng thành argument cho việc gọi hàm

Nếu chúng ta có một hàm như sau:

function sayMyName(firstName, lastName) {}

và chúng ta có một array object có thông tin của firstNamelastName:

var fullName = ["Rơi", "Lệ"]

để gán biến fullName vào argument firstNamelastName của hàm thì chúng ta làm như sau:

sayMyName(fullName[0], fullName[1])

Hoặc một cách khác tốt hơn nếu chúng ta không biết đc biến đó dài bao nhiêu với Function.prototype.apply:

sayMyName.apply(null, fullName)

với ES6 thì chúng ta có thể áp dụng spread operator ở đây:

sayMyName(...fullName)

ở đây spread sẽ tự động biến array fullName và tách chúng ra thành 2 arguments.

Mở rộng ví dụ thêm 1 tí:

function sayMyName(firstName, lastName, concertName, nickName) {}

chúng ta còn có thể áp dụng spread nhiều lần:

sayMyName(...fullName, "Thím Rợi", ...["Lợi"])

Có thể thấy là spread rất lợi hại trong việc biến đổi array thành argument.

Cho array

Nếu chúng ta có 2 array như sau:

var album1 = ["Tình thôi xót xa", "Sài Gòn lụt"]
var album2 = ["Sót xa"]

vâng, ca sĩ Lệ Rơi muốn gộp tất cả các bài của album1 vào album2 thì phải làm sao? Cổ điển thì dùng hàm concat:

var album2 = album2.concat(album1)

Nhưng chúng ta có thể áp dụng spread ở đây:

var album2 = ["Sót xa", ...album1]

À, còn một cách khác nữa, đó là dùng hàm push:

for (let song in album1) {
  album2.push(song)
}

đấy là cách hơi chuối vì chúng ta phải vòng lặp rồi sau đó áp dụng hàm push, lưu ý là hàm này cho phép thêm vào nhiều phần từ dưới định dạng argument như sau:

array.push(arg1, arg2, arg3)

với ... thì chúng ta có thể tuỳ biến lại:

album2.push(...album1)

Gọn và đẹp nhỉ :)

Cho áp dụng với construct new

Ví dụ chúng ta có một array danh sách học sinh như sau

var studentList = fetchStudentFromDb();

và chúng ta có một class ScienceClass nhận vào một array dánh sách, trong trường hợp này thường thì chúng ta sẽ nghĩ đến cách áp dụng Function.prototype.apply, nhưng tiếc là không thể dùng đc nó trong trường hợp này, tại vì hàm apply không thể đc gọi trên một construct, trong trường hợp này là construct new.

Để giải quyết chúng ta có thể áp dụng spread:

var myClass = new ScienceClass(...studentList)

Kết luận

Spread operator là một bổ sung đáng hoan nghênh của ngôn ngữ JS, nó giúp biến đổi array thành argument một cách dễ dàng, nó giống splat operator của ngôn ngữ Ruby.

Thế tôi mới tự hỏi là bây giờ muốn nhóm argument vào thành một array thì sao (chiều ngược lại), đáng tiếc là điều đó không thể làm được. Vd nhé:

function say(...messages) {
  return messages;
}

say('hello', 'world') // => ['hello', 'world']

tiếc là cú pháp trên không hợp lệ, chúng ta có thể dùng hàm arguments để trả về array tất cả argument nhưng dù gì cũng thiếu một bước là bị mất cái tên biến của cái array này.

hi vọng một ngày nào đó JS sẽ hỗ trợ, trong thời điểm bây giờ thì các bạn độc giả dùng Ruby cứ vững tin tiếp tục với Ruby nhé.

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Lơi Rệ

43 bài viết.
223 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
70 12
Sự sống còn của các công ty kỹ thuật phụ thuộc vào nguồn nhân lực chất xám của họ. Thế nên rất thiết yếu cho việc đầu tư xây dựng team có khả năng ...
Lơi Rệ viết hơn 2 năm trước
70 12
White
40 7
Trời se se lạnh, Melbourne chuyển mùa, ngồi trong quán cafe bắt đầu một ngày làm việc mới với suy nghĩ tại sao các bạn Việt Nam không muốn tham gia...
Lơi Rệ viết 3 năm trước
40 7
White
36 15
Thế nào là làm việc từ xa? Internet, một trong những phát minh vĩ đại nhất của con người thế kỷ 20. Công nghệ này xoả bỏ rào cản vật lý giữa các n...
Lơi Rệ viết hơn 2 năm trước
36 15
Bài viết liên quan
White
43 8
Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...
Huy Hoàng Phạm viết hơn 2 năm trước
43 8
White
27 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hoàng Duy viết gần 3 năm trước
27 8
White
6 0
Có bao giờ bạn thắc mắc, chuyện gì thực sự diễn ra khi chúng ta gõ một địa chỉ trang web (ví dụ: (Link)) lên trình duyệt và nhấn Enter? Đầu tiên, t...
Lam Pham viết 6 tháng trước
6 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
43 bài viết.
223 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!