JavaScript >> Javascript 文檔 >  >> Tags >> map

JavaScript 中的地圖簡介

Maps 是 JavaScript 中的一種新數據結構,允許您創建鍵值對的集合。它們是在 ES6(也稱為 ES2015)和 JavaScript 中的 Sets 中引入的。映射對象可以將對象和基元存儲為鍵和值。

映射類似於也用於存儲鍵值數據的對象。但主要區別在於映射鍵可以是任何類型,並且不僅限於字符串和符號。與物體不同,它也更容易獲得地圖的大小。

初始化地圖

就像集合一樣,您可以使用 Map() 創建空地圖的構造函數:

const items = new Map(); 

也可以傳遞一個可迭代的(比如數組)給構造函數來初始化地圖:

const items = new Map([['🦅', 'Eagle'], ['🐶', 'Dog']]); 

映射方法

主要方法和屬性有set() , get() , has() , size , delete() , 和 clear() .下面是一個簡單的地圖示例,展示了這些方法的使用:

const items = new Map();

// add items
items.set('🐶', 'Dog');
items.set('🦅', 'Eagle');
items.set('🚄', 'Train');
items.set(45, 'Number');
items.set(true, 'Boolean');

// get item
items.get(45); // Number
items.get('🐶'); // Dog
items.get('🐺'); // undefined

// check if key exists
items.has('🚄'); // true
items.has('🐺'); // false

// get items count
items.size; // 5

// delete item
items.delete('🦅'); // true
items.delete('🦅'); // false - already removed

// delete all items
items.clear();

像集合一樣,映射鍵也是唯一的。調用 set() 多次使用相同的鍵不會添加多個鍵值對。而是將值部分替換為最新的值:

const animals = new Map();

animals.set('🐺', 'Wolf');
animals.set('🐺', 'Wolf Face');

console.log(animals); // Map(1) {"🐺" => "Wolf Face"}

地圖中的對象

由於映射允許我們將任何數據類型存儲為鍵或值,我們可以存儲複雜的對象,如對象字面量、數組,甚至函數:

const props = {
    browser: 'Chrome',
    os: 'Ubuntu 19.04'
};

const hamburger = () => '🍔'; 

const things = new Map();

things.set('birds', ['🦉', '🦅']);
things.set('user', {name: 'John Doe', planet: 'Earth'});
things.set(props, 59);
things.set(hamburger, 'What is the food?');

things.get(props); // 59
things.get(hamburger); // What is the food?

遍歷地圖

與對像不同,當我們遍歷映射時,鍵值對的返回順序與插入時的順序相同。我們可以使用 for...of 循環遍歷所有鍵值對:

const foods = new Map([
    ['🍌', 'Banana'],
    ['🍕', 'Pizza'],
    ['🥒', 'Cucumber'],
    ['🌽', 'Maize'],
]);

for (const [key, value] of foods) {
    console.log(`${key}: ${value}`);
}

// 🍌: Banana
// 🍕: Pizza
// 🥒: Cucumber
// 🌽: Maize

同樣,我們也可以使用內置的forEach() 遍歷所有元素的方法:

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

鍵和值

地圖提供 keys()values() 僅訪問鍵和值的方法。這些方法返回一個新的可迭代對象,該對像也可用於迭代所有鍵或值:

for (const key of foods.keys()) {
    console.log(key);
}

for (const value of foods.values()) {
    console.log(value);
}

Map 對像也有 entries() 返回條目 [key, value] 的可迭代對象的方法 . for...of中默認使用該方法 環形。舉個例子:

for (const [key, value] of foods.entries()) {
    console.log(`${key}: ${value}`);
}

與集合類似,您可以調用 next() entries() 返回的可迭代對像上的方法 一對一遍歷鍵值對的方法:

const entries = foods.entries();

console.log(entries.next()); // {value: ["🍌", "Banana"], done: false}

結論

映射是鍵值對的集合,它允許我們將對象和原語存儲為鍵和值。與對像不同,映射鍵可以是任何類型:對象、數組、函數甚至是另一個映射。與集合類似,鍵是唯一的;它們只能在整個地圖中出現一次。當我們遍歷一個映射對象時,鍵值對會按照它們在映射中插入的順序返回。

如果您有興趣了解更多信息,請查看我們的 JavaScript 集合指南。


Tutorial JavaScript 教程
  1. 滿足您的腳本加載需求

  2. 使用 Brain.js 的有用 LSTM 網絡示例

  3. 讓我們開始吧 ($script.js)

  4. 如何在 Flutter 中創建 PDF

  5. 使用 PixiJS 和 WebGL 構建圖片庫

  6. NodeJS + Express 第 4 部分:創建 CRUD API

  7. 錯誤:JSON 解析錯誤:使用角度翻譯時屬性名稱必須是字符串文字

  1. 計算你博客的閱讀時間⏱🦉

  2. nodejs ejs將數組對象渲染到表中

  3. 為什麼我們將一個有 20 年曆史的網站搬到了蓋茨比

  4. 在 NodeJS 中創建 HMAC 授權標頭

  5. 動畫兩個項目彼此遠離,直到碰到容器輪廓

  6. 隨機數組 JavaScript |簡單的示例代碼

  7. 使用 RxJS 定時器提供週期性異步數據

  1. 停止 Console.Logging!這是如何使用 Chrome 調試 JavaScript

  2. 60fps JS,同時對數百萬條記錄進行排序、映射和減少(使用空閒時間協程)

  3. 🦄 如何在 React JS 中定義你的 CSS/SCSS ⚡️

  4. 使用 Puppeteer 構建汽車價格刮板優化器