포...in 및 for...of의 차이

선언:for-in 순환 대상 속성으로 조작할 때 원래는 대형의 속성을 조작한다는 뜻이었으나 실제 원형 체인에 옮겨다니는 방법으로 오류가 발생했다.이전에는 for-in 순환 대상을 대충 알고 깊이 이해하지 못했기 때문에 찾아보고 정리했습니다.

（1）for...in

개념: 객체의 Symbol을 제외한 열거 가능한 속성을 순서에 상관없이 반복합니다.
중점1: Array와 Object가 내장 구조 함수를 사용하여 만든 대상은 모두 Object에서 계승됩니다.prototype 및 String.prototype의 일일이 열거할 수 없는 속성
- 주석: 대상이나 수조 원형 체인을 설명하는 방법이나 속성은 for-in이 순환할 때 두루 옮겨다니는데 이 특성은 당신의 최초의 생각을 파괴할 수 있습니다.
포인트2: for...in은 임의의 순서로 대상을 훑어봅니다.
- 주해: for...in은 Array을 교체하는 데 사용해서는 안 된다. 그 중에서 색인 순서가 매우 중요하다. 교체의 순서는 실행 환경에 의존하기 때문에 수조가 순서대로 요소에 접근하지 않는다.따라서 액세스 순서가 중요한 그룹을 교체할 때 정수 인덱스로 for 순환을 하는 것이 좋다(또는 Array.prototype.forEach() 또는 for...of 순환을 사용한다)
중점3: 자체 속성만 교체
- 주해: 만약에 대상 자체의 속성을 고려하고 그 원형이 아니라면 getOwnPropertyNames() 또는 hasOwnProperty()을 실행하여 어떤 속성이 대상 자체의 속성인지 확인한다

저희가 먼저 예를 하나 볼게요.

예:

    Object.prototype.objPro= () =>(console.log('objPro'));

    // 

    let person = {
    name:' ',
    sex:' ',
    school:' ',
    phone:'17792063636',
  }

  for( let i in person ) {
        console.log(i);      //name,sex,school,phone,objPro
    }  


    // 
    for  ( let i in person ) {
      if  ( person.hasOwnProperty (i) ) {
        console.log(i);   // name,sex,school,phone
      }
    }

(2)for...of

개념: for...of 문장은 교체 가능한 대상(Array10Map10SetString10TypedArray,arguments 대상 등 포함)에 교체 순환을 만들고 사용자 정의 교체 갈고리를 호출하여 각기 다른 속성의 값을 집행하는 문장

저희가 예를 하나 더 볼게요.

예:

    Array.prototype.arrPro= () =>(console.log('objPro'));

    // 

    let arr =[1,2,3];

    for ( let i in arr ) {
        console.log(i);   //0,1,2,foo,arrPro,objPro
    }

   
    for( let i of arr ) {
        console.log(i);    //1,2,3
    }
 

차이점:

for...in이든 for...of이든 문장은 모두 교체된 것이다.그것들 사이의 주요 차이는 그것들의 교체 방식에 있다.for...in 문장은 임의의 순서로 대상을 교체할 수 있는 매거 속성이다.for...of 문장은 교체 가능한 대상이 교체할 데이터를 정의합니다.

    Object.prototype.objPro= () =>(console.log('objPro'));

    Array.prototype.arrPro= () =>(console.log('objPro'));

    // 

    let arr =[1,2,3];

    for ( let i in arr ) {
        console.log(i);   //0,1,2,foo,arrPro,objPro
    }

   
    for( let i of arr ) {
        console.log(i);    //1,2,3
    }
 

    // 

    let person = {
    name:' ',
    sex:' ',
    school:' ',
    phone:'17792063636',
  }

  for( let i in person ) {
        console.log(i);      //name,sex,school,phone,objPro
    }  


    // 

    for  ( let i in person ) {
      if  ( person.hasOwnProperty (i) ) {
        console.log(i);   // name,sex,school,phone
      }
    }
// objPro ， Array arrPro

요약:

(1): for in은 스트리밍 키 이름이고, for of는 스트리밍 키 값입니다.

(2): 대상 속성을 순환할 때 for를 추천합니다...in, 그룹을 옮겨다닐 때 for 사용하기...of

(3): 자신의 속성만 교체할 때hasOwnProperty() 사용 가능