在 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