在 TypeScript 中宣告一個 ES6 map

Muhammad Ibrahim Alvi 2023年1月30日 2022年5月18日
  1. ES6 map
  2. 在 TypeScript 中將 ES6 map 宣告為 Record
在 TypeScript 中宣告一個 ES6 map

本教程通過編碼示例指導我們在 TypeScript 中定義 ES6 map。這解釋了 ES6 map 是什麼以及它的用途。

讓我們首先看看 ES6 是什麼以及為什麼要使用它們。

ES6 map

在 ES6 之前,我們使用物件通過將鍵 map 到任何型別的值來模擬 map。但是,作為 map 的物件有一些副作用:

  1. 一個物件和原型一樣有一個預設鍵。
  2. 物件不包含表示 map 大小的屬性。
  3. 物件鍵必須是字串或符號。你不能將物件用於關鍵目的。

ES6 提供了一系列新 map 來解決上述不足。它可以定義為一個包含鍵值對的物件,其中鍵或值可以是任何型別。

此外,map 物件會記住鍵的順序的原始插入。

語法:

let dataMap = new Map([iterableObj]);

map 函式只接受一個可選的可迭代物件,該物件具有鍵值對中的元素。

考慮以下程式碼示例,其中包含一個人的具有鍵值對的物件陣列。

使用 getElementById 查詢並呼叫 .innerHTML 函式,我們通過在可迭代物件上呼叫 Map 方法並在其引數中傳遞一個回撥函式來插入人的名字和姓氏。

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Compute a new array with the full name of each person in the old array:</p>

<p id="demo"></p>

<script>
const persons = [
    {firstname : "Malcom", lastname: "Reynolds"},
    {firstname : "Kaylee", lastname: "Frye"},
    {firstname : "Jayne", lastname: "Cobb"}
];

document.getElementById("demo").innerHTML = persons.map(getFullName);

function getFullName(item) {
    return [item.firstname,item.lastname].join(" ");
}
</script>

</body>
</html>

輸出:

ES6 map 示例輸出

現在,讓我們看看在 TypeScript 中使用 ES6 map。

在 TypeScript 中將 ES6 map 宣告為 Record

TypeScript 中原生支援的資料型別不是 map,而是 Record。TypeScript 不為 ES5 提供 polyfill,而在 ES6 中,它允許使用 map。

所以在 ES5 中編譯 TypeScript 時,它會使用原生支援的型別而不是 map,而在 ES6 中,它可以簡單地使用 map。考慮以下示例來描述原生支援 map 的 Record

interface IPerson{
}
type mapLikeType = Record<string, IPerson>;

const peopleA: mapLikeType = {
    "a": { name: "joe" },
    "b": { name: "bart" },
};

console.log(peopleA)

上面的程式碼包含具有不同鍵值對的 Record 形式的自定義 map。它產生以下輸出,限制 peopleA 物件實現定義的 Record 型別。

輸出:

ES6 map 作為 TypeScript 示例輸出中的記錄

由於在 lib.es6.d.ts 中定義了 map 的介面,我們可以在 TypeScript 中使用它而無需定義本機支援的型別。下面是介面:

interface Map<K, V> {
    clear(): void;
    delete(key: K): boolean;
    entries(): IterableIterator<[K, V]>;
    forEach(callbackfn: (value: V, index: K, map: Map<K, V>) => void, thisArg?: any): void;
    get(key: K): V;
    has(key: K): boolean;
    keys(): IterableIterator<K>;
    set(key: K, value?: V): Map<K, V>;
    size: number;
    values(): IterableIterator<V>;
    [Symbol.iterator]():IterableIterator<[K,V]>;
    [Symbol.toStringTag]: string;
}

interface MapConstructor {
    new <K, V>(): Map<K, V>;
    new <K, V>(iterable: Iterable<[K, V]>): Map<K, V>;
    prototype: Map<any, any>;
}
declare var Map: MapConstructor;

現在,讓我們看看如何在 TypeScript 中直接使用 map,從建立一個初始鍵值對建立一個空 map 開始,然後新增條目並獲取它並迭代所有值。

// Create Empty Map
let mapData = new Map<string, number>();

// Creating map with initial key-value pairs
let myMap = new Map<string, string>([
        ["key1", "value1"],
        ["key2", "value2"]
]);

// Map Operations
let nameAgeMapping = new Map<string, number>();

//1. Add entries
nameAgeMapping.set("Lokesh", 37);
nameAgeMapping.set("Raj", 35);
nameAgeMapping.set("John", 40);

//2. Get entries
let age = nameAgeMapping.get("John");        // age = 40

//3. Check entry by Key
nameAgeMapping.has("Lokesh");                // true
nameAgeMapping.has("Brian");                 // false

//4. Size of the Map
let count = nameAgeMapping.size;             // count = 3

//5. Delete an entry
let isDeleted = nameAgeMapping.delete("Lokesh");    // isDeleted = true

//6. Clear whole Map
nameAgeMapping.clear();                      //Clear all entries


nameAgeMapping.set("Lokesh", 37);
nameAgeMapping.set("Raj", 35);
nameAgeMapping.set("John", 40);

//1. Iterate over map keys

for (let key of nameAgeMapping.keys()) {
    console.log(key);                   //Lokesh Raj John
}

//2. Iterate over map values
for (let value of nameAgeMapping.values()) {
    console.log(value);                 //37 35 40
}

//3. Iterate over map entries
for (let entry of nameAgeMapping.entries()) {
    console.log(entry[0], entry[1]);    //"Lokesh" 37 "Raj" 35 "John" 40
}

//4. Using object destructuring
for (let [key, value] of nameAgeMapping) {
    console.log(key, value);            //"Lokesh" 37 "Raj" 35 "John" 40
}
Muhammad Ibrahim Alvi avatar Muhammad Ibrahim Alvi avatar

Ibrahim is a Full Stack developer working as a Software Engineer in a reputable international organization. He has work experience in technologies stack like MERN and Spring Boot. He is an enthusiastic JavaScript lover who loves to provide and share research-based solutions to problems. He loves problem-solving and loves to write solutions of those problems with implemented solutions.

LinkedIn

相關文章 - TypeScript Map