当前位置：极客教程 > JavaScript > JavaScript 精品文章 > JavaScript Map的应用

JavaScript Map的应用

JavaScript Map的应用

Javascript Map 是一个包含多个元素的集合，其中每个元素都存储为键值对。Map对象可以同时存储对象和原始值作为键或值。当我们遍历Map对象时，它会按照插入的顺序返回键-值对。

语法：

new Map([it]);
JavaScript

参数:

  • it: it是任何可迭代对象，其值存储为键值对。如果未指定参数，则创建一个新的映射
    为空。

返回值: 一个新的Map对象。

Map的应用:

1. 数组操作: Map也可以用于根据条件改变或转换数组元素。举个例子，你可以使用map函数将一个数字数组中的每个整数翻倍。

示例: 在这个例子中，我们使用map函数将数组的元素翻倍。

JavaScript

let array = [10, 20, 30, 40, 50, 60]; 
let newArray = array.map((num) => { 
    return num * 2; 
}); 
  
console.log(newArray);
JavaScript

输出：

(6) [20, 40, 60, 80, 100, 120]
JavaScript

2. 过滤数据： 使用map()方法可以通过返回仅包含满足特定条件的元素的新数组来过滤数据。这可以通过返回不满足条件的元素undefined来实现。

示例： 这里，我们将使用map()方法从数组中过滤出奇偶数。

JavaScript

let array = [1, 2, 3, 4, 5, 6]; 
  
function solution(array) { 
    let result = ""; 
    array.map((item) => { 
        if (item % 2 === 0) { 
            result += "even "
        } else { 
            result += "odd "
        } 
    }) 
    return result 
} 
console.log(solution(array));
JavaScript

输出：

"odd even odd even odd even "
JavaScript

3. 转换数据类型 : **** map() 方法可以通过应用返回不同数据类型的函数来转换数据类型。这在使用返回数据需要转换为另一种格式的 API 时非常有用。

示例： 在这里，通过使用 map() 方法，我们可以将字符串转换为数组。

Javascript

const language = "GeeksforGeeks"; 
const map = Array.prototype.map; 
const letters = map.call(language, (eachLetter) => { 
    return `${eachLetter}`; 
}); 
  
console.log(letters);
JavaScript

输出：

["G", "e", "e", "k", "s", "f", "o", "r", "G", "e", "e", "k", "s"]
JavaScript

4. 缓存和记忆化： 一个映射可以用来实现对昂贵函数结果或计算数据的缓存。我们可以通过使用函数参数作为键和相关结果作为值来避免冗余计算，从而优化效率。当处理计算需求高的操作或经常访问的数据可以被存储时。

示例： 这是上述方法的一个示例。

Javascript

// Caching and Memoization using Map 
  
// Create a Map for caching computed values 
const cache = new Map(); 
  
// Example function to demonstrate 
// expensive computation 
function myValue(n) { 
    console.log(`value for {n}...`); 
    const result = n * Math.random(); 
    return result; 
} 
  
// Function to get a cached value or  
// compute and cache if not present 
function getCachedValue(n) { 
    if (cache.has(n)) { 
        console.log(`Fetching cached value for{n}...`); 
        return cache.get(n); 
    } else { 
        const result = myValue(n); 
        cache.set(n, result); 
        return result; 
    } 
} 
  
// Compute and cache for key 2 
console.log(getCachedValue(2)); 
  
// Retrieve from cache for key 2 
console.log(getCachedValue(2));  
  
// Compute and cache for key 5 
console.log(getCachedValue(5));  
  
// Retrieve from cache for key 5 
console.log(getCachedValue(5));  
  
// Retrieve from cache for key 2  
// (already computed) 
console.log(getCachedValue(2));
JavaScript

输出：

value for 2...
1.7458614577470124
Fetching cached value for 2...
1.7458614577470124
value for 5...
2.590270481082264
Fetching cached value for 5...
2.590270481082264
Fetching cached value for 2...
1.7458614577470124
JavaScript

5. URL 路由: 在 Web 应用程序中，可以使用 Map 将 URL 路径映射到适当的处理程序或方法。处理程序函数或相关元数据可能是与 URL 路径对应的值，这种策略使得应用程序能够有效地路由和导航用户。

示例: 这是上述方法的一个示例。

JavaScript

// Create a Map for URL routing 
const routes = new Map(); 
  
// Function to handle home page 
function myGfg() { 
    console.log("Welcome to the GeeksforGeeks"); 
} 
  
// Function to handle about page 
function myPortal() { 
    console.log("A Computer secience protal."); 
} 
  
// Function to handle contact page 
function myContact() { 
    console.log("You've reached the contact page."); 
} 
  
// Function to handle 404 (page not found) error 
function notFoundHandler() { 
    console.log("404 - Page not found"); 
} 
  
// Configure the routes 
routes.set("/", myGfg); 
routes.set("/about", myPortal); 
routes.set("/contact", myContact); 
  
// Function to handle incoming requests 
function handleRequest(url) { 
    if (routes.has(url)) { 
        const handler = routes.get(url); 
        handler(); 
    } else { 
        notFoundHandler(); 
    } 
} 
  
// Simulating incoming requests 
handleRequest("/"); // Home page 
handleRequest("/about"); // About page 
handleRequest("/contact"); // Contact page 
handleRequest("/products"); // Page not found
JavaScript

输出结果：

Welcome to the GeeksforGeeks
A Computer secience protal.
You've reached the contact page.
404 - Page not found
JavaScript

以下是JavaScript中地图的一些方法

  • JavaScript Map clear() 方法 : 从地图中删除所有元素并使其为空。
  • JavaScript Map delete() 方法 : 从地图中删除指定的元素。
  • JavaScript Map entries() 方法: 返回一个包含地图每个元素的[key, value]对的迭代器对象。
  • JavaScript Map forEach() 方法 : 使用给定的函数对地图中的每个键值对执行给定的函数。
  • JavaScript Map get() 方法: 返回地图中指定的元素。
  • JavaScript Map has() 方法: 检查地图中是否存在具有指定键的元素。
  • JavaScript Map keys() 方法: 从给定的地图对象返回键的迭代器对象。
  • JavaScript Map set() 方法: 向地图对象添加键值对。
  • JavaScript Map values() 方法 : 返回一个包含地图中每个元素的值的新的迭代器对象。

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

JavaScript 精品教程

登录

找回密码？

注册