ES6 루프 및 교체 가능 객체 예제 상세 정보

본고는 ES6의 for...of 순환.

낡은 방법

과거에는 자바스크립트를 두루 훑어볼 수 있는 두 가지 방법이 있었다.
우선 고전적인 for i 순환입니다. 수조나 인덱스가 가능하고length 속성이 있는 모든 대상을 훑어볼 수 있습니다.

for(i=0;i<things.length;i++) {
 var thing = things[i]
 /* ... */
}

그 다음은 for...in 순환, 대상을 순환하는 키/값 쌍입니다.

for(key in things) {
 if(!thing.hasOwnProperty(key)) { continue; }
 var thing = things[key]
 /* ... */
}

for ... in 순환은 일반적으로 방백으로 여겨진다. 왜냐하면 대상의 매개 가능한 속성을 순환하기 때문이다[1].이것은 원형 체인에서 부모 대상의 속성과 방법으로 분배된 속성을 포함한다.다시 말하면, 그것은 사람들이 생각하지 못할 것들을 두루 훑어보았다.for 사용...in은 일반적으로 순환 블록에 필요하지 않은 속성이 발생하지 않도록 보호 자구가 많다는 것을 의미한다.
초기의javascript는 라이브러리를 통해 이 문제를 해결했다.많은 JavaScript 라이브러리 (예: Prototype.js, jQuery, lodash 등) 에는 each나 foreach와 같은 도구 방법이나 함수가 있습니다. for i 또는 for...in 객체와 그룹을 반복합니다.
for ... of 순환은 ES6가 제3자 라이브러리를 사용하지 않고 그 중의 일부 문제를 해결하려고 시도하는 방식이다.

for … of

for ... of 순환

for(const thing of things) {
 /* ... */
}

그것은 교체 가능한 대상을 두루 훑어볼 것이다.
교체 가능한 대상은 @@iterator 방법을 정의한 대상입니다. 그리고 @@iterator 방법은 교체기 프로토콜을 실현한 대상을 되돌려주거나 이 방법은 생성기 함수입니다.
이 말에서 당신은 많은 것을 이해해야 한다.

교체 가능한 대상

@iterator 방법 (@@는 무슨 뜻입니까?)

교체기 프로토콜 (여기 프로토콜은 무슨 뜻입니까?)

등등, 교체(iterable)와 교체기(iterator)는 별개의 일입니까?

그리고 생성기 함수는 또 뭐야?

다음은 이 의문들을 하나하나 해결한다.

내장형 Iterable

우선,javascript 대상 중의 일부 내장 대상은 천연적으로 교체할 수 있다. 예를 들어 가장 쉽게 떠오르는 것은 수조 대상이다.아래 코드에서처럼 for...of 순환에서 배열 사용:

const foo = [
'apples','oranges','pears'
]

for(const thing of foo) {
 console.log(thing)
}

출력 결과는 그룹의 모든 요소입니다.
apples
oranges
pears
반복 가능한 대상을 되돌려주는 엔트리스 방법도 있습니다.이 교체 대상은 매번 순환할 때 키와 값을 되돌려줍니다.예를 들어 다음 코드:

const foo = [
'apples','oranges','pears'
]

for(const thing of foo.entries()) {
 console.log(thing)
}

다음 항목 내보내기
[ 0, 'apples' ]
[ 1, 'oranges' ]
[ 2, 'pears' ]
아래의 문법을 사용할 때, entries 방법이 더욱 유용할 것이다

const foo = [
 'apples','oranges','pears'
]

for(const [key, value] of foo.entries()) {
 console.log(key,':',value)
}

for 순환에서 두 가지 변수를 설명합니다. 하나는 그룹을 되돌리는 첫 번째 항목(값의 키나 색인), 다른 하나는 두 번째 항목(이 색인에 실제 대응하는 값)에 사용됩니다.
일반적인javascript 대상은 교체할 수 없습니다.다음 코드를 실행하면:

//  
const foo = {
 'apples':'oranges',
 'pears':'prunes'
}

for(const [key, value] of foo) {
 console.log(key,':',value)
}

