Kiểu dữ liệu Set trong JavaScript

Dẫn nhập

Ở bài trước, chúng ta đã cùng tìm hiểu về Array(mảng) trong JavaScript

Trong bài này, các bạn sẽ được tìm hiểu về một kiểu dữ liệu mới: set trong JavaScript

---

Nội dung

Những nội dung mà chúng ta sẽ cùng tìm hiểu trong bài này:

• Kiểu dữ liệu set trong JavaScript
• Các phương thức với set trong JavaScript

---

Kiểu dữ liệu set trong JavaScript

Set là một tập hợp các giá trị, mà trong đó, mỗi giá trị chỉ có thể xuất hiện một lần duy nhất. Các giá trị của 1 set được đặt trong cặp {}, nhưng nó không phải là cặp key-value (object).

Khởi tạo một set

Để khởi tạo một set, ta dùng cú pháp sau:

new Set(<iterable>)

Cụ thể, mỗi phần tử của <iterable> sẽ trở thành một phần tử trong set. Và tất nhiên, một điều kiện thứ yếu là mỗi giá trị chỉ xuất hiện một lần. Tức là, sẽ không bao giờ xuất hiện 2 giá trị giống nhau trong 1 set.

Lưu ý: Bắt buộc phải có từ khóa new. Nếu không có ‘new’ chương trình sẽ báo lỗi.

s = new Set('howKteam')
// Set(8) { 'h', 'o', 'w', 'K', 't', 'e', 'a', 'm' }
s2 = new Set(['how', 'kteam'])
// Set(2) { 'how', 'kteam' }

Trong trường hợp không có bất kỳ giá trị nào được đưa vào <iterable>, thì một set rỗng được khởi tạo.

s3 = new Set()
// Set(0) {}

---

Kiểm tra số phần tử một set

Để có thể kiểm tra số phần tử của một set, ta dùng cú pháp sau:

<set>.size

Ví dụ:

s = new Set('123')
// Set(3) { '1', '2', '3' }
s.size
// 3
s2 = new Set('Kter')
// Set(4) { 'K', 't', 'e', 'r' }
s2.size
// 4

Khác với string và array, ta không thể truy xuất một phần tử của set thông qua chỉ mục. Vì đơn giản, cấu trúc của set không cho phép điều đó.

s = new Set(['how', 'Kteam'])
// Set(2) { 'how', 'Kteam' }
s[0]
// undefined
s[1]
// undefined

Mặc dù vậy, ta vẫn có thể sử dụng phép gán để tạo ra các cặp key-value cho phần tử của set. Cặp key-value này được tính chung là một phần tử. Bằng cách này, phần tử mới có thể được truy xuất bằng cặp [].

s = new Set(['how', 'Kteam'])
// Set(2) { 'how', 'Kteam' }
s['topic'] = 'Free education'
// 'Free education'
s
// Set(2) { 'how', 'Kteam', topic: 'Free education' }
s['topic']
// 'Free education'

---

Set là một iterable

Bằng cách sử dụng for..of, ta có thể suy ra được việc set là một <iterable>.

Ví dụ:

strs = new Set(['how', 'Kteam'])
// Set(2) { 'how', 'Kteam' }
for(let str of strs) console.log(str)
// how
// Kteam
// undefined

---

Set là một object

Chắc các bạn vẫn còn nhớ, rằng array là một dạng object đặc biệt chứ nhỉ ?

arr = []
// []
typeof(arr)
// 'object'

Trên thực tế, có nhiều loại object được thiết kế để tạo ra những chức năng đặc biệt, và set cũng là một trong số đó. Về bản chất, set cũng là một object.

> set = new Set()
Set(0) {}
> typeof(set)
'object'

---

Các phương thức với set JavaScript

Phương thức has

Phương thức has giúp xác định xem một phần tử có trong set hay không.

Cú pháp:

<set>.has(<value>)

Phương thức has trả về true nếu <value> có trong set, ngược lại trả về false.

Ví dụ:

s2 = new Set('Kter')
// Set(4) { 'K', 't', 'e', 'r' }
s2.has('a')
// false
s2.has('K')
// true
s2.has('k')
// false

---

Phương thức add

Cú pháp:

<set>.add(<value>)

Trong đó, <value> là giá trị cần thêm vào <set>.

• Nếu <value> không có sẵn, thì nó sẽ được thêm vào <set>.
• Nếu <value> có sẵn, phương thức này không làm gì cả.

Ví dụ:

s = new Set('howKteam')
// Set(8) { 'h', 'o', 'w', 'K', 't', 'e', 'a', 'm' }
s.add('123')
// Set(9) { 'h', 'o', 'w', 'K', 't', 'e', 'a', 'm', '123' }
s.add('123')
// Set(9) { 'h', 'o', 'w', 'K', 't', 'e', 'a', 'm', '123' }
s.add('123f')
// Set(10) { 'h', 'o', 'w', 'K', 't', 'e', 'a', 'm', '123', '123f' }

---

Phương thức delete

Cú pháp:

<set>.delete(<value>)

