Video học lập trình mỗi ngày

Map vs Set ES6. Bạn đã bao giờ chán học về ES6? Bởi vì ES6 đã có quá nhiều lời bàn tán về những tính năng, cách sử dụng... Với tôi, tôi chưa hề chán. Bởi vì tôi biết rằng rằng có rất nhiều API thường được sử dụng trong ES6, không hơn, không kém và chúng chỉ phù hợp để sử dụng trong các dự án. 

Tips: Bạn có biết 65 bài viết về ES6

Tuy nhiên, mỗi lần đọc các documents về câu trúc dữ liệu trong đó có Set và Map, lúc đầu tôi luôn bị choáng ngợp, bởi vì tôi không hiểu mục đích và tầm quan trọng của việc thực hiện cấu trúc dữ liệu đó. Vì sao lại như vậy, để bài viết này tâm sự với các bạn, vì bạn cũng như tôi khi lần đầu đến với nó.

Set

Nói đến Set thì có 3 yếu tố chính để bạn hiểu về nó, và tôi đã tóm tắt lại để cho lập trình viên javascript hiểu rõ và nhanh hơn có thể.

• Set là một collection bao gồm những item không có thứ tự và là duy nhất (nghĩa là không lặp lại). Hay có thể là Set là một array chứa những giá trị mà ở đó giá trị không thể lặp lại.
• Set chính nó là một constructor được sử dụng để tạo cấu trúc dữ liệu
• Set có thể chấp nhận một array (hoặc cấu trúc dữ liệu khác với giao diện lặp) làm tham số cho việc khởi tạo. (Nếu chưa hiểu thì khỏi suy nghĩ, sẽ có ví dụ yên tâm)

Notes: Có một chú ý ở đây đó là có những giá trị đặc biệt trong Set ví dụ như undefined và NaN. Nếu để trong một collection thì nó sẽ không lặp lại trong Set. 

# Thuộc tính của Set 

size: return về size trong Set 

# Method của Set

• add(value): Thêm một giá trị và trả về cấu trúc Set
• delete(value): Xóa một giá trị nhất định, xóa thành công và trả lại true, nếu không thì trả lại false.
• has(value): Trả về giá trị Boolean cho biết giá trị đó có thuộc Set hay không.
• clear(): Xóa tất cả các items, không có giá trị trả lại.

Ví dụ:

const mySet = new Set(['a', 'a', 'b', 1, 2, 1])
console.log(mySet)  // {'a', 'b', 1, 2}
myset.add('c').add({'a': 1})
console.log(mySet) // {'a', 'b', 1, 2, 'c', {a: 1}}
console.log(mySet.size) // 6

mySet.has(2) // true

• keys(): Trả về tên khoá.
• values(): Trả về giá trị.
• entries(): Trả về key và value.
• forEach(): Dùng y chang như một array

Ví dụ :

const set = new Set(['a', 'b', 'c'])

for (let item of set.keys()) {
  console.log(item)
}
// a
// b
// c

for (let item of set.values()) {
  console.log(item)
}
// a
// b
// c

for (let item of set.entries()) {
  console.log(item)
}
// ["a", "a"]
// ["b", "b"]
// ["c", "c"]

for (let i of set) {
  console.log(i)
}
// a
// b
// c

set.forEach((value, key) => console.log(key + ' : ' + value))

// a: a
// b: b
// c: c

Chú ý: Bạn nào tinh ý thì biết rằng Set không có key mà chỉ có value mà thôi do đó set.keys() và set.values() giống nhau. 

Một số trải nghiệm khi sử dụng Set 

# Copy array (sử dụng spread operator)

const mySet = new Set([1, 2, 3, 4, 4])
[...mySet] // [1, 2, 3, 4]

# Nối hai array( như concat())

let a = new Set([1, 2, 3])
let b = new Set([4, 3, 2])
let union = new Set([...a, ...b]) // {1, 2, 3, 4}

# tìm điểm chung giữa hai array

let a = new Set([1, 2, 3])
let b = new Set([4, 3, 2])
let intersect = new Set([...a].filter(x => b.has(x)))  // {2, 3} item chung

# khác biệt giữa hai array

let a = new Set([1, 2, 3])
let b = new Set([4, 3, 2])
let difference = new Set([...a].filter(x => !b.has(x))) //  {1} 

Tìm hiểu Set như vậy cũng đã đủ rồi, giờ ta qua Map một chút trước khi nghỉ giải lao một chút.

Map

Trong cấu trúc dữ liệu, Map trong ES6 cũng có thể gọi là một collection. Nhưng nó giống với Set đó là có thể lưu giữ những giá trị duy nhất, nhưng nó khác với Set ở chỗ đó là lưu trữ dưới dạng key và value như một object trong javascript. 

Vậy nó khác với object trong javascript những gì thì xem những ví dụ dưới đây, xong rồi chúng ta sẽ nói về điều đó ở cuối bài viết này 

# Thuộc tính của Map 

Cũng giống như Set, Map cung cấp một thuộc tính size size trả về số lượng key-value trong một Map() 

# Method của Map()

• set (key, val): thêm các yếu tố mới vào Map
• get (key): Tìm một giá trị cụ thể theo key và trả về một value tương ứng với key đó
• has (key): Xác định xem có giá trị tương ứng với Key trong Map hay không, trả về true nếu có, nếu không thì trả về false
• delete (key): xóa dữ liệu tương ứng khỏi Map theo key
• clear (): xóa tất cả các thành phần trong Map này

Ví dụ :

const m1 = new Map([['a', 111], ['b', 222]])
console.log(m1) // {"a" => 111, "b" => 222}
m1.get('a')  // 111

const m2 = new Map([['c', 3]])
const m3 = new Map(m2)
m3.get('c') // 3
m3.has('c') // true
m3.set('d', 555)
m3.get('d') // 555

• keys(): Iterator trả về key
• values(): Trả về tất cả values
• entries(): Trả về key-value
• forEach(): Sử dụng chức năng gọi lại để duyệt qua từng dữ liệu trong Map()

const map = new Map([['a', 1], ['b',  2]])

for (let key of map.keys()) {
  console.log(key)
}
// "a"
// "b"

for (let value of map.values()) {
  console.log(value)
}
// 1
// 2

for (let item of map.entries()) {
  console.log(item)
}
// ["a", 1]
// ["b", 2]

for (let [key, value] of map.entries()) {
  console.log(key, value)
}
// "a" 1
// "b" 2

// for...of...

for (let [key, value] of map) {
  console.log(key, value)
}
// "a" 1
// "b" 2

Sau khi nói về Map trong ES6 bạn nào có thấy nó giống như một object javascript. Vậy thì chúng ta sẽ nói một chút về sự khác biệt giữa map và object.

Sự khác biệt giữa Map và Object

Trong Object thì key chỉ có thể là một chuỗi hoặc một Symbols còn một key trong Map, thì có thể là bất kỳ giá trị nào. Các keys trong Map được sắp xếp theo thứ tự (nguyên tắc FIFO là gì?), nhưng các khóa được thêm vào Object thì không. Key của Map có thể được lấy từ số thuộc tính kích thước và sô lượng key trong object chỉ có thể được tính nhiều phương thức khác nhau.

Tóm lại

Đây không phải là một bản tóm tắt đầy đủ nhưng tôi nghĩ với lập trình viên thì từng đó cũng quá đủ để hiểu về Map và Set. Tuỳ thuộc vào một hoàn cảnh, mỗi dự án để áp dụng chúng. Không thể nói về khía cạnh ai mạnh hơn ai. 

Vì xem qua những ví dụ chúng ta có thể thấy vai trò và nhiệm vụ của Map và Set là khác nhau. Nếu nó chưa thể giúp bạn trả lời câu hỏi "map và set là gì?" Thì hãy comment để lại dấu răng, tôi sẽ giải thích thêm cho các bạn. Một ngày tốt lành!