首页  >  文章  >  web前端  >  JS 地图

JS 地图

WBOY
WBOY原创
2024-07-19 15:06:58811浏览

Map in JS

JavaScript 中的 Map 是键值对的集合,其中键可以是任何类型。它保留插入顺序,这意味着项目按照添加顺序进行迭代。

地图的主要特征;

  1. 唯一键:地图中的每个键都是唯一的。
  2. 键的任何数据类型:与对象不同,键可以是任何数据类型,包括函数、对象或任何原始类型。
  3. 可迭代: 您可以迭代 Map 的键、值或条目。

基本操作

创建地图

let funnyMap = new Map();

向地图添加元素

funnyMap.set('a', 1); // string key
funnyMap.set(2, 'two'); // number key
funnyMap.set(true, 'yes'); // boolean key
funnyMap.set({name: 'obj'}, 'object'); // object key

// Funny example
funnyMap.set('knock-knock', 'who’s there?');

从地图获取值

console.log(funnyMap.get('a')); // 1
console.log(funnyMap.get(2)); // two
console.log(funnyMap.get(true)); // yes

// Funny example
console.log(funnyMap.get('knock-knock')); // who’s there?

检查密钥

console.log(funnyMap.has('a')); // true
console.log(funnyMap.has(42)); // false

// Funny example
console.log(funnyMap.has('chicken')); // false (It crossed the road)

删除元素

funnyMap.delete('a');
console.log(funnyMap.has('a')); // false

// Funny example
funnyMap.delete('knock-knock');
console.log(funnyMap.get('knock-knock')); // undefined (No one answered)

获取地图的大小

console.log(funnyMap.size); // 3 after deletion

// Funny example
console.log(`The map has ${funnyMap.size} jokes left.`);

清除地图

funnyMap.clear();
console.log(funnyMap.size); // 0

// Funny example
console.log(`All jokes are cleared from the map.`);

迭代地图

用于...的

funnyMap.set('banana', 'yellow');
funnyMap.set('apple', 'red');
funnyMap.set('grape', 'purple');

// Iterating over keys
for (let key of funnyMap.keys()) {
    console.log(`Key: ${key}`);
}

// Iterating over values
for (let value of funnyMap.values()) {
    console.log(`Value: ${value}`);
}

// Iterating over entries
for (let [key, value] of funnyMap.entries()) {
    console.log(`Key: ${key}, Value: ${value}`);
}

// Funny example
funnyMap.set('dad joke', 'What do you call fake spaghetti? An impasta!');
for (let [key, value] of funnyMap.entries()) {
    console.log(`Here’s a ${key}: ${value}`);
}

使用 forEach

funnyMap.forEach((value, key) => {
    console.log(`Key: ${key}, Value: ${value}`);
});

// Funny example
funnyMap.set('bad pun', 'I’m reading a book on anti-gravity. It’s impossible to put down!');
funnyMap.forEach((value, key) => {
    console.log(`Here’s a ${key}: ${value}`);
});

实际用途

字数统计(搞笑版)

想象一下您想要计算某些单词在笑话集中出现的次数:

let jokeText = "Why did the scarecrow win an award? Because he was outstanding in his field!";

// Splitting text into words
let words = jokeText.split(/\W+/);

let wordCount = new Map();

words.forEach(word => {
    word = word.toLowerCase();
    if (wordCount.has(word)) {
        wordCount.set(word, wordCount.get(word) + 1);
    } else {
        wordCount.set(word, 1);
    }
});

wordCount.forEach((count, word) => {
    console.log(`Word: ${word}, Count: ${count}`);
});

// Funny example
console.log('Word counts in our joke:');
wordCount.forEach((count, word) => {
    console.log(`"${word}": ${count} times`);
});

概括

JavaScript 中的 Map 是一种多功能数据结构,可以保存任何数据类型的键值对,提供简单的迭代方法,并维护元素的顺序。它对于需要比常规对象更灵活的密钥管理的场景非常有用,例如计算笑话中的单词数或存储对各种谜语的响应。

以上是JS 地图的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn