Hướng dẫn iterate map javascript - lặp lại javascript bản đồ

Nếu bạn bỏ lỡ đọc bài viết đầu tiên trong đó chúng tôi đã thảo luận về cách thực hiện các hoạt động cơ bản qua bản đồ, bạn có thể đọc nó ở đây.

Trong bài viết này, chúng tôi sẽ học cách lặp lại trên bản đồ bằng các phương pháp khác nhau có sẵn. Vì vậy, hãy để Lặn lặn vào và học cách lặp qua bản đồ.

Lặp lại một bản đồ

Để lặp lại trên bản đồ, chúng ta có thể sử dụng các cấu trúc JavaScript sau:

• for..of
• forEach()

Chúng ta hãy tạo một bản đồ trước tiên để lặp lại từ kiến ​​thức thu được trong bài viết trước của chúng tôi.

let map = new Map()

map.set("one", "first element");
map.set("two", "second element");
map.set(3, "third element");

Lặp đi lặp lại bản đồ với..fof

Chúng ta có thể sử dụng cho..ous để lặp lại một bản đồ trong JavaScript.

for (let [key, value] of map) {
console.log(key + " = " + value);
}

//output
// one = first element
// two = second element
// 3 = third element

Bản đồ cũng cung cấp ba phương pháp này, có ích trong khi lặp lại trên bản đồ.

• map.Keys () - Trả về một khóa học cho các phím - Returns an iterable for keys
• map.values ​​() - Trả về một giá trị có thể lặp lại cho các giá trị - Returns an iterable for values
• map.entries () - Trả về một khóa, giá trị - Returns an iterable of key,value

for (let key of map.keys()) {
	console.log(key);
}

// output
// one
// two
// 3

for (let value of map.values()){
	console.log(value);
}

// output
// first element
// second element
// third element

for (let [key, value] of  map.entries()) {
	console.log(key + " = " + value)
}

//output
// one = first element
// two = second element
// 3 = third element

Lặp lại bản đồ với foreach ()

Chúng ta cũng có thể lặp lại thông qua bản đồ bằng cách sử dụng foreach ().

map.forEach(function(value, key) {
	console.log(key + " = " + value);
})

//output
// one = first element
// two = second element
// 3 = third element

Bản đồ bảo tồn thứ tự trong đó các giá trị được chèn. Vì vậy, trong khi lặp lại trên một bản đồ, các phần tử sẽ theo cùng một thứ tự mà chúng được chèn.

Bản tóm tắt

• Để lặp lại trên một bản đồ, chúng ta có thể sử dụng cho các cấu trúc vòng lặp..of và foreach ().for..of and forEach() loop constructs.
• Bản đồ cung cấp ba phương thức trả về có thể lặp lại: map.keys (), map.values ​​() và map.entries ().map.keys(), map.values() and map.entries().
• Lặp lại trên bản đồ luôn luôn theo thứ tự chèn.insertion order.

---

Nếu bạn thích bài viết này, xin vui lòng nâng cao và giới thiệu nó để hiển thị sự hỗ trợ của bạn. Hãy hỏi bất kỳ câu hỏi nào trong các ý kiến ​​dưới đây.

---

Chúng tôi xuất bản các bài viết về phát triển web và công nghệ thường xuyên. Cân nhắc đăng ký bản tin của chúng tôi hoặc theo dõi chúng tôi trên các kênh xã hội của chúng tôi (Twitter, Facebook, LinkedIn).

Trong javascript, dev thường dùng nhiều thời gian vào việc quyết định kiểu cấu trúc dữ liệu chuẩn có thể giúp thao tác sau này dễ dàng hơn, tiết kiệm thời gian và làm cho code dễ hiểu hơn. Hai cấu trúc dữ liệu phổ biến để lưu trữ data là Objects và Arrays (cũng là một loại object). Dev sử dụng Objects để lưu trữ cặp key/value và Arrays để lưu trữ danh sách chỉ mục. Tuy nhiên, để mang đến cho dev sự uyển chuyển nhiều hơn, ECMAScript 2015 giới thiệu 2 loại Object mới là Map, được sắp xếp theo bộ các cặp key/value và Set, là một bộ các cặp giá trị duy nhất. trong hướng dẫn này, bạn sẽ tìm hiểu về Map và Set, làm cho chúng giống hoặc khác với Object và Array, các thuộc tính và phương thức có sẵn của chúng và ví dụ về một số cách sử dụng trong thực tế.

1. Map

