在 TypeScript 中声明一个 ES6 Map

当前位置：主页 > 学无止境 > WEB前端 >

Vue React JavaScript Angular CSS HTML

在 TypeScript 中声明一个 ES6 Map

作者：迹忆客最近更新：2023/03/05 浏览次数：

本篇文章将指导我们使用编码示例在 TypeScript 中定义 ES6 Map。这解释了什么是 ES6 Map及其用途。

让我们首先看看 ES6 是什么以及为什么使用它们。

ES6 Map

在 ES6 之前，我们使用对象通过将键映射到任何类型的值来模拟 Map。但是，作为 Map 的对象有一些副作用：

一个对象有一个像原型一样的默认键。
对象不包含表示地图大小的属性。
对象键必须是字符串或符号。您不能将对象用于关键目的。

ES6 提供了一组新 Map 来解决上述不足。它可以定义为一个包含键值对的对象，其中键或值可以是任何类型。

此外，Map 对象会记住键的原始插入顺序。

语法：

let dataMap = new Map([iterableObj]);

map 函数只接受一个可选的带有键值对元素的可迭代对象。

考虑以下代码示例，其中包含一个带有键值对的 person 的对象数组。

使用 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>

TypeScript 中声明一个 ES6 Map

现在，让我们看看在 TypeScript 中使用 ES6 Map。

在 TypeScript 中将 ES6 Map 声明为记录

TypeScript 中原生支持的数据类型是 Record，而不是 Map。 TypeScript 不提供 ES5 的 polyfill，而在 ES6 中，它允许使用映射。

所以在 ES5 中编译 TypeScript 时，它会使用原生支持的类型而不是映射，而在 ES6 中，它可以简单地使用映射。考虑以下示例来描述本机支持Map的 Record。

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

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

console.log(peopleA)

上面的代码包含了不同键值对的Record形式的自定义映射。它产生以下输出，限制 peopleA 对象实现定义的 Record 类型。

输出：

es6 映射为 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
let mapData = new Map<string, number>();

// 使用初始键值对创建 map
let myMap = new Map<string, string>([
        ["key1", "value1"],
        ["key2", "value2"]
]);

// Map 操作符
let nameAgeMapping = new Map<string, number>();

//1. 添加元素
nameAgeMapping.set("Lokesh", 37);
nameAgeMapping.set("Raj", 35);
nameAgeMapping.set("John", 40);

//2. 获取元素
let age = nameAgeMapping.get("John");        // age = 40

//3. 通过 key 检索元素
nameAgeMapping.has("Lokesh");                // true
nameAgeMapping.has("Brian");                 // false

//4. Map 大小
let count = nameAgeMapping.size;             // count = 3

//5. 删除元素
let isDeleted = nameAgeMapping.delete("Lokesh");    // isDeleted = true

//6. 清空整个 Map
nameAgeMapping.clear();                      //Clear all entries


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

//1. 遍历 Map 键

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

//2. 遍历 Map 值
for (let value of nameAgeMapping.values()) {
    console.log(value);                 //37 35 40
}

//3. 遍历 Map 条目
for (let entry of nameAgeMapping.entries()) {
    console.log(entry[0], entry[1]);    //"Lokesh" 37 "Raj" 35 "John" 40
}

//4. 使用对象解构
for (let [key, value] of nameAgeMapping) {
    console.log(key, value);            //"Lokesh" 37 "Raj" 35 "John" 40
}