ES6 튜 토리 얼 의 for 순환 과 Map,Set 용법 분석

본 논문 의 사례 는 ES6 튜 토리 얼 의 for 순환 과 Map,Set 용법 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
지금 여러분 은 먼저 한 배열 의 요 소 를 옮 겨 다 니 려 면 어떻게 하 시 겠 습 니까?일반적으로 for 순환 이 생각 납 니 다.

for (var index = 0; index < myArray.length; index++) {
 console.log(myArray[index]);
}

안 타 깝 게 도 이 방법 은 20 년 동안 인재 가 사용 해 야 할 방법 입 니 다.ES5 에서 더욱 간편 한 foreach 방법 을 제 시 했 습 니 다.코드 는 다음 과 같 습 니 다.

myArray.forEach(function (value) {
 console.log(value);
});

foreach 방법 은 짧 지만 break 로 순환 을 중단 할 수 없고 return 을 통 해 순환 을 종료 할 수 없다 는 단점 도 있 습 니 다.
그럼 for-in 방법 도 있 잖 아 요.

for (var index in myArray) { 
 console.log(myArray[index]);
}

그러나 for-in 방법 은 실제로 key 의 키 쌍 형 대상 을 저장 하기 위해 준비 한 것 이지 배열 을 위 한 것 이 아 닙 니 다.아래 표 시 는 문자열'1','2'입 니 다.'1'+'2'가 어떻게 될 지 아 시 겠 죠?
for-off 순환
ES6 는 이전의 코드 에 영향 을 주지 않 기 위해 많은 사람들 이 기 른 습관 을 만족 시 키 기 위해 새로운 순환 문법 for-of 만 내 놓 을 수 있 습 니 다.

for (var value of myArray) {
 console.log(value);
}

for-in 과 for-of 를 비교 합 니 다.

var a = ["a","b","c","d","e"];
for (var idx in a) {
  console.log( idx ); 
  }// 0 1 2 3 4 
for (var val of a) {
  console.log( val ); 
  }// "a" "b" "c" "d" "e"

for-of 는 배열 뿐만 아니 라 dom 대상 에 도 사용 할 수 있 으 며 맵 과 set 대상 에 도 똑 같이 작용 합 니 다.
다음은 맵 과 Set 대상 을 소개 하 겠 습 니 다.
Map,Set
자 바스 크 립 트 의 기본 대상 표시 방식 은{}이지 만 자 바스 크 립 트 의 대상 은 키 가 문자열 이 어야 한 다 는 작은 문제 가 있 습 니 다.그러나 실제로 Number 나 다른 데이터 형식 을 키 로 하 는 것 도 매우 합리적이다.
이 문 제 를 해결 하기 위해 최신 ES6 규범 은 새로운 데이터 형식 맵 을 도입 했다.
Map 은 매우 빠 른 검색 속 도 를 가 진 키 쌍 구조 입 니 다.
우 리 는 맵 의 사용 예 시 를 살 펴 보 자.

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95
var m = new Map(); //  Map
m.set('Adam', 67); //     key-value
m.set('Bob', 59);
m.has('Adam'); //     key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); //   key 'Adam'
m.get('Adam'); // undefined

위의 has 방법 은 index Of 보다 속도 가 빠르다.
Set 는 Map 과 유사 하고 key 가 존재 하 는 목록 입 니 다.Set 의 요 소 는 중복 되 지 않 습 니 다.

var s1 = new Set(); //  Set
var s2 = new Set([1, 2, 3]); //  1, 2, 3
var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}

다시 추 가 된 중복 데이터 가 걸 러 지 는 것 을 볼 수 있 습 니 다.
그렇다면 이 두 대상 의 활용 장면 은 어떤 것들 이 있 을 까?
Map 은 키 쌍 을 저장 할 수 있 습 니 다.예 를 들 어 이름과 나이,set 는 반복 할 수 없 는 목 표를 저장 할 수 있 습 니 다.예 를 들 어 학 번 목록 등 입 니 다.
for-of 사용 대상
자,두 가지 유형의 새로운 대상 을 소 개 했 습 니 다.for-of 가 set 대상 에 어떻게 작용 하 는 지 보 여 주세요.

var uniqueWords = new Set(words);
for (var word of uniqueWords) {
 console.log(word);
}

Map 대상 을 옮 겨 다 니 는 것 은 다 릅 니 다.Map 은 키 로 저장 되 어 있 기 때문에 우 리 는 두 개의 단독 변 수 를 나 누 어 옮 겨 다 녀 야 합 니 다.

for (var [key, value] of phoneBookMap) {
 console.log(key + "'s phone number is: " + value);
}

하지만 주의해 야 합 니 다.for-of 는 일반적인 대상 의 속성 을 옮 겨 다 니 는 것 이 아 닙 니 다.만약 우리 가 반드시 이렇게 해 야 한다 면 for-in 또는 다음 과 같은 방법 을 사용 할 수 있 습 니 다.

for (var key of Object.keys(someObject)) {
 console.log(key + ": " + someObject[key]);
}

본 논문 에서 말 한 것 이 여러분 의 ECMAScript 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.