Hướng dẫn map javascript - bản đồ javascript

Trong bài này chúng ta sẽ tìm hiểu hàm map trong javascript, đây là hàm dùng để lặp qua các phần tử của mảng và cho phép xử lý giá trị của phần tử đó.map trong javascript, đây là hàm dùng để lặp qua các phần tử của mảng và cho phép xử lý giá trị của phần tử đó.

Nội dung chính ShowShow

• 1. Cú pháp hàm map trong javascript
• 2. Hàm map với tham số là arrow function
• 3. Cách dùng hàm map trong javascript
• 4. Lời kết
• Thêm giá trị vào Map
• Keys trong map
• Lấy và xóa phần tử từ Map
• Keys, values, entries
• Vòng lặp với Map
• Thuộc tính và phương thức của Map
• Khi nào sử dụng Map?
• Keys, Values, and Entries for Sets
• Vòng lặp trong Set
• Thuộc tính và phương thức
• Khi nào sử dụng Set?
• Kết luận :

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.freetuts.net, không được copy dưới mọi hình thức.

Javascript map là một hàm dành cho đối tượng mảng trong javascript, hàm này có công dụng tương tự như vòng lăp forEach. là một hàm dành cho đối tượng mảng trong javascript, hàm này có công dụng tương tự như vòng lăp forEach.

Hàm map() sẽ lặp qua từng phần tử của mảng, tham số truyền vào là một anonymous function. Hàm anonymous sẽ có một tham số truyền vào và đó chính là phần tử của mỗi vòng lặp, bên trong thân hàm anonymouse sẽ có lệnh return về một giá trị và giá trị này sẽ thay thế cho phần tử đó.

1. Cú pháp hàm map trong javascript

2. Hàm map với tham số là arrow function: Cú pháp chung của hàm map()

3. Cách dùng hàm map trong javascript

array.map(function(item){
    // item chính là phần tử đang lặp
    return item; // giá trị trả về sẽ thay thế cho giá trị ban đầu của phần tử
});

4. Lời kết

Thêm giá trị vào Map

var domain = [
    "freetuts.net", 
    "techtuts.net", 
    "simpletutorials.org"
];

domain.map(function(item){
    console.log(item);
});

Keys trong map

freetuts.net
techtuts.net
simpletutorials.org

2. Hàm map với tham số là arrow function

3. Cách dùng hàm map trong javascript

4. Lời kết

var domain = [
    "freetuts.net", 
    "techtuts.net", 
    "simpletutorials.org"
];

domain.map((item) => {
    console.log(item);
});

Thêm giá trị vào Map

3. Cách dùng hàm map trong javascript

4. Lời kết: Hãy viết chương trình thay đổi gấp đôi giá trị của các phần tử trong mảng dưới đây.

Keys trong map

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

var numbers = [5, 10, 20, 22, 60];
var new_number = numbers.map(function(item){
    return item * 2; // nhân đôi giá trị
});

console.log(new_number);
// Kết quả: [10, 20, 40, 44, 120]

Keys, values, entries

Vòng lặp với Map

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

var numbers = [5, 10, 20, 22, 60];
for (var i = 0; i < numbers.lenght; i++){
    numbers[i] = numbers[i] * 2;
}

console.log(numbers);
// Kết quả: [10, 20, 40, 44, 120]

4. Lời kết

Thêm giá trị vào Map

Keys trong map

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

Keys, values, entries

Vòng lặp với Map

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

Thêm giá trị vào Map

Keys trong map

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"}

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

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

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

var domain = [
    "freetuts.net", 
    "techtuts.net", 
    "simpletutorials.org"
];

domain.map(function(item){
    console.log(item);
});

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:

var domain = [
    "freetuts.net", 
    "techtuts.net", 
    "simpletutorials.org"
];

domain.map(function(item){
    console.log(item);
});

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

var domain = [
    "freetuts.net", 
    "techtuts.net", 
    "simpletutorials.org"
];

domain.map(function(item){
    console.log(item);
});

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:

var domain = [
    "freetuts.net", 
    "techtuts.net", 
    "simpletutorials.org"
];

domain.map(function(item){
    console.log(item);
});

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.

var domain = [
    "freetuts.net", 
    "techtuts.net", 
    "simpletutorials.org"
];

domain.map(function(item){
    console.log(item);
});

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 :

var domain = [
    "freetuts.net", 
    "techtuts.net", 
    "simpletutorials.org"
];

domain.map(function(item){
    console.log(item);
});

Đâ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.

var domain = [
    "freetuts.net", 
    "techtuts.net", 
    "simpletutorials.org"
];

domain.map(function(item){
    console.log(item);
});

Đâ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:

var domain = [
    "freetuts.net", 
    "techtuts.net", 
    "simpletutorials.org"
];

domain.map(function(item){
    console.log(item);
});

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,

var numbers = [5, 10, 20, 22, 60];

var domain = [
    "freetuts.net", 
    "techtuts.net", 
    "simpletutorials.org"
];

domain.map(function(item){
    console.log(item);
});

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:

var numbers = [5, 10, 20, 22, 60];

var domain = [
    "freetuts.net", 
    "techtuts.net", 
    "simpletutorials.org"
];

domain.map(function(item){
    console.log(item);
});

Sử dụng

var numbers = [5, 10, 20, 22, 60];

freetuts.net
techtuts.net
simpletutorials.org

Lấy ra một value từ key

freetuts.net
techtuts.net
simpletutorials.org

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.

freetuts.net
techtuts.net
simpletutorials.org

Phương thức

var numbers = [5, 10, 20, 22, 60];

freetuts.net
techtuts.net
simpletutorials.org

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

freetuts.net
techtuts.net
simpletutorials.org

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

var numbers = [5, 10, 20, 22, 60];

freetuts.net
techtuts.net
simpletutorials.org

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 đó.

freetuts.net
techtuts.net
simpletutorials.org

Đâ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:

freetuts.net
techtuts.net
simpletutorials.org

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 .

freetuts.net
techtuts.net
simpletutorials.org

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 :

freetuts.net
techtuts.net
simpletutorials.org

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)

var domain = [
    "freetuts.net", 
    "techtuts.net", 
    "simpletutorials.org"
];

domain.map((item) => {
    console.log(item);
});

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.

var numbers = [5, 10, 20, 22, 60];

var domain = [
    "freetuts.net", 
    "techtuts.net", 
    "simpletutorials.org"
];

domain.map((item) => {
    console.log(item);
});

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

var domain = [
    "freetuts.net", 
    "techtuts.net", 
    "simpletutorials.org"
];

domain.map((item) => {
    console.log(item);
});

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

var numbers = [5, 10, 20, 22, 60];

var numbers = [5, 10, 20, 22, 60];

var domain = [
    "freetuts.net", 
    "techtuts.net", 
    "simpletutorials.org"
];

domain.map((item) => {
    console.log(item);
});

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.

var domain = [
    "freetuts.net", 
    "techtuts.net", 
    "simpletutorials.org"
];

domain.map((item) => {
    console.log(item);
});

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():

var domain = [
    "freetuts.net", 
    "techtuts.net", 
    "simpletutorials.org"
];

domain.map((item) => {
    console.log(item);
});

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

var domain = [
    "freetuts.net", 
    "techtuts.net", 
    "simpletutorials.org"
];

domain.map((item) => {
    console.log(item);
});

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.

var domain = [
    "freetuts.net", 
    "techtuts.net", 
    "simpletutorials.org"
];

domain.map((item) => {
    console.log(item);
});

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/