Map là một tập hợp các cặp key/value có thể sử dụng mọi kiểu dữ liệu làm key và có thể duy trì thứ tự các phần tử của nó. Map có các yếu tố của Object (bộ key/value duy nhất ) và Array (một tập hợp được sắp xếp ), nhưng tượng tự như khái niệm object. Điều này là vì mặc dù kích thước và thứ tự của các phần tử được lưu trữ như một array, các phần tử vẫn là các cặp key/value như object. Map có thể được khởi tạo với cú pháp và điều này sinh ra một map rỗng. :

const map = new Map()
=> Map(0) {}

Thêm giá trị vào Map

Có thể thêm giá trị vào map với phương thức

map.forEach(function(value, key) {
	console.log(key + " = " + value);
})

//output
// one = first element
// two = second element
// 3 = third element

5. Tham số đầu tiên có thể là 1 key, và thứ hai là value. Ở đây chúng ta bắt đầu thấy Map có các yếu tố của object và array. Giống array, chúng ta có một bộ các phần tử với chỉ mục (index) từ 0, và chúng ta có thể thấy có bao nhiêu phần tử mặc định trong Map. Map sử dụng cú pháp

map.forEach(function(value, key) {
	console.log(key + " = " + value);
})

//output
// one = first element
// two = second element
// 3 = third element

6 để biểu thị key/value

map.forEach(function(value, key) {
	console.log(key + " = " + value);
})

//output
// one = first element
// two = second element
// 3 = third element

7

map.set('firstName', 'Luke')
map.set('lastName', 'Skywalker')
map.set('occupation', 'Jedi Knight')

=>
Map(3)
0: {"firstName" => "Luke"}
1: {"lastName" => "Skywalker"}
2: {"occupation" => "Jedi Knight"}

Ví dụ trên trông giống object thông thường với key là chuỗi, nhưng chúng ta có thể dùng bất kì kiểu dữ liệu nào cho key trong Map. Ngoài cách thủ công set value cho Map chúng ta có thể khởi tạo Map với value có sẵn. Chúng ta sử dụng điều này bằng cách sử dụng array của array để chứa hai phần tử là mỗi cặp 1 key/value trông như sau:

[ ['key1', 'value1'],
  ['key2', 'value2'] ]

Sử dụng cú pháp sau, chúng ta có thể tạo lại cùng 1 map

const map = new Map([
  ['firstName', 'Luke'],
  ['lastName', 'Skywalker'],
  ['occupation', 'Jedi Knight'],
])

Ngẫu nhiên, cú pháp này giống như kết quả khi gọi Object.entries() trên 1 object. Điều này cung cấp một cách sẵn sàng để chuyển object thành map, như trong đoạn code sau:

const luke = {
  firstName: 'Luke',
  lastName: 'Skywalker',
  occupation: 'Jedi Knight',
}

const map = new Map(Object.entries(luke))

Hoặc, bạn có thể biến map thành object hoặc array với 1 dòng code như sau :

const obj = Object.fromEntries(map)
=> {firstName: "Luke", lastName: "Skywalker", occupation: "Jedi Knight"}

const arr = Array.from(map)
=> kết quả :
[ ['firstName', 'Luke'],
  ['lastName', 'Skywalker']
  ['occupation', 'Jedi Knight'] ]

Keys trong map

Map chấp nhận bất kì kiểu dữ liệu nào key, và không cho phép trùng lặp key value. Chúng ta có thể chứng minh điều này bằng cách tạo 1 map và sử dụng giá trị không phải chuỗi, như cài đặt 2 giá trị cùng 1 key:

for (let [key, value] of map) {
console.log(key + " = " + value);
}

//output
// one = first element
// two = second element
// 3 = third element

0

Ví dụ trên sẽ ghi đè key đầu tiên là 1 bằng khóa tiếp theo, nó sẽ coi '1' và 1 là các khóa duy nhất.

for (let [key, value] of map) {
console.log(key + " = " + value);
}

//output
// one = first element
// two = second element
// 3 = third element

1

Mặc dù nói là 1 object thông thường có thể xử lý number, booleans, và các kiểu dữ liệu khác làm khóa nhưng thực tế lại không phải vậy vì object thay đổi tất cả thành các key là chuỗi. Như 1 ví dụ, khởi tạo object với key là number và so sánh value cho key là số 1 và '1' được xâu chuỗi :

for (let [key, value] of map) {
console.log(key + " = " + value);
}

//output
// one = first element
// two = second element
// 3 = third element

2

Đây là lý do tại sao nếu bạn cố gắng sử dụng object làm key, nó sẽ in ra đối tượng chuỗi object Object. Ví dụ , tạo 1 object và sau đó sử dụng nó làm key của object khác.

for (let [key, value] of map) {
console.log(key + " = " + value);
}

