blocks|key|116029|text|您可以改用Map.prototype.forEach((value,+key,+map)+=>+void,+thisArg?)+:+void|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|116030|像这样使用它：|116031|myMap.forEach((value:+boolean,+key:+string)+=>+{
++++console.log(key,+value);
});|code-block|syntax|javascript|116032|entityMap^0|5|1T|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

You could use <code>Map.prototype.forEach((value, key, map) =&gt; void, thisArg?) : void</code> instead

Use it like this:

<pre><code>myMap.forEach((value: boolean, key: string) =&gt; {
 console.log(key, value);
});
</code></pre>

blocks|key|113595|text|如果你真的不喜欢嵌套函数，你也可以遍历这些键：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|113596|myMap+:+Map<string,+boolean>;
for(let+key+of+myMap)+{
+++if+(myMap.hasOwnProperty(key))+{
+++++++console.log(JSON.stringify({key:+key,+value:+myMap[key]}));
+++}
}|code-block|syntax|javascript|113597|注意，你必须用hasOwnProperty过滤掉非键迭代，如果你不这样做，你会得到一个警告或者一个错误。|offset|length|style|CODE|113598|entityMap^0|0|0|7|E|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

If you don't really like nested functions, you can also iterate over the keys:

<pre><code>myMap : Map&lt;string, boolean&gt;;
for(let key of myMap) {
 if (myMap.hasOwnProperty(key)) {
 console.log(JSON.stringify({key: key, value: myMap[key]}));
 }
}
</code></pre>

Note, you have to filter out the non-key iterations with the <code>hasOwnProperty</code>, if you don't do this, you get a warning or an error.

blocks|key|116250|text|只需使用Array.from()方法将其转换为Array|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|116251|myMap+:+Map<string,+boolean>;
for(let+key+of+Array.from(+myMap.keys())+)+{
+++console.log(key);
}|code-block|syntax|javascript|116252|entityMap^0|4|C|N|5|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

Just use <code>Array.from()</code> method to convert it to an <code>Array</code>:
<pre><code>myMap : Map&lt;string, boolean&gt;;
for(let key of Array.from( myMap.keys()) ) {
 console.log(key);
}
</code></pre>

blocks|key|116048|text|es6|type|unstyled|depth|inlineStyleRanges|entityRanges|data|116049|for+(let+[key,+value]+of+map)+{
++++console.log(key,+value);
}|code-block|syntax|javascript|116050|es5|116051|for+(let+entry+of+Array.from(map.entries()))+{
++++let+key+=+entry[0];
++++let+value+=+entry[1];
}|116052|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<h1>es6</h1>

<pre><code>for (let [key, value] of map) {
 console.log(key, value);
}
</code></pre>

<h1>es5</h1>

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

blocks|key|116054|text|我使用的是最新的TS和node+(分别是v2.6和v8.9+)，我可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|116055|let+myMap+=+new+Map<string,+boolean>();
myMap.set("a",+true);
for+(let+[k,+v]+of+myMap)+{
++++console.log(k+%2B+"="+%2B+v);
}|code-block|syntax|javascript|116056|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I'm using latest TS and node (v2.6 and v8.9 respectively) and I can do:

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

blocks|key|113890|text|根据TypeScript+2.3+release+notes+on+"New+--downlevelIteration"|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|113891|在使用--downlevelIteration时，|113892|+for..of+statements、数组分解和数组中的扩散元素、调用和新表达式支持ES5/E3中的Symbol.iterator|blockquote|113893|113894|113895|这在默认情况下是不启用的！将"downlevelIteration":+true添加到您的tsconfig.json，或者将--downlevelIteration标志传递给tsc，以获得完整的迭代器支持。|BOLD|113896|有了这一点，你可以编写for+(let+keyval+of+myMap)+{...}和keyval的类型将自动推断。|113897|113898|为什么默认情况下会关闭此功能？根据TypeScript贡献者@aluanhaddad的说法，|113899|113900|它是可选的，因为它对生成的代码的大小有非常重要的影响，并且对于所有迭代器(包括数组)的使用都有潜在的性能影响。|113901|113902|113903|如果您可以针对ES2015+(+tsconfig.json或tsc+--target+ES2015中的"target":+"es2015")或更高版本，启用downlevelIteration是不需要动脑筋的，但是如果您针对的是ES5/ES3，则可以进行基准测试，以确保迭代器支持不会影响性能(如果影响，您最好使用Array.from转换或forEach或其他变通方法)。|113904|entityMap|0|LINK|mutability|MUTABLE|url|http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-3.html#new---downleveliteration|1|https://github.com/Microsoft/TypeScript/issues/3164#issuecomment-328587113^0|13|K|2|1M|0|0|3|K|0|1|I|0|0|0|0|D|E|Q|19|D|1Q|K|2F|3|0|B|V|17|6|0|0|U|C|1|0|0|0|0|0|G|D|U|J|1F|I|26|I|4D|A|4Q|7|0^^$0|@$1|2|3|4|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|F|3|G|5|6|7|1H|8|@$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|1K|8|@$9|1L|A|1M|B|C]]|D|@]|E|$]]|$1|K|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|1O|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|1P|8|@$9|1Q|A|1R|B|O]|$9|1S|A|1T|B|C]|$9|1U|A|1V|B|C]|$9|1W|A|1X|B|C]|$9|1Y|A|1Z|B|C]]|D|@]|E|$]]|$1|P|3|Q|5|6|7|20|8|@$9|21|A|22|B|C]|$9|23|A|24|B|C]]|D|@]|E|$]]|$1|R|3|-4|5|6|7|25|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|26|8|@]|D|@$9|27|A|28|1|29]]|E|$]]|$1|U|3|-4|5|6|7|2A|8|@]|D|@]|E|$]]|$1|V|3|W|5|J|7|2B|8|@]|D|@]|E|$]]|$1|X|3|-4|5|6|7|2C|8|@]|D|@]|E|$]]|$1|Y|3|-4|5|6|7|2D|8|@]|D|@]|E|$]]|$1|Z|3|10|5|6|7|2E|8|@$9|2F|A|2G|B|C]|$9|2H|A|2I|B|C]|$9|2J|A|2K|B|C]|$9|2L|A|2M|B|C]|$9|2N|A|2O|B|C]|$9|2P|A|2Q|B|C]]|D|@]|E|$]]|$1|11|3|-4|5|6|7|2R|8|@]|D|@]|E|$]]]|12|$13|$5|14|15|16|E|$17|18]]|19|$5|14|15|16|E|$17|1A]]]]

