迭代打字稿地图

时间:2016-06-08 10:01:16

标签: typescript angular maps

我试图迭代打字稿地图,但我一直在收到错误,但我找不到任何解决这个问题的解决方案。

我的代码是:

myMap : Map<string, boolean>;
for(let key of myMap.keys()) {
   console.log(key);
}

我得到了错误:

  

输入&#39; IterableIteratorShim&lt; [string,boolean]&gt;&#39;不是数组类型或字符串类型。

完整堆栈跟踪:

 Error: Typescript found the following errors:
  /home/project/tmp/broccoli_type_script_compiler-input_base_path-q4GtzHgb.tmp/0/src/app/project/project-data.service.ts (21, 20): Type 'IterableIteratorShim<[string, boolean]>' is not an array type or a string type.
    at BroccoliTypeScriptCompiler._doIncrementalBuild (/home/project/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:115:19)
    at BroccoliTypeScriptCompiler.build (/home/project/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:43:10)
    at /home/project/node_modules/broccoli-caching-writer/index.js:152:21
    at lib$rsvp$$internal$$tryCatch (/home/project/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/home/project/node_modules/rsvp/dist/rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (/home/project/node_modules/rsvp/dist/rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (/home/project/node_modules/rsvp/dist/rsvp.js:1198:9)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

我使用的是angular-cli beta5和typescript 1.8.10,我的目标是es5。 有人有这个问题吗?

11 个答案:

答案 0 :(得分:113)

您可以使用Map.prototype.forEach((value, key, map) => void, thisArg?) : void代替

像这样使用:

myMap.forEach((value: boolean, key: string) => {
    console.log(key, value);
});

答案 1 :(得分:27)

只需使用Array.from()方法将其转换为数组:

myMap : Map<string, boolean>;
for(let key of Array.from( myMap.keys()) ) {
   console.log(key);
}

答案 2 :(得分:14)

使用Array.fromArray.prototype.forEach()arrow functions

迭代

with open("textfile.txt","r") as f:
    newline = []
    for word in f.readlines():        
        newline.append(word.replace("previous_line","new_line"))

迭代

Array.from(myMap.keys()).forEach(key => console.log(key));

迭代条目

Array.from(myMap.values()).forEach(value => console.log(value));

答案 3 :(得分:12)

这对我有用。 TypeScript版本:2.8.3

for (const [key, value] of Object.entries(myMap)) { 
    console.log(key, value);
}

答案 4 :(得分:9)

for (let entry of Array.from(map.entries())) {
    let key = entry[0];
    let value = entry[1];
}

答案 5 :(得分:8)

根据TypeScript 2.3 release notes on "New --downlevelIteration"

  数组,调用和新表达式中的

for..of statements,数组解构和Spread元素支持ES5 / E3中的Symbol.iterator(如果可用)--downlevelIteration

默认情况下未启用!"downlevelIteration": true添加到tsconfig.json,或将--downlevelIteration标记传递给tsc,以获取完整的迭代器支持。

有了这个,你可以写for (let keyval of myMap) {...}并自动推断keyval的类型。

为什么默认关闭?根据TypeScript贡献者@aluanhaddad

  

它是可选的,因为它对所有使用的iterables(包括数组)的生成代码的大小以及潜在的性能都有非常显着的影响。

如果您可以定位ES2015("target": "es2015"tsconfig.json)或更晚的tsc --target ES2015,启用downlevelIteration是明智的,但如果您的目标是ES5 / ES3,您可以进行基准测试以确保迭代器支持不会影响性能(如果确实如此,那么使用Array.from转换或forEach或其他一些解决方法可能会更好。

答案 6 :(得分:4)

我使用最新的TS和节点(分别为v2.6和v8.9),我可以这样做:

let myMap = new Map<string, boolean>();
myMap.set("a", true);
for (let [k, v] of myMap) {
    console.log(k + "=" + v);
}

答案 7 :(得分:3)

这对我有用。

Object.keys(myMap).map( key => {
    console.log("key: " + key);
    console.log("value: " + myMap[key]);
});

答案 8 :(得分:2)

您还可以将数组映射方法应用于可迭代的Map.entries():

[...myMap.entries()].map(
     ([key, value]: [string, number]) => console.log(key, value)
);

此外,如其他答案所述,您可能必须在tsconfig.json中启用下层迭代(在编译器选项下):

  "downlevelIteration": true,

答案 9 :(得分:2)

在Typescript 3.5和Angular 8 LTS上,必须按如下所述强制转换类型:

for (let [k, v] of Object.entries(someMap)) {
    console.log(k, v)
}

答案 10 :(得分:1)

如果您具有Map类型(键,数组),可以通过HTML进行简单说明:

我以这种方式初始化数组:

public cityShop: Map<string, Shop[]> = new Map();

为了对其进行迭代,我从键值创建了一个数组: -只需将其用作数组即可:keys = Array.from(this.cityShop.keys());

然后,在HTML中,我可以使用:

*ngFor="let key of keys"

在这个气泡中,我只用this.cityShop.get(key)

来获得数组值。

然后...完成了!