//output
// one = first element
// two = second element
// 3 = third element

3

Đây không phải trường hợp của Map, thử tạo một object và đặt nó làm key của map:

for (let [key, value] of map) {
console.log(key + " = " + value);
}

//output
// one = first element
// two = second element
// 3 = third element

4

Có một điều quan trọng là ghi chú về sử dụng object/array như một key : Map được sử dụng tham chiếu đến object để so sánh sự bình đẳng, không phải giá trị theo nghĩa đen của object. Trong javascript,

map.forEach(function(value, key) {
	console.log(key + " = " + value);
})

//output
// one = first element
// two = second element
// 3 = third element

8 return false, bởi vì 2 object không giống nhau mặc dù cùng value là rỗng. Điều này nghĩa là thêm 2 object duy nhất với cùng giá trị sẽ tạo Map với 2 mục :

for (let [key, value] of map) {
console.log(key + " = " + value);
}

//output
// one = first element
// two = second element
// 3 = third element

5

set() thứ 2 đang cập nhật key chính xác giống như key thứ nhất vì vậy ta kết thúc với 1 map chỉ có 1 value.

Lấy và xóa phần tử từ Map

Một trong những nhược điểm của làm việc với Object là có thể khó khăn để liệt kê chúng, hoặc làm việc với tất cả keys hoặc values. Cấu trúc Map ngược lại, có rất nhiều thuộc tính tích hợp làm việc với các yếu tố tốt hơn. Chúng ta có thể khởi tạo một Map để chứng minh các phương thức và thuộc tính sau:

map.forEach(function(value, key) {
	console.log(key + " = " + value);
})

//output
// one = first element
// two = second element
// 3 = third element

9

for (let [key, value] of map) {
console.log(key + " = " + value);
}

//output
// one = first element
// two = second element
// 3 = third element

6

Sử dụng

const map = new Map()
=> Map(0) {}

0 để check sự tồn tại của 1 phần tử trong map, trả về giá trị boolean.

for (let [key, value] of map) {
console.log(key + " = " + value);
}

//output
// one = first element
// two = second element
// 3 = third element

7

Lấy ra một value từ key

for (let [key, value] of map) {
console.log(key + " = " + value);
}

//output
// one = first element
// two = second element
// 3 = third element

8

Một lợi ích đặc biệt mà Map có trên object là bạn có thể tìm thấy size của Map bất cứ lúc nào, giống như với Array. Bạn có thể lấy số lượng phần tử trong Map với size(). Điều này bao gồm ít bước hơn là chuyển một object thành array và tìm độ dài.

for (let [key, value] of map) {
console.log(key + " = " + value);
}

//output
// one = first element
// two = second element
// 3 = third element

9

Phương thức

const map = new Map()
=> Map(0) {}

1để xóa một item khỏi Map bằng key của nó. Phương thức này sẽ trả về giá trị true false.

for (let key of map.keys()) {
	console.log(key);
}

// output
// one
// two
// 3

for (let value of map.values()){
	console.log(value);
}

// output
// first element
// second element
// third element

for (let [key, value] of  map.entries()) {
	console.log(key + " = " + value)
}

//output
// one = first element
// two = second element
// 3 = third element

0

Cuối cùng, Map có thể bị xóa tất cả với phương thức clear()

for (let key of map.keys()) {
	console.log(key);
}

// output
// one
// two
// 3

for (let value of map.values()){
	console.log(value);
}

// output
// first element
// second element
// third element

for (let [key, value] of  map.entries()) {
	console.log(key + " = " + value)
}

//output
// one = first element
// two = second element
// 3 = third element

1

Keys, values, entries

Object có thể lấy keys, values và entries bằng cách sử dụng các thuộc tính của object. Maps, bằng cách khác, có phương thức prototype cho phép lấy ra keys, values, entries của Map trực tiếp. Các method

const map = new Map()
=> Map(0) {}

2 đều trả về một MapIterator, tương tự như Array có thể dùng vòng lặp for..of để lấy ra values. Ví dụ :

for (let key of map.keys()) {
	console.log(key);
}

// output
// one
// two
// 3

for (let value of map.values()){
	console.log(value);
}

// output
// first element
// second element
// third element

for (let [key, value] of  map.entries()) {
	console.log(key + " = " + value)
}

//output
// one = first element
// two = second element
// 3 = third element

2

Vòng lặp với Map

Map có phương thức tích hợp forEach, giống như Array. Tuy nhiên, có một điểm khác nhau nho nhỏ trong cách lặp. callback của forEach trong Map lặp lại value, key và map chính nó, trong khi đó Array lặp lại item, index và chính mảng đó.

for (let key of map.keys()) {
	console.log(key);
}

// output
// one
// two
// 3

for (let value of map.values()){
	console.log(value);
}

// output
// first element
// second element
// third element

for (let [key, value] of  map.entries()) {
	console.log(key + " = " + value)
}

//output
// one = first element
// two = second element
// 3 = third element

3

Đây là một lợi ích lớn của Map trên Object, vì object cần convert với keys(), values() hoặc entries(), và không có một cách đơn giản nào để lấy ra thuộc tính của một object nếu không convert nó. Để chứng minh điều này, cùng lặp một Map và in key/value ra console:

for (let key of map.keys()) {
	console.log(key);
}

// output
// one
// two
// 3

for (let value of map.values()){
	console.log(value);
}

// output
// first element
// second element
// third element

for (let [key, value] of  map.entries()) {
	console.log(key + " = " + value)
}

//output
// one = first element
// two = second element
// 3 = third element

4

Vì một vòng lặp for..of lặp đi lặp lại như Map và array, chúng ta có thể lấy kết quả chính xác bằng cách tách array của các phần tử map .

for (let key of map.keys()) {
	console.log(key);
}

// output
// one
// two
// 3

for (let value of map.values()){
	console.log(value);
}

// output
// first element
// second element
// third element

for (let [key, value] of  map.entries()) {
	console.log(key + " = " + value)
}

//output
// one = first element
// two = second element
// 3 = third element

5

Thuộc tính và phương thức của Map

Khi nào sử dụng Map?

Tóm lại, Maps giống với Object khi chúng cũng có các cặp key/value. Nhưng Map có các lợi ích hơn Object như :

• size : có thuộc tính size, Objects không có tích hợp để lấy ra size của nó.
• vòng lặp : Map có thể lặp lại trực tiếp, còn Object thì không.
• tính linh hoạt : Maps có thể có bất kì kiểu dữ liệu nào làm key cho 1 value, còn Object thì chỉ là chuỗi.
• sắp xếp : Map giữ lại thứ tự chèn của chúng, trong khi objects không có thứ tự bảo đảm. Do những yếu tố này, Map là một cấu trúc dữ liệu mạnh. Tuy nhiên, object cũng có một số lợi ích quan trọng
• json : object làm việc hoàn hảo với JSON.parse() và JSON.stringify(), hai hàm thiết yếu khi làm việc với JSON, một kiểu data phổ biến mà nhiều REST API sử dụng.
• làm việc với một element : làm việc với một giá trị đã biết trong object, ban có thể truy cập trực tiếp bằng key mà không cần sử dụng phương thức, chẳng hạn như get() của Map.

Danh sách này sẽ giúp bạn quyết định nếu Map hoặc Object sẽ là kiểu dữ liệu phù hợp cho bạn.

SET

Set là tập hợp các giá trị duy nhất. Không giống như Map, Set về mặt khái niệm tương tự như Array hơn là Object, vì đây là danh sách các giá trị chứ không phải cặp key / value. Tuy nhiên, Set không phải là sự thay thế cho array , mà là phần bổ sung để cung cấp hỗ trợ bổ sung để làm việc với dữ liệu trùng lặp. Có thể khởi tạo Set với cú pháp sau :

for (let key of map.keys()) {
	console.log(key);
}

// output
// one
// two
// 3

for (let value of map.values()){
	console.log(value);
}

// output
// first element
// second element
// third element

for (let [key, value] of  map.entries()) {
	console.log(key + " = " + value)
}

//output
// one = first element
// two = second element
// 3 = third element

6

Các phần tử có thể được thêm vào Set với add() method. (không bị nhầm lẫn với set() trong Map dù chúng tương tự nhau)

for (let key of map.keys()) {
	console.log(key);
}

// output
// one
// two
// 3

for (let value of map.values()){
	console.log(value);
}

// output
// first element
// second element
// third element

for (let [key, value] of  map.entries()) {
	console.log(key + " = " + value)
}

//output
// one = first element
// two = second element
// 3 = third element

7

Vì Set chỉ có thể chứa các giá trị duy nhất, mọi nỗ lực thêm giá trị đã tồn tại sẽ bị bỏ qua.

const map = new Map()
=> Map(0) {}

3 Lưu ý : So sánh bằng nhau tương tự áp dụng cho các key của Map và các phần tử Set . Hai đối tượng có cùng giá trị nhưng không chia sẻ cùng một tham chiếu sẽ không được coi là bằng nhau. Bạn cũng có thể khởi tạo Set với một mảng các giá trị. Nếu có các giá trị trùng lặp trong mảng, chúng sẽ bị xóa khỏi Tập hợp.