Per the <a href="http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-3.html#new---downleveliteration" rel="noreferrer">TypeScript 2.3 release notes on "New <code>--downlevelIteration</code>"</a>:

<blockquote>
 <code>for..of statements</code>, Array Destructuring, and Spread elements in Array, Call, and New expressions support Symbol.iterator in ES5/E3 if available when using <code>--downlevelIteration</code>
</blockquote>

This is not enabled by default! Add <code>"downlevelIteration": true</code> to your <code>tsconfig.json</code>, or pass <code>--downlevelIteration</code> flag to <code>tsc</code>, to get full iterator support.

With this in place, you can write <code>for (let keyval of myMap) {...}</code> and <code>keyval</code>'s type will be automatically inferred.

<hr>

Why is this turned off by default? According to TypeScript contributor <a href="https://github.com/Microsoft/TypeScript/issues/3164#issuecomment-328587113" rel="noreferrer">@aluanhaddad</a>,

<blockquote>
 It is optional because it has a very significant impact on the size of generated code, and potentially on performance, for all uses of iterables (including arrays).
</blockquote>

If you can target ES2015 (<code>"target": "es2015"</code> in <code>tsconfig.json</code> or <code>tsc --target ES2015</code>) or later, enabling <code>downlevelIteration</code> is a no-brainer, but if you're targeting ES5/ES3, you might benchmark to ensure iterator support doesn't impact performance (if it does, you might be better off with <code>Array.from</code> conversion or <code>forEach</code> or some other workaround).

blocks|key|113906|text|使用Array.from、Array.prototype.forEach()和arrow+functions|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|113907|遍历密钥|style|BOLD|113908|Array.from(myMap.keys()).forEach(key+=>+console.log(key));|code-block|syntax|javascript|113909|迭代值|113910|Array.from(myMap.values()).forEach(value+=>+console.log(value));|113911|遍历条目|113912|Array.from(myMap.entries()).forEach(entry+=>+console.log('Key:+'+%2B+entry[0]+%2B+'+Value:+'+%2B+entry[1]));|113913|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from|1|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach|2|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions^0|2|A|0|D|P|1|13|F|2|0|2|2|0|0|2|1|0|0|2|2|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]|$A|1A|B|1B|1|1C]|$A|1D|B|1E|1|1F]]|C|$]]|$1|D|3|E|5|6|7|1G|8|@$A|1H|B|1I|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|1J|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1K|8|@$A|1L|B|1M|F|G]]|9|@]|C|$]]|$1|O|3|P|5|J|7|1N|8|@]|9|@]|C|$K|L]]|$1|Q|3|R|5|6|7|1O|8|@$A|1P|B|1Q|F|G]]|9|@]|C|$]]|$1|S|3|T|5|J|7|1R|8|@]|9|@]|C|$K|L]]|$1|U|3|-4|5|6|7|1S|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|11]]|12|$5|X|Y|Z|C|$10|13]]|14|$5|X|Y|Z|C|$10|15]]]]

Using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from" rel="noreferrer">Array.from</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" rel="noreferrer">Array.prototype.forEach()</a>, and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions" rel="noreferrer">arrow functions</a>:

Iterate over the keys:

<pre><code>Array.from(myMap.keys()).forEach(key =&gt; console.log(key));
</code></pre>

Iterate over the values:

<pre><code>Array.from(myMap.values()).forEach(value =&gt; console.log(value));
</code></pre>

Iterate over the entries:

<pre><code>Array.from(myMap.entries()).forEach(entry =&gt; console.log('Key: ' + entry[0] + ' Value: ' + entry[1]));
</code></pre>

blocks|key|113915|text|这对我很有效。TypeScript版本:+2.8.3|type|unstyled|depth|inlineStyleRanges|entityRanges|data|113916|for+(const+[key,+value]+of+Object.entries(myMap))+{+
++++console.log(key,+value);
}|code-block|syntax|javascript|113917|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This worked for me. TypeScript Version: 2.8.3

<pre><code>for (const [key, value] of Object.entries(myMap)) { 
 console.log(key, value);
}
</code></pre>

blocks|key|116272|text|在HTML文档中使用它只是一个简单的解释。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|116273|如果你有一个类型的映射(key，array)，那么你可以这样初始化数组：|116274|public+cityShop:+Map<string,+Shop[]>+=+new+Map();|code-block|syntax|javascript|116275|要遍历它，需要从键值创建一个数组。|116276|只需将其用作数组即可，如下所示：|116277|keys+=+Array.from(this.cityShop.keys());|116278|然后，在HTML中，您可以使用：|116279|*ngFor="let+key+of+keys"|116280|在此循环中，您只需使用以下命令获取数组值：|116281|this.cityShop.get(key)|116282|完成了！|116283|entityMap^0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|15|8|@]|9|@]|A|$G|H]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|17|8|@]|9|@]|A|$G|H]]|$1|S|3|T|5|6|7|18|8|@]|9|@]|A|$]]|$1|U|3|V|5|F|7|19|8|@]|9|@]|A|$G|H]]|$1|W|3|X|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Z|$]]

Just a simple explanation to use it in an HTML document.

If you have a Map of types (key, array) then you initialise the array this way:

<pre><code>public cityShop: Map&lt;string, Shop[]&gt; = new Map();
</code></pre>

And to iterate over it, you create an array from key values.

Just use it as an array as in:

<pre><code>keys = Array.from(this.cityShop.keys());
</code></pre>

Then, in HTML, you can use: 

<pre><code>*ngFor="let key of keys"
</code></pre>

Inside this loop, you just get the array value with:

<pre><code>this.cityShop.get(key)
</code></pre>

Done!

blocks|key|2663195|text|这对我很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2663196|Object.keys(myMap).map(+key+=>+{
++++console.log("key:+"+%2B+key);
++++console.log("value:+"+%2B+myMap[key]);
});|code-block|syntax|javascript|2663197|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This worked for me.

<pre><code>Object.keys(myMap).map( key =&gt; {
 console.log("key: " + key);
 console.log("value: " + myMap[key]);
});
</code></pre>

blocks|key|113936|text|您还可以将数组映射方法应用于Map.entries()可迭代对象：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|113937|[...myMap.entries()].map(
+++++([key,+value]:+[string,+number])+=>+console.log(key,+value)
);|code-block|syntax|javascript|113938|此外，正如在其他答案中所指出的，您可能必须在tsconfig.json中启用下层迭代(在编译器选项下)：|113939|++"downlevelIteration":+true,|113940|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

You can also apply the array map method to the Map.entries() iterable:

<pre><code>[...myMap.entries()].map(
 ([key, value]: [string, number]) =&gt; console.log(key, value)
);
</code></pre>

Also, as noted in other answers, you may have to enable down level iteration in your tsconfig.json (under compiler options):

<pre><code> "downlevelIteration": true,
</code></pre>

blocks|key|2663269|text|在Typescript+3.5和Angular+8+LTS上，需要按如下方式转换类型：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2663270|for+(let+[k,+v]+of+Object.entries(someMap))+{
++++console.log(k,+v)
}|code-block|syntax|javascript|2663271|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

On Typescript 3.5 and Angular 8 LTS, it was required to cast the type as follows:

<pre><code>for (let [k, v] of Object.entries(someMap)) {
 console.log(k, v)
}
</code></pre>

I'm trying to iterate over a typescript map but I keep getting errors and I could not find any solution yet for such a trivial problem.

My code is:

<pre><code>myMap : Map&lt;string, boolean&gt;;
for(let key of myMap.keys()) {
 console.log(key);
}
</code></pre>

And I get the Error:

<blockquote>
 Type 'IterableIteratorShim&lt;[string, boolean]>' is not an array type or a string type.
</blockquote>

Full Stack Trace:

<pre><code> 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&lt;[string, boolean]&gt;' 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)
</code></pre>

I'm using angular-cli beta5 and typescript 1.8.10 and my target is es5.
Has anyone had this Problem?

Iterating over Typescript Map

TypeScript

编译器

JSON

我正在尝试迭代一个typescript映射，但我总是收到错误，而且我还找不到任何解决这个微不足道的问题的方法。我的代码是：myMap : Map<string, boolean>;for(let key of myMap.keys()) { console.log(key);}然后我得到了错误：类型“Iterabl...

问迭代Typescript映射
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问迭代Typescript映射EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问迭代Typescript映射
EN