」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > JS 地圖

JS 地圖

發佈於2024-11-02
瀏覽:475

Map in JS

JavaScript 中的 Map 是鍵值對的集合,其中鍵可以是任何型別。它保留插入順序,這意味著項目按照添加順序進行迭代。

地圖的關鍵特徵;

  1. 唯一鍵:地圖中的每個鍵都是唯一的。
  2. 鍵的任何資料類型: 與物件不同,鍵可以是任何資料類型,包括函數、物件或任何原始類型。
  3. Iterable: 您可以迭代 Map.
  4. 的鍵、值或條目

基本操作

創建地圖

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 是一種通用的資料結構,可以保存任何資料類型的鍵值對,提供簡單的迭代方法,並維護元素的順序。它對於需要比常規物件更靈活的金鑰管理的場景非常有用,例如計算笑話中的單字數或儲存對各種謎語的回應。

版本聲明 本文轉載於:https://dev.to/__khojiakbar__/map-in-js-59k6?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3