首頁 >web前端 >js教程 >在 JavaScript 中使用地圖和集合:綜合指南

在 JavaScript 中使用地圖和集合:綜合指南

Patricia Arquette
Patricia Arquette原創
2024-12-22 14:21:15681瀏覽

Working with Maps and Sets in JavaScript: A Comprehensive Guide

在 JavaScript 中使用地圖和集合

MapsSetsES6 (ECMAScript 2015) 中引入的兩個重要資料結構,它們提供了比傳統物件和陣列更強的功能。 地圖 都允許您儲存唯一值並以更有條理、更有效率的方式處理資料。

1. JavaScript 中的地圖

Map 是鍵值對的集合,其中鍵和值都可以是任何資料型態。與只能使用字串或符號作為鍵的物件不同,Map 允許使用任何值(物件、陣列、函數等)作為鍵。

建立地圖

要建立 Map,可以使用 Map 建構子:

const map = new Map();

或者,您可以使用鍵值對陣列初始化 Map:

const map = new Map([
  ['name', 'Alice'],
  ['age', 25],
  ['city', 'New York']
]);

console.log(map);

新增條目

您可以使用 set() 方法新增項目:

const map = new Map();

map.set('name', 'John');
map.set('age', 30);
map.set('city', 'Los Angeles');

console.log(map);

訪問地圖中的值

您可以使用 get() 方法存取與鍵關聯的值:

const map = new Map([
  ['name', 'Alice'],
  ['age', 25]
]);

console.log(map.get('name'));  // Output: Alice
console.log(map.get('age'));   // Output: 25

檢查地圖中的密鑰

要檢查某個鍵是否存在,請使用 has() 方法:

const map = new Map([
  ['name', 'John'],
  ['age', 30]
]);

console.log(map.has('name'));  // Output: true
console.log(map.has('city'));  // Output: false

從地圖中刪除條目

您可以使用delete()方法刪除鍵值對:

map.delete('age');
console.log(map.has('age'));  // Output: false

要清除地圖上的所有條目:

map.clear();
console.log(map.size);  // Output: 0

迭代地圖

您可以使用 forEach() 或 for...of 迴圈迭代 Map 中的鍵值對:

const map = new Map([
  ['name', 'Alice'],
  ['age', 25]
]);

// Using forEach
map.forEach((value, key) => {
  console.log(key, value);
});

// Using for...of
for (const [key, value] of map) {
  console.log(key, value);
}

2. JavaScript 中的集合

Set 是唯一值的集合,這表示它會自動刪除任何重複值。與可以儲存多個相同元素的陣列不同,集合確保集合中的每個值都是唯一的。

建立集合

您可以使用 Set 建構子建立一個 Set:

const set = new Set();

或者,您可以使用值數組初始化 Set:

const set = new Set([1, 2, 3, 4, 5]);
console.log(set);

為集合添加值

您可以使用 add() 方法將值加到 Set 中:

const set = new Set();

set.add(1);
set.add(2);
set.add(3);
set.add(2);  // Duplicate value, won't be added

console.log(set);  // Output: Set { 1, 2, 3 }

檢查集合中的值

要檢查 Set 中是否存在某個值,請使用 has() 方法:

console.log(set.has(2));  // Output: true
console.log(set.has(4));  // Output: false

從集合中刪除值

您可以使用delete()方法從Set中刪除值:

const map = new Map();

要清除集合中的所有值:

const map = new Map([
  ['name', 'Alice'],
  ['age', 25],
  ['city', 'New York']
]);

console.log(map);

迭代集合

您可以使用 forEach() 或 for...of 迴圈迭代 Set 中的值:

const map = new Map();

map.set('name', 'John');
map.set('age', 30);
map.set('city', 'Los Angeles');

console.log(map);

3. 地圖與集合的比較

功能 地圖 設定 標題>
Feature Map Set
Storage Stores key-value pairs Stores unique values only
Key Types Any type (objects, arrays, primitive types) Only values (no keys)
Uniqueness Keys must be unique, values can repeat Values must be unique
Order of Elements Iterates in insertion order Iterates in insertion order
Size map.size set.size
Methods set(), get(), has(), delete(), clear() add(), has(), delete(), clear()
存放 儲存鍵值對 僅儲存唯一值

鍵類型

任何類型(物件、陣列、原始類型) 只有值(沒有鍵) 獨特性 鍵必須唯一,值可以重複 值必須是唯一的
    元素順序
按插入順序迭代 按插入順序迭代

尺寸

地圖大小 設定大小 方法 設定(),取得(),有(),刪除(),清除() 新增(),有(),刪除(),清除() 表>
  • 4.
  • 地圖和集合的用例
  • 當您需要將唯一鍵與特定值關聯時,
映射
  • 非常有用。例如:

    儲存使用者偏好

      儲存設定選項
    • 根據鍵快取資料
    • 當您需要儲存唯一值的集合時,
  • 集是理想的選擇。例如:

      追蹤網站上的唯一訪客
    • 從陣列中刪除重複值
    • 追蹤已處理或檢視的項目
    結論


    地圖提供高效的鍵值對存儲,支援任何資料類型作為鍵,並且它們維護插入順序。

    集合

    儲存唯一值,當您想要確保集合中沒有重複項時特別有用。
    Maps 和 Sets 都提供強大的功能,可以幫助您以更結構化和高效的方式管理資料。 嗨,我是 Abhay Singh Kathayat! 我是一名全端開發人員,擁有前端和後端技術的專業知識。我使用各種程式語言和框架來建立高效、可擴展且用戶友好的應用程式。 請隨時透過我的商務電子郵件與我聯繫:kaashshorts28@gmail.com。

    以上是在 JavaScript 中使用地圖和集合:綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章!

    陳述:
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn