Cấu trúc dữ liệu JavaScript của bản đồ

Khám phá cấu trúc dữ liệu Bản đồ được giới thiệu trong ES6 để liên kết dữ liệu với các khóa. Trước khi được giới thiệu, mọi người thường sử dụng các đối tượng làm bản đồ, bằng cách liên kết một số đối tượng hoặc giá trị với một giá trị khóa cụ thể

Bản đồ là gì

Cấu trúc dữ liệu Bản đồ cho phép liên kết dữ liệu với một khóa.

Trước ES6

ECMAScript6 (còn gọi là ES2015) đã giới thiệu cấu trúc dữ liệu Bản đồ choJavaScriptthế giới, cùng vớiBộ

Trước khi được giới thiệu, mọi người thường sử dụng các đối tượng làm bản đồ, bằng cách liên kết một số đối tượng hoặc giá trị với một giá trị khóa cụ thể:

const car = {}
car['color'] = 'red'
car.owner = 'Flavio'
console.log(car['color']) //red
console.log(car.color) //red
console.log(car.owner) //Flavio
console.log(car['owner']) //Flavio

Nhập bản đồ

ES6 đã giới thiệu cấu trúc dữ liệu Bản đồ, cung cấp cho chúng tôi một công cụ thích hợp để xử lý loại tổ chức dữ liệu này.

Bản đồ được khởi tạo bằng cách gọi:

const m = new Map()

Thêm các mục vào Bản đồ

Bạn có thể thêm các mục vào bản đồ bằng cách sử dụngsetphương pháp:

m.set('color', 'red')
m.set('age', 2)

Nhận một mục từ bản đồ bằng chìa khóa

Và bạn có thể lấy các vật phẩm ra khỏi bản đồ bằng cách sử dụngget:

const color = m.get('color')
const age = m.get('age')

Xóa một mục khỏi bản đồ bằng phím

Sử dụngdelete()phương pháp:

m.delete('color')

Xóa tất cả các mục khỏi bản đồ

Sử dụngclear()phương pháp:

m.clear()

Kiểm tra xem bản đồ có chứa một mục bằng chìa khóa hay không

Sử dụnghas()phương pháp:

const hasColor = m.has('color')

Tìm số mục trong bản đồ

Sử dụngsizebất động sản:

const size = m.size

Khởi tạo bản đồ với các giá trị

Bạn có thể khởi tạo một bản đồ với một tập hợp các giá trị:

const m = new Map([['color', 'red'], ['owner', 'Flavio'], ['age', 2]])

Các phím bản đồ

Cũng giống như bất kỳ giá trị nào (đối tượng, mảng, chuỗi, số) có thể được sử dụng làm giá trị của mục nhập khóa-giá trị của một mục bản đồ,bất kỳ giá trị nào có thể được sử dụng làm khóa, thậm chí các đối tượng.

Nếu bạn cố gắng lấy một khóa không tồn tại bằng cách sử dụngget()ra khỏi bản đồ, nó sẽ trở lạiundefined.

Những tình huống kỳ lạ hầu như bạn sẽ không bao giờ tìm thấy trong đời thực

const m = new Map()
m.set(NaN, 'test')
m.get(NaN) //test
const m = new Map()
m.set(+0, 'test')
m.get(-0) //test

Lặp lại bản đồ

Lặp lại các khóa bản đồ

Bản đồ cung cấpkeys()phương pháp chúng tôi có thể sử dụng để lặp lại trên tất cả các khóa:

for (const k of m.keys()) {
  console.log(k)
}

Lặp lại các giá trị bản đồ

Đối tượng Bản đồ cung cấpvalues()phương pháp chúng ta có thể sử dụng để lặp lại trên tất cả các giá trị:

for (const v of m.values()) {
  console.log(v)
}

Lặp lại các cặp giá trị, khóa bản đồ

Đối tượng Bản đồ cung cấpentries()phương pháp chúng ta có thể sử dụng để lặp lại trên tất cả các giá trị:

for (const [k, v] of m.entries()) {
  console.log(k, v)
}

có thể được đơn giản hóa thành

for (const [k, v] of m) {
  console.log(k, v)
}

Chuyển đổi sang mảng

Chuyển đổi các phím bản đồ thành một mảng

const a = [...m.keys()]

Chuyển đổi các giá trị bản đồ thành một mảng

const a = [...m.values()]

WeakMap

Bản đồ yếu là một loại bản đồ đặc biệt.

Trong một đối tượng bản đồ, các mục không bao giờ được thu gom rác. Thay vào đó, WeakMap cho phép tất cả các mục của nó được thu gom rác tự do. Mỗi khóa của WeakMap là một đối tượng. Khi tham chiếu đến đối tượng này bị mất, giá trị có thể được thu thập.

Dưới đây là những điểm khác biệt chính:

  1. bạn không thể lặp lại các khóa hoặc giá trị (hoặc khóa-giá trị) của WeakMap
  2. bạn không thể xóa tất cả các mục khỏi Bản đồ yếu
  3. bạn không thể kiểm tra kích thước của nó

Một WeakMap hiển thị các phương thức đó, tương đương với các phương thức trên Bản đồ:

  • get(k)
  • set(k, v)
  • has(k)
  • delete(k)

Các trường hợp sử dụng của WeakMap ít rõ ràng hơn so với các trường hợp của Bản đồ và bạn có thể không bao giờ thấy cần đến chúng, nhưng về cơ bản nó có thể được sử dụng để xây dựng một bộ nhớ đệm nhạy cảm với bộ nhớ sẽ không gây trở ngại cho việc thu gom rác, hoặc để đóng gói cẩn thận và ẩn thông tin.

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn js khác: