Kiểu dữ liệu Map trong JavaScript

Dẫn nhập

Ở bài trước, Kteam đã giới thiệu đến các bạn một cấu trúc dữ liệu khá đặc biệt và cùng làm qua một số bài tập về set.

Trong bài này, các bạn sẽ được tìm hiểu về một cấu trúc dữ liệu khác, đó là map.

---

Nội dung

Những nội dung trong bài học lần này, là:

• Đặt vấn đề
• Kiểu dữ liệu map trong JavaScript
• Các phương thức đối với map
• WeakMap trong JavaScript

---

Đặt vấn đề

Có bao giờ các bạn sử dụng Google map chưa ? Nó là một công cụ giúp chúng ta tìm kiếm trên bản đồ.

Bây giờ, Toàn muốn ghi lại vị trí của quán trà đá, tiệm tạp hóa, công ty,…, tất tần tật về những nơi mà mình hay ghé qua. Toàn bắt đầu như sau:

• Quán trà đá abc – Đường X, huyện Y, Tỉnh Z
• Tiệm tạp hóa xyz – Đường T, huyện Y, Tỉnh Z …

Các bạn có để ý thấy điểm chung giữa 2 (các) ghi chú của Toàn ở trên hay không ?

Có một điểm chung dễ thấy nhất, đó chính là với mỗi địa chỉ, Toàn đều ghi lại 2 yếu tố: là Tên của tạp hóa, quán trà đá, … và địa chỉ tương ứng của chúng.

---

Kiểu dữ liệu map trong JavaScript

Liên hệ một chút nào: mỗi cặp giá trị (tên + địa chỉ) như trên, trong lập trình ta gọi là cặp khóa – giá trị (key – value).

Và những cặp key-value này có thể được lưu trữ trong một loại cấu trúc dữ liệu, đó là map. Hiểu một cách đơn giản, map chính là cuốn sổ mà Toàn dùng để ghi lại vị trí như trong ví dụ trên.

Khởi tạo một map

Cú pháp:

new Map(<iterable>)

• Tham số <iterable> là không bắt buộc, nó có thể không được truyền vào. Trong trường hợp này, nó tạo ra một map rỗng.
• Nếu có mặt tham số <iterable>, thì mỗi phần tử của <iterable> này phải là một cặp key-value.

Ví dụ:

map = new Map()
// Map(0) {}
map2 = new Map([[1, 'Js'], [2, 'how'], ['3', 'Kteam']])
// Map(3) { 1 => 'Js', 2 => 'how', '3' => 'Kteam' }
map2 = new Map('abc')
// Uncaught TypeError: Iterator value a is not an entry object
    at new Map (<anonymous>)
map2 = new Map(['aa', 'bb', 'cc'])
// Uncaught TypeError: Iterator value aa is not an entry object
    at new Map (<anonymous>)

---

Trích xuất độ dài của map

Để trích xuất độ dài của một map (số các cặp key-value trong map), ta dùng cú pháp sau:

<map>.size

Ví dụ:

map = new Map()
// Map(0) {}
map2 = new Map([[1, 'Js'], [2, 'how'], ['3', 'Kteam']])
// Map(3) { 1 => 'Js', 2 => 'how', '3' => 'Kteam' }
map.size
// 0
map2.size
// 3

---

Các phương thức với map trong Js

Phương thức has

Kiểm tra xem liệu trong map có tồn tại một cặp key-value có key bằng một giá trị cho trước hay không.

Cú pháp:

<map>.has(<key>)

Nếu trong map có một cặp khóa – giá trị mà có khóa bằng với <key>, thì trả về true. Ngược lại trả về false.

Ví dụ:

map = new Map([['1', 'Kter'], ['2', 'Kquiz'], ['3', 'Js']])
// Map(3) { '1' => 'Kter', '2' => 'Kquiz', '3' => 'Js' }
map.has(1)
// false
map.has('1')
// true
map.has('Kter')
// false
map.has('3')
// True

---

Phương thức get

