programing

유형 스크립트 맵에 대한 반복

goodsources 2023. 3. 17. 21:27
반응형

유형 스크립트 맵에 대한 반복

타이프스크립트 맵을 반복하려고 하는데 오류가 계속 발생하며 이러한 사소한 문제에 대한 해결책을 찾을 수 없습니다.

암호는 다음과 같습니다.

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

에러가 표시됩니다.

'ItherableIterator'를 입력합니다.Shim <[string, boolean]>'은 배열 유형도 문자열 유형도 아닙니다.

전체 스택 트레이스:

 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 베타5와 typescript 1.8.10을 사용하고 있으며 타겟은 es5입니다.이 문제가 발생한 적이 있습니까?

사용할 수 있습니다.Map.prototype.forEach((value, key, map) => void, thisArg?) : void대신

다음과 같이 사용합니다.

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

es6

for (let [key, value] of map) {
    console.log(key, value);
}

es5

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

그냥 사용하다Array.from()변환 방법Array:

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

이건 나한테 효과가 있었어.TypeScript 버전: 2.8.3

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

Array.from, Array.protype사용합니다.Each()화살표 기능:

를 반복한다.

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

을 반복합니다.

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

엔트리에 대해 반복합니다.

Array.from(myMap.entries()).forEach(entry => console.log('Key: ' + entry[0] + ' Value: ' + entry[1]));

TypeScript 2.3 릴리즈 노트 "New "에 따라:

for..of statements어레이, 콜 및 새로운 식에서의 어레이 파괴 및 확산 요소는 ES5/E3의 Symbol.iterator(사용 시 사용 가능한 경우)를 지원합니다.--downlevelIteration

기본적으로 활성화되어 있지 않습니다!더하다"downlevelIteration": true고객님께tsconfig.json또는 패스--downlevelIteration에 깃발을 올리다.tsc완전한 반복기 지원을 받기 위해.

이 기능을 사용하면,for (let keyval of myMap) {...}그리고.keyval의 유형은 자동으로 추론됩니다.


기본적으로는 이 기능이 꺼져 있는 이유는 무엇입니까?TypeScript 기고자 @aluanhadad에 따르면

이것은 옵션입니다.이는 생성된 코드의 크기 및 잠재적으로 퍼포먼스에 큰 영향을 미치기 때문에 (어레이를 포함한) 모든 반복 가능한 사용에 매우 큰 영향을 미치기 때문입니다.

ES2015를 타겟으로 할 수 있는 경우("target": "es2015"tsconfig.json또는tsc --target ES2015)이후,이네이블화downlevelIteration간단하지만 ES5/ES3를 타깃으로 하고 있는 경우에는 반복기 지원이 퍼포먼스에 영향을 주지 않도록 벤치마크를 하는 것이 좋습니다(그렇다면 이 방법을 사용하는 것이 좋습니다).Array.from변환 또는forEach기타 회피책)을 참조해 주세요.

이건 나한테 효과가 있었어.

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

어레이 맵 메서드를 Map.entries() 반복 가능에 적용할 수도 있습니다.

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

또한 다른 답변에서 설명한 바와 같이 tsconfig.json(컴파일러 옵션)에서 하위 수준 반복을 활성화해야 할 수도 있습니다.

  "downlevelIteration": true,

최신 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);
}

타입스크립트 3.5 및 Angular 8 LTS에서는 다음과 같이 타입을 주조해야 했습니다.

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

HTML 문서에서 사용하기 위한 간단한 설명입니다.

유형(키, 어레이)의 맵이 있는 경우 다음과 같이 어레이를 초기화합니다.

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

그리고 이를 반복하기 위해 키 값에서 배열을 만듭니다.

다음과 같이 어레이로 사용할 수 있습니다.

keys = Array.from(this.cityShop.keys());

다음으로 HTML에서 다음을 사용할 수 있습니다.

*ngFor="let key of keys"

이 루프 내에서는 다음과 같은 어레이 값만 얻을 수 있습니다.

this.cityShop.get(key)

알았어!

는 는는그용사 i를 사용해 보았다.Array.from( myMap.keys() )키 node.js를 추가한 하지 않았습니다."downlevelIteration": true을 tsconfig.json"으로 합니다.es2017Ahmed Fasih와 다른 사람들이 제안한 대로요.

결국 효과가 있었던 것은 Jason Slobotski의 제안으로Object.keys:

let keys = Object.keys(myMap);

중첩된 함수를 별로 좋아하지 않는 경우 키를 통해 반복할 수도 있습니다.

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

은, 「필터링」으로 할 hasOwnProperty이를 실행하지 않으면 경고 또는 오류가 나타납니다.

let map = new Map();

map.set('a', 2);
map.set('b', 4);
map.set('c', 6);
map.set('d', 7);

for(let key of map) 
{ 
    console.log(key[0], "----" key[1]) 
}

출력 -

a ---- 2
b ---- 4
c ---- 6
d ---- 7

언급URL : https://stackoverflow.com/questions/37699320/iterating-over-typescript-map

반응형