for (let key of map.keys()) {
	console.log(key);
}

// output
// one
// two
// 3

for (let value of map.values()){
	console.log(value);
}

// output
// first element
// second element
// third element

for (let [key, value] of  map.entries()) {
	console.log(key + " = " + value)
}

//output
// one = first element
// two = second element
// 3 = third element

8

Ngược lại, một Set có thể được chuyển đổi thành một Mảng :

for (let key of map.keys()) {
	console.log(key);
}

// output
// one
// two
// 3

for (let value of map.values()){
	console.log(value);
}

// output
// first element
// second element
// third element

for (let [key, value] of  map.entries()) {
	console.log(key + " = " + value)
}

//output
// one = first element
// two = second element
// 3 = third element

9

Set có nhiều phương thức và thuộc tính giống như Map, bao gồm

const map = new Map()
=> Map(0) {}

4 và

const map = new Map()
=> Map(0) {}

5

map.forEach(function(value, key) {
	console.log(key + " = " + value);
})

//output
// one = first element
// two = second element
// 3 = third element

0

Lưu ý rằng Set không phải là cách để truy cập đến value qua key hoặc index, giống như Map.get(key) hoặc arr[index]

Keys, Values, and Entries for Sets

Cả Map và Set đều có các phương thức key (), value () và entries () trả về 1 vòng lặp. Tuy nhiên, trong khi mỗi một phương thức trong các phương thức này có một mục đích riêng biệt trong Map, Set không có key và do đó, key là alias (bí danh) cho các values. Điều này có nghĩa là cả keys () và values () sẽ trả về cùng một vòng lặp và các entries () sẽ trả về giá trị hai lần. Điều hợp lý nhất là chỉ sử dụng các values() với Set, vì hai phương thức còn lại tồn tại để thống nhất và tương thích chéo với Map.

map.forEach(function(value, key) {
	console.log(key + " = " + value);
})

//output
// one = first element
// two = second element
// 3 = third element

1

Vòng lặp trong Set

Giống như Map, Set cũng có tích hợp phương thức forEach(). do Set không có key, tham số thứ nhất và thứ hai của forEach() trả về cùng 1 giá trị, do đó không có trường hợp sử dụng nào cho nó ngoài khả năng tương thích với Map. các tham số của forEach() là value, ket, set. Cả forEach và for..of đều có thể được sử dụng trên Set. Đầu tiên, chúng ta hãy thử với forEach():

map.forEach(function(value, key) {
	console.log(key + " = " + value);
})

//output
// one = first element
// two = second element
// 3 = third element

2

Cả hai cách đều ra kết qủa :

map.forEach(function(value, key) {
	console.log(key + " = " + value);
})

//output
// one = first element
// two = second element
// 3 = third element

3

Thuộc tính và phương thức

Khi nào sử dụng Set?

Set là một bổ sung hữu ích cho bộ công cụ JavaScript của bạn, đặc biệt để làm việc với các giá trị trùng lặp trong dữ liệu. Trong một dòng duy nhất, chúng ta có thể tạo một Mảng mới mà không cần các giá trị trùng lặp từ một Mảng có các giá trị trùng lặp.

map.forEach(function(value, key) {
	console.log(key + " = " + value);
})

//output
// one = first element
// two = second element
// 3 = third element

4

Set có thể được dùng để tìm kiếm liên kết, điểm chung, sự khác biệt giữa hai bộ dữ liệu. tuy nhiên, arrays có một lợi thế đáng kể so với Set để thao tác bổ sung dữ liệu do các phương thức sort (), map (), filter () và less (), cũng như tương thích trực tiếp với các phương thức JSON.

Kết luận :

Trong bài viết này, bạn đã biết rằng Map là một tập hợp các cặp key / value được sắp xếp và Set là một tập hợp các giá trị duy nhất. Cả hai cấu trúc dữ liệu này đều bổ sung các khả năng cho JavaScript và đơn giản hóa các tác vụ phổ biến như tìm độ dài của bộ sưu tập cặp key / value và loại bỏ các phần tử trùng lặp khỏi bộ dữ liệu. Mặt khác, các object và array thường được sử dụng để lưu trữ và thao tác dữ liệu trong JavaScript và có khả năng tương thích trực tiếp với JSON, tiếp tục biến chúng thành các cấu trúc dữ liệu thiết yếu nhất, đặc biệt là để làm việc với API REST. Map và Set chủ yếu hữu ích khi hỗ trợ cấu trúc dữ liệu cho object và array.

Nguồn : https://www.taniarascia.com/understanding-map-and-set-javascript/