Phương thức get dùng để lấy về một giá trị trong map. Cụ thể, với một tham số <key> cho trước, nếu trong map có một cặp khóa – giá trị mà khóa bằng <key>, thì nó trả về giá trị của cặp đó. Nếu không có cặp khóa – giá trị nào thỏa mãn, phương thức get trả về undefined.

Cú pháp:

<map>.get(<key>)

Ví dụ:

numbers = new Map([['1', 'one'], ['2', 'two'], ['3', 'three']])
// Map(3) { '1' => 'one', '2' => 'two', '3' => 'three' }
numbers.get(1)
// undefined
numbers.get('1')
// 'one'
numbers.get('2')
// 'two'
numbers.get('one')
// undefined

---

Phương thức set

Cú pháp:

<map>.set(<key>, <value>)

Tác dụng: thêm một cặp key-value vào trong <map> nếu chưa có sẵn. Nếu trong <map> đã có sẵn một cặp giá trị với key bằng <key>, thì cập nhật giá trị của cặp đó.

Giá trị trả về là map sau khi được cập nhật.

Trong đó:

• <key>: là khóa của cặp key-value.
• <value>: là giá trị của cặp key-value.

Ví dụ:

map = new Map()
// Map(0) {}
map.set('kt', 'learn')
// Map(1) { 'kt' => 'learn' }
map.set('howKteam', 2016)
// Map(2) { 'kt' => 'learn', 'howKteam' => 2016 }
map.set('kt', 'Js')
// Map(2) { 'kt' => 'Js', 'howKteam' => 2016 }
map.set('howKteam', '2022')
// Map(2) { 'kt' => 'Js', 'howKteam' => '2022' }

---

Phương thức delete

Xóa bỏ một cặp key-value của map.

Cú pháp:

<map>.delete(<key>)

Nếu trong <map> có một cặp khóa – giá trị với khóa bằng <key>, loại bỏ cặp đó ra khỏi <map> và trả về true. Nếu trong <map> không có bất kì cặp nào thỏa mãn, thì trả về false.

Ví dụ:

map = new Map([['Js', 'howKteam'], ['ntt', 'noob']])
// Map(2) { 'Js' => 'howKteam', 'ntt' => 'noob' }
map.delete(Js)
// Uncaught ReferenceError: Js is not defined
map.delete('Js')
// true
map.delete('ntt')
// true
map
// Map(0) {}

---

Phương thức clear

Xóa bỏ toàn bộ các cặp key-value của map.

Cú pháp:

<map>.clear()

Ví dụ:

map = new Map()
// Map(0) {}
map.set('ntt', 'Tonf')
// Map(1) { 'ntt' => 'Tonf' }
map.set('Do', 'handsome')
// Map(2) { 'ntt' => 'Tonf', 'Do' => 'handsome' }
map.size
// 2
map.clear()
// undefined
map.size
// 0

---

Phương thức keys

Cú pháp:

<map>.keys()

Tác dụng: trả về một iterator, giúp chúng ta duyệt qua các khóa trong <map>. Tất nhiên, iterator này sử dụng hàm next() để tiến hành duyệt. Cũng giống như hàm next trong generator, hàm next với keys cũng trả về 2 giá trị: value và done.

Ví dụ:

map = new Map([[1, 1], [2, 2], [3, 3], [4, 4]])
// Map(4) { 1 => 1, 2 => 2, 3 => 3, 4 => 4 }
iterator = map.keys()
// [Map Iterator] { 1, 2, 3, 4 }
iterator.next()
// { value: 1, done: false }
iterator.next()
// { value: 2, done: false }
iterator.next()
// { value: 3, done: false }
iterator.next()
// { value: 4, done: false }
iterator.next()
// { value: undefined, done: true }

---

Phương thức values

Cũng tương tự như phương thức keys, nhưng khác ở chỗ là iterator trả về sẽ duyệt qua các value của cặp key-value.

Cú pháp:

<map>.values()

Ví dụ:

map = new Map([[1, 'one'], [2, 'two'], [3, 'three'], [4, 'four']])
// Map(4) { 1 => 'one', 2 => 'two', 3 => 'three', 4 => 'four' }
iter = map.values()
// [Map Iterator] { 'one', 'two', 'three', 'four' }
iter.next()
// { value: 'one', done: false }
iter.next()
// { value: 'two', done: false }
iter.next()
// { value: 'three', done: false }
iter.next()
// { value: 'four', done: false }
iter.next()
// { value: undefined, done: true }