Giúp xóa một phần tử khỏi <set>.

• Nếu <value> đã có sẵn trong <set>, phương thức delete trả về true, đồng thời loại bỏ nó khỏi <set>.
• Nếu <value> không có sẵn, phương thức này trả về false.

Ví dụ:

s = new Set('Js')
// Set(2) { 'J', 's' }
s.delete('J')
// true
s
// Set(1) { 's' }
s.delete('a')
// false
s
// Set(1) { 's' }

---

Phương thức clear

Giúp loại bỏ toàn bộ các phần tử của một set.

Cú pháp:

<set>.clear()

Ví dụ:

s = new Set('123')
// Set(3) { '1', '2', '3' }
s.clear()
// undefined
s
// Set(0) {}

---

Phương thức forEach

Nếu các bạn còn nhớ về phương thức forEach của array, thì các bạn cũng sẽ dễ dàng nắm bắt được phương thức forEach của set. 

Cú pháp:

<set>.forEach(<func>, <thisArg>)

Đối với set.forEach, thì <func> có thể xảy ra các trường hợp sau:

• Có một tham số duy nhất: <value1>: nó sẽ đại diện cho giá trị của phần tử đang được duyệt qua
• Có 2 tham số: <value1> và <value2>: cặp giá trị này đại diện cho cặp key-value của object. Nếu phần tử là cặp key-value thì <value1> = key, còn <value2> = value. Trong các trường hợp khác, <value1> = <value2> = giá trị của phần tử.
• Có 3 tham số: <value1>, <value2> và <set>: <value1> và <value2>: như trên. Còn <set> đại diện cho đối tượng set mà chúng ta đang duyệt

Ngoài ra, <func> có thể là một function được gọi từ bên ngoài, một function được viết trực tiếp hoặc là một arrow function.

Ví dụ:

s = new Set(['how', 'Kteam'])
// Set(2) { 'how', 'Kteam' }
s.forEach(function (a) {console.log(a)})
// how
// Kteam
// undefined
function plus(a) {
  console.log(a.repeat(4))
}
// undefined
s.forEach(plus)
// howhowhowhow
// KteamKteamKteamKteam
// undefined

---

Phương thức entries

Tác dụng: trả về một trình lặp (iterator) được sử dụng trong set.

Cú pháp:

<set>.entries()

Ví dụ:

s = new Set(['how', 'Kteam', 'free', 'edu'])
// Set(4) { 'how', 'Kteam', 'free', 'edu' }
t = s.entries()
// [Set Entries] {
  [ 'how', 'how' ],
  [ 'Kteam', 'Kteam' ],
  [ 'free', 'free' ],
  [ 'edu', 'edu' ]
}
t.next()
// { value: [ 'how', 'how' ], done: false }
t.next()
// { value: [ 'Kteam', 'Kteam' ], done: false }
t.next()
// { value: [ 'free', 'free' ], done: false }
t.next()
// { value: [ 'edu', 'edu' ], done: false }
t.next()

---

Lưu ý khi sử dụng set

Nó cũng y chang như khi ta làm việc với array thôi. Đơn giản là: đừng bao giờ gán một set này cho một set khác nếu như không có chủ đích. Lí do là vì chúng sẽ lại cùng trỏ đến một vùng dữ liệu, và cả 2 sẽ cùng bị tác động nếu ta thay đổi một trong hai.

Ví dụ:

set1 = new Set([1, 2, 3])
// Set(3) { 1, 2, 3 }
set2 = set1
// Set(3) { 1, 2, 3 }
Object.is(set1, set2)
// true
set1.add('Kter')
// Set(4) { 1, 2, 3, 'Kter' }
set1
// Set(4) { 1, 2, 3, 'Kter' }
set2
// Set(4) { 1, 2, 3, 'Kter' }

Đây là tính chất chung của kiểu dữ liệu object trong JavaScript. Cụ thể hơn, mời các bạn cùng tìm hiểu bài Object trong JavaScript

---

Kiểu dữ liệu weakSet

Đây là một loại cấu trúc dữ liệu dựa trên set, nhưng nó yếu hơn set rất nhiều và chỉ có thể được sử dụng trong một vài tình huống đặc thù.

Về cơ bản, weakSet giúp lưu trữ các giá trị độc lập, với điều kiện các giá trị này phải là object. Điều này làm cho nó yếu hơn set rất nhiều.

Một điều nữa là set chỉ hỗ trợ 3 phương thức: add, delete và has. Nó không cho phép vòng lặp for..of, và do đó, nó không phải là iterable.

Để có thể hiểu hơn về weakSet, mời các bạn tham khảo:

WeakSet in JavaScript

---

Kết luận

Trong bài này, các bạn đã nắm được về kiểu dữ liệu set trong JavaScript

Trong bài tiếp theo, Kteam sẽ cùng bạn làm qua một số Bài tập về Kiểu dữ liệu Set trong JavaScript.

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận hoặc góp ý của mình để phát triển bài viết tốt hơn. Đừng quên “Luyện tập – Thử thách – Không ngại khó”.

---

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.