실수를 하게 될 거예요.
$ node test.js
/path/to/test.js:6
for(const [key, value] of foo) {
TypeError: foo is not iterable
그러나 전역 Object 대상의 정적 entries 방법은 일반적인 대상을 매개 변수로 받아들이고 교체 가능한 대상을 되돌려줍니다.이와 같은 프로그램:

const foo = {
 'apples':'oranges',
 'pears':'prunes'
}

for(const [key, value] of Object.entries(foo)) {
 console.log(key,':',value)
}

원하는 출력을 얻을 수 있습니다.
$ node test.js
apples : oranges
pears : prunes

나만의 Iterable 만들기

만약 당신이 자신의 교체 가능한 대상을 만들고 싶다면, 더 많은 시간을 들여야 한다.너는 앞에서 말한 것을 기억할 것이다.
교체 가능한 대상은 @@iterator 방법을 정의한 대상입니다. 그리고 @@iterator 방법은 교체기 프로토콜을 실현한 대상을 되돌려주거나 이 방법은 생성기 함수입니다.
이러한 내용을 이해하는 가장 간단한 방법은 한 걸음 한 걸음 교체 가능한 대상을 만드는 것이다.우선, @iterator 방법을 실현하는 대상이 필요합니다. @@표현법은 약간 오도적이다. 우리가 진정으로 해야 할 일은 미리 정의된 Symbol이다.iterator 기호 정의 방법.
객체를 교체기 방법으로 정의하고 반복할 경우 다음을 수행합니다.

const foo = {
 [Symbol.iterator]: function() {
 }
}

for(const [key, value] of foo) {
 console.log(key, value)
}

새 오류 발생:
for(const [key, value] of foo) {
                          ^
TypeError: Result of the Symbol.iterator method is not an object
이것은 자바스크립트가 Symbol을 호출하려고 시도하고 있음을 알려 줍니다.iterator 방법이지만 호출된 결과는 대상이 아닙니다.
이 오류를 없애기 위해서는 교체기 방법으로 교체기 프로토콜을 실현한 대상을 되돌려야 한다.이것은 교체기 방법이 넥스트 키가 있는 대상을 되돌려야 한다는 것을 의미하며, 넥스트 키는 함수이다.

const foo = {
 [Symbol.iterator]: function() {
 return {
 next: function() {
 }
 }
 }
}

for(const [key, value] of foo) {
 console.log(key, value)
}

위의 코드를 실행하면 새 오류가 발생합니다.
for(const [key, value] of foo) {
                     ^
TypeError: Iterator result undefined is not an object
이번javascript는 Symbol을 호출하려고 한다고 알려 줍니다.iterator 방법, 이 대상은 하나의 대상이고next 방법을 실현했지만,next의 반환값은javascript가 예상한 대상이 아닙니다.
next 함수는 특정 형식의 대상인 value와done 두 개의 키를 되돌려야 합니다.

next: function() {
 //...
 return {
 done: false,
 value: 'next value'
 }
}

done 키는 선택할 수 있습니다.값이true (교체기가 교체되었음을 나타냄) 이면 교체가 끝났음을 나타냅니다.
done이false이거나 존재하지 않으면value 키가 필요합니다.value 키는 이 값을 순환해서 되돌려줍니다.
그래서 코드에 다른 프로그램을 넣으면 간단한 교체기가 있습니다. 이 교체기는 10개의 짝수를 되돌려줍니다.

class First20Evens {
 constructor() {
 this.currentValue = 0
 }

 [Symbol.iterator]( "Symbol.iterator") {
 return {
 next: (function() {
 this.currentValue+=2
 if(this.currentValue > 20) {
  return {done:true}
 }
 return {
  value:this.currentValue
 }
 }).bind(this)
 }
 }
}

const foo = new First20Evens;
for(const value of foo) {
 console.log(value)
}

생성기

수동으로 교체기 프로토콜을 실현하는 대상을 구축하는 것은 유일한 선택이 아니다.생성기 대상 (생성기 함수로 되돌아옴) 도 교체기 프로토콜을 실현했다.위의 예는 생성기로 구축하면 다음과 같이 보입니다.

class First20Evens {
 constructor() {
 this.currentValue = 0
 }

 [Symbol.iterator]( "Symbol.iterator") {
 return function*() {
 for(let i=1;i<=10;i++) {
 if(i % 2 === 0) {
  yield i
 }
 }
 }()
 }
}

const foo = new First20Evens;
for(const item of foo) {
 console.log(item)
}

본고는 생성기를 너무 많이 소개하지 않을 것이니 입문이 필요하다면 볼 수 있다이 문장.오늘의 중요한 수확은 우리가 자신의 Symbol을 만들 수 있다는 것이다.iterator 방법은 생성기 대상을 되돌려줍니다. 이 생성기 대상은 for...of 순환 중 정상적인 작업.'정상적인 작업'은 생성기에서next를 계속 호출할 수 있는 순환을 가리킨다. 생성기가 yield 값을 멈출 때까지.
$ node sample-program.js
이
사
육
팔
십
참고 자료
객체의 각 열거 가능 속성:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

총결산

이 ES6의 순환과 교체 가능 대상에 대한 글은 여기까지 소개합니다. 더 많은 ES6 순환과 교체 가능 대상에 대한 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!