---

Phương thức entries

Cú pháp:

<map>.entries()

Tác dụng: trả về một iterator giúp duyệt qua các cặp key-value của map.

Đối với entries, khi dùng hàm next, thì value sẽ bằng một array chứa khóa và giá trị của cặp mà ta đang duyệt đến.

Ví dụ:

map = new Map([[1, 'one'], [2, 'two'], [3, 'three'], [4, 'four']])
// Map(4) { 1 => 'one', 2 => 'two', 3 => 'three', 4 => 'four' }
it = map.entries()
// [Map Entries] {
  [ 1, 'one' ],
  [ 2, 'two' ],
  [ 3, 'three' ],
  [ 4, 'four' ]
}
it.next()
// { value: [ 1, 'one' ], done: false }
it.next()
// { value: [ 2, 'two' ], done: false }
 it.next()
// { value: [ 3, 'three' ], done: false }
it.next()
// { value: [ 4, 'four' ], done: false }
it.next()
// { value: undefined, done: true }

---

Phương thức forEach

Chắc Kteam không cần phải giải thích quá nhiều về nó nữa, vì ta đã gặp nó xuyên suốt khóa học này rồi.

Cú pháp:

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

Phương thức này sẽ lặp qua các phần tử của <map> và với mỗi lần lặp, các giá trị tương ứng sẽ được đưa vào <func>.

<func> là một function, có thể có một, hai hoặc là 3 tham số:

• <value>: giá trị của cặp key-value đang được duyệt qua
• <value> và <key>: tương ứng với value và key của cặp key-value đang được duyệt
• <value>, <key> và <map>: là value và key của cặp key-value đang được duyệt, và <map> ta đang thực hiện forEach.

Ví dụ:

map = new Map([[1, 'one'], [2, 'two'], [3, 'three'], [4, 'four']])
// Map(4) { 1 => 'one', 2 => 'two', 3 => 'three', 4 => 'four' }
map.forEach((value) => console.log(value))
// one
// two
// three
// four
// undefined
map.forEach((value, key, map) => map.set(key, value + ' updated'))
// undefined
map
// Map(4) {
  1 => 'one updated',
  2 => 'two updated',
  3 => 'three updated',
  4 => 'four updated'
}

---

Vòng lặp for..of với map

Map là một iterable, do đó nên ta có thể thực hiện for..of với nó. Giá trị ta có được sau mỗi lần lặp là một array, với phần tử đầu tiên là khóa, còn phần tử thứ 2 là giá trị của cặp đó.

map = new Map([[1, 'one'], [2, 'two'], [3, 'three'], [4, 'four']])
// Map(4) { 1 => 'one', 2 => 'two', 3 => 'three', 4 => 'four' }
for(let i of map) console.log(i)
// [ 1, 'one' ]
// [ 2, 'two' ]
// [ 3, 'three' ]
// [ 4, 'four' ]
// undefined

---

Kiểu dữ liệu weakMap

Mở rộng: kiểu dữ liệu WeakMap được xây dựng dựa trên map. Nó gần giống như map, và có một vài đặc điểm khác biệt như sau:

• Đối với weakMap, các khóa bắt buộc phải là các đối tượng. Còn đối với map, nó có thể là bất kì loại dữ liệu nào.
• WeakMap chỉ có 4 phương thức được hỗ trợ: get, set, has và delete. Trong khi đó, map có cả 6.
• WeakMap không phải là một iterable, do đó ta không thể dùng vòng lặp cho nó, và weakmap cũng không có thuộc tính size.

Tham khảo thêm tại:

WeakMap in JavaScript

---

Kết luận

Qua bài này, các bạn đã nắm được kiến thức về kiểu dữ liệu map trong JavaScript.

Chúng ta sẽ cùng nhau củng cố lại kiến thức về map một lần nữa trong bài Bài tập về Kiểu dữ liệu Map 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.