JavaScript 클래스 배열 및 반복 가능한 객체의 구현 원리에 대한 자세한 설명

[관련 권장 사항: JavaScript 비디오 튜토리얼, 웹 프런트 엔드]

반복 가능한 객체

특별한 객체이며 일반 객체와의 차이점은 요소의 순차적 액세스 및 저장에만 있는 것이 아닙니다. 또 다른 중요한 차이점은 배열이 반복 가능하다는 것입니다. 즉, for ... of 문을 사용하여 모든 요소에 액세스(반복)할 수 있다는 것입니다.

간단히 작은 실험을 해볼 수 있습니다:

let arr = [1,2,3,4,5]for(let val of arr){
    console.log(val)}

코드 실행 결과:

위의 코드는 단순히 배열의 반복 기능을 사용합니다. 배열 요소에 액세스할 때 요소의 첨자를 사용할 필요가 없습니다.

일반 객체에 for ... of 문을 사용하면 어떻게 되나요?

obj = {라고 놔두세요
    이름:'샤오밍',
    age:12,}for(let para of obj){ //코드에서 오류가 보고됩니다. console.log(para)}

실행 효과는 다음과 같습니다.

이는 일반 객체와 배열 사이에 반복 가능한 간격이 있음을 증명합니다. 반복 함수를 사용하여 객체를 iterable 객체라고 부릅니다.

Symbol.iterator

객체를 반복 가능하게 하려면 객체에 Symbol.iterator 라는 메서드를 추가해야 합니다(객체를 반복 가능하게 만드는 내장 Symbol ).

메서드 함수에는 다음이 포함됩니다.

1. for ... of 루프를 사용하여 개체를 반복하는 경우 Symbol.iterator 메서드가 호출되며 이 메서드는 반복자 ( next() 메서드가 있는 개체)를 반환해야 합니다.
2. for ... of 반복자를 얻은 후 다음 요소를 얻기 위해 반복자의 next() 메서드를 계속 호출합니다.
3. next() 메서드에서 반환된 콘텐츠는 {done:Boolean,value:any} 형식을 준수해야 합니다. done:true 이면 루프가 종료되고, 그렇지 않으면 value 다음 값입니다.

Iterator: Iterator

는 C++ 등의 언어에서 차용한 개념으로, 포인터와 같은 원리로 데이터 컬렉션의 요소를 가리키거나 이동할 수 있습니다. 다른 요소를 얻으려면. 반복자는 배열의 첨자를 확장하는 것과 유사합니다. 연결된 목록( List ), 집합( Set ) 및 맵( Map )과 같은 다양한 데이터 구조에는 해당 반복자가 있습니다.

JS 의 반복자는 이 작업을 위해 특별히 설계되었습니다. 매번 얻은 반복자는 항상 처음에 첫 번째 요소를 가리키며, 반복자는 데이터 세트의 마지막 요소를 얻을 때까지 next() 동작만 합니다. 반복자의 위치를 ​​유연하게 이동할 수 없으므로 반복자의 작업은 특정 순서로 데이터 세트의 요소를 순회하는 것입니다 .

반복 가능한 객체 구현:

let obj = {
    보낸 사람:1,
    to:5,}obj[Symbol.iterator] = 함수(){
    //반복자를 반환합니다. return {
        현재:this.from,
        마지막:this.to,
        다음(){
            if(this.current<this.last){
                {완료:false,값:this.current++}를 반환합니다.
            }또 다른{
                return {done:true}//반복 종료}
        }
    }}for(obj의 파라를 보자){
    console.log(para)}

코드 실행 효과:

위의 객체는 반복될 수 있지만 반복에 사용되는 자료는 객체가 아니라 Symbol.iterator 에 의해 반환된 반복자(객체이기도 함)입니다.

객체 자체를 반복자로 구성하기

위의 코드는 반복자 객체를 반환하는 내장 함수 Symbol.iterator() 구성합니다. 반복자를 구현하는 다른 방법을 사용할 수도 있습니다: 객체 자체를 반복자로 만듭니다:

let obj = {
    보낸 사람:1,
    ~:5,
    [Symbol.iterator](){
        this.current = this.from;
        return this;//객체 자체를 반환},
    next(){//객체에 다음 메소드를 추가합니다. if(this.current<this.to){
            {완료:false,값:this.current++}를 반환합니다.
        }또 다른{
            {완료:true}를 반환합니다.
        }
    }}for(obj의 파라를 보자){
    console.log(para)}

코드 실행 효과는 위 그림과 같습니다.

이렇게 하면 코드가 더 간결해지지만 새로운 반복 가능한 객체가 생성되지 않기 때문에 두 개의 for ... of 루프를 실행하여 동일한 객체를 동시에 반복할 수는 없지만 동일한 객체에 대해 두 개의 병렬 반복이 수행되는 것은 매우 쉽습니다. 희귀한.

반복 가능한 객체의 개념을 요약하면,

소위 반복 가능한 객체는 일반 객체보다 Symbol.iterator 라는 메서드가 하나 더 있는 일반 객체입니다.

또는 Symbol.iterator 와 next 메서드가 있는 객체도 반복 가능한 객체입니다.

문자열도 반복 가능합니다.

for...of 문을 사용하여 배열의 문자 요소를 쉽게 반복할 수 있습니다.

let str = '123'for(let c of str){
    console.log(c)}

이는 서로게이트 쌍( UTF-16 확장 문자)에도 유효합니다:

let str = '...'for(let c of str){
    console.log(c)}

실행 효과는 다음과 같습니다.

문자열 반복자

는 반복자를 사용할 수 있는 for...of 문일 뿐만 아니라 명시적으로 반복자를 호출할 수도 있습니다:

let str = '12345'let itr = str[Symbol.iterator]()while(true){
    결과 = itr.next()
    if(결과.완료)break;
    console.log(result.value)}

코드 실행 효과:

위의 코드는 문자열의 문자를 순회하는 작업을 수행합니다. 반복 가능한 객체가 더 이상 그렇게 신비스럽지 않다고 생각하지 마세요!

유사 배열 객체와 반복 가능 객체

배열 유사 객체와 반복 가능 객체는 순회 함수 측면에서 매우 유사합니다. 둘 다 내부 요소에 편리하게 액세스할 수 있지만 둘 사이에는 여전히 분명한 차이점이 있습니다.

1. iterable 반복 가능 객체: Symbol.iterator 구현하는 객체 ;
2. array-like 배열형 객체: 숫자형 인덱스와 length 속성을 가집니다.

문자열은 배열형 객체임에도 불구하고 반복 가능한 객체입니다.

반복 가능하고 유사 배열 객체는 일반적으로 배열이 아닙니다. 반복 가능하거나 배열 유사 객체를 배열로 변환하려면 Array.from 메서드를 사용해야 합니다.

Array.from

Array.from 사용하여 문자열을 배열로 변환합니다:

let str = '123' let arr = Array.from(str)console.log(arr)

코드 실행 효과는 다음과 같습니다.

사용자 정의 배열형 객체를 배열로 변환:

let obj = {
    0:'0',
    1:'1',
    2:'2',
    length:3}let arr = Array.from(obj)console.log(arr)

코드 실행 결과:

Array.from 의 전체 구문:

Array.from(obj[, mapFunc, thisArg])

mapFunc 메서드는 배열을 생성하기 전에 반복 가능하거나 배열과 유사한 요소마다 호출됩니다. mapFunc 멤버 메서드인 경우 thisArg 사용할 수 있습니다. this 포인터를 제공합니다.

예:

let str = '12345'let arr = Array.from(str,itm=>+itm)console.log(arr)

코드 실행 결과:

여기서는 매핑 함수를 사용하여 생성해야 하는 문자 배열을 숫자 배열로 변환합니다.

요약

1. for...of 구문을 사용할 수 있는 객체를 반복
2. 가능 Symbol.iterator
라고 합니다.
3. Symbol.iterator 메서드는 반복자
4. 가 포함된 next 메서드를
반환합니다.
5. , 이 메서드는 다음 요소의 값을 반환합니다.
6. next 메서드의 반환 값은 {done:Boolean,value:nextVal} 형식을 충족해야 합니다. done:true 에서는

7. Array.from 이 클래스 배열을 변환할 수 있습니다

.

8. ;

[관련 권장 사항: JavaScript 비디오 자습서, 웹 프런트 엔드]

위는 JavaScript 클래스 배열 및 반복 가능한 개체의 구현 원리에 대한 자세한 설명입니다. 소스 코드 네트워크!