나는 for... in루프 (키를 반복 하는 것)가 무엇인지 알고 있지만 for... of(값을 반복하는) 것에 대해 처음 들었습니다 .

for... of루프 와 혼동됩니다 . 형용사를받지 못했습니다. 이것은 아래 코드입니다.

var arr = [3, 5, 7];
arr.foo = "hello";

for (var i in arr) {
  console.log(i); // logs "0", "1", "2", "foo"
}

for (var i of arr) {
  console.log(i); // logs "3", "5", "7"
  // it is does not log "3", "5", "7", "hello"
}

내가 얻은 것은 for... of속성 값을 반복합니다. 그렇다면 왜 "3", "5", "7", "hello"대신에 로그하지 않는가 "3", "5", "7"? 하지만 for... in루프는 각 키를 반복 처리 ( "0", "1", "2", "foo"). 여기서 for... in루프는 foo키를 반복 합니다. 그러나 재산 for... of의 가치를 반복하지는 않는다 . 왜 그런가요?foo"hello"

간단히 말하면 긴 이야기 :

여기 나는 콘솔 for... of루프. 로그해야 "3", "5", "7","hello"하지만 여기에 로그 "3", "5", "7"됩니다. 왜 ?

링크 예

for in 열거 가능한 객체의 속성 이름을 반복합니다.

for of(ES6의 새로운 기능) 객체 별 반복자를 사용 합니다. 하고 그에 의해 생성 된 값을 반복합니다.

귀하의 예에서 배열 반복자 는 배열의 모든 값을 생성합니다 (인덱스가 아닌 속성 무시).

https://www.typescriptlang.org/docs/handbook/iterators-and-generators.html 에서 완전한 답변을 찾을 수 있습니다 (유형 스크립트 인 경우에도 자바 스크립트와 동일합니다)

for..of와 for..in선언문 모두 목록을 반복합니다. 반복되는 값은 다르지만 for..in반복되는 객체의 키 목록을 반환하고 반복되는 객체 for..of의 숫자 속성 값 목록을 반환합니다.

다음은 이러한 차이점을 보여주는 예입니다.

let list = [4, 5, 6];

for (let i in list) {
   console.log(i); // "0", "1", "2",
}

for (let i of list) {
   console.log(i); // "4", "5", "6"
}

또 다른 차이점은 for..in은 모든 객체에서 작동한다는 것입니다. 이 객체의 속성을 검사하는 방법으로 사용됩니다. for..of반면에, 반복 가능한 객체의 값에 주로 관심이 있습니다. implement Symbol.iterator저장된 값에 액세스 할 수있는 Map 및 Set 속성 과 같은 기본 제공 개체

let pets = new Set(["Cat", "Dog", "Hamster"]);
pets["species"] = "mammals";

for (let pet in pets) {
   console.log(pet); // "species"
}

for (let pet of pets) {
    console.log(pet); // "Cat", "Dog", "Hamster"
}

For ... in 루프

는 중 ...에서 루프 계산 로직과 종료 조건을 제거하여 for 루프의 약점에 향상시킨다.

예:

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const index in digits) {
  console.log(digits[index]);
}

그러나 여전히 인덱스를 사용하여 배열의 값에 액세스하는 문제를 해결해야합니다. 거의 이전보다 더 혼란스럽게 만듭니다.

또한 for ... in 루프는 배열 (또는 다른 객체)에 추가 메서드를 추가해야 할 때 큰 문제를 일으킬 수 있습니다. for ... in 루프는 열거 가능한 모든 속성을 반복하므로 배열의 프로토 타입에 추가 속성을 추가하면 해당 속성도 루프에 나타납니다.

Array.prototype.decimalfy = function() {
  for (let i = 0; i < this.length; i++) {
    this[i] = this[i].toFixed(2);
  }
};

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const index in digits) {
  console.log(digits[index]);
}

인쇄물:

0

1

2

삼

4

5

6

7

8

9

function () {for (let i = 0; i <this.length; i ++) {this [i] = this [i] .toFixed (2); }}

이것이 배열을 반복 할 때 for ... in 루프가 권장되지 않는 이유입니다.

참고 : forEach 루프 는 JavaScript의 다른 유형의 for 루프입니다. 그러나 forEach()실제로는 배열 방법이므로 배열에만 사용할 수 있습니다. forEach 루프를 중지하거나 중단 할 방법도 없습니다. 루프에서 이러한 유형의 동작이 필요한 경우 기본 for 루프를 사용해야합니다.

For ... of 루프

을 위한 ...의 루프 반복 가능한 데이터의 모든 타입에 걸쳐 루프를 사용한다.

예:

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const digit of digits) {
  console.log(digit);
}

인쇄물:

0

1

2

삼

4

5

6

7

8

9

이것은 for ... of 루프를 모든 for 루프 중에서 가장 간결한 버전으로 만듭니다.

그러나 더 많은 것이 있습니다! for ... of 루프에는 for 및 for ... in 루프의 약점을 수정하는 몇 가지 추가 이점이 있습니다.

언제든지 for ... of 루프를 중지하거나 중단 할 수 있습니다.

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const digit of digits) {
  if (digit % 2 === 0) {
    continue;
  }
  console.log(digit);
}

인쇄물:

1

삼

5

7

9

그리고 객체에 새로운 속성을 추가하는 것에 대해 걱정할 필요가 없습니다. for ... of 루프는 객체의 값만 반복합니다.

차이 for..in와 for..of:

두 for..in및 for..of데이터 구조를 반복하는 데 사용되는 구조를 반복하고 있습니다. 유일한 차이점은 반복하는 것입니다.

1. for..in객체의 열거 가능한 모든 속성 키 를 반복 합니다.
2. for..of반복 가능한 객체 의 값 을 반복합니다. 반복 가능한 객체의 예는 배열, 문자열 및 NodeList입니다.

예:

let arr = ['el1', 'el2', 'el3'];

arr.addedProp = 'arrProp';

// elKey are the property keys
for (let elKey in arr) {
  console.log(elKey);
}

// elValue are the property values
for (let elValue of arr) {
  console.log(elValue)
}

이 예에서 for..in루프는 객체의 키 (이 예에서는 배열 객체)를 반복 한다는 것을 알 수 있습니다 . 키는 0, 1, 2이며 추가 한 배열 요소 및에 해당 addedProp합니다. 이것은 어떻게 arr배열 객체가 크롬 DevTools로에서 찾습니다 :

당신은 우리의 것을 알 for..in루프가 단순히 이러한 값을 반복하는 것보다 더 아무것도하지 않습니다.

이 for..of예에서 루프 는 데이터 구조 의 값 을 반복합니다 . 이 특정 예의 값은 'el1', 'el2', 'el3'입니다. 반복 가능한 데이터 구조가 사용하여 리턴 할 값 for..of은 반복 가능한 오브젝트의 유형에 따라 다릅니다. 예를 들어 배열은 모든 배열 요소의 값을 반환하지만 문자열은 문자열의 모든 개별 문자를 반환합니다.

이 for...in문은 개체의 열거 가능한 속성을 임의의 순서로 반복합니다. 열거 가능한 속성은 내부 [[Enumerable]] 플래그가 true로 설정된 속성입니다. 따라서 프로토 타입 체인에 열거 가능한 속성이 있으면 for...in루프도 해당 속성을 반복합니다.

for...of문은 반복 가능 객체가 정의를 통해 반복 할 수있는 데이터를 반복 처리.

예:

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};

let iterable = [3, 5, 7];

for (let i in iterable) {
  console.log(i); // logs: 0, 1, 2, "arrCustom", "objCustom"
}

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // logs: 0, 1, 2,
  }
}

for (let i of iterable) {
  console.log(i); // logs: 3, 5, 7
}

이전과 마찬가지로 루프 추가 hasOwnProperty를 건너 뛸 수 있습니다 for...of.

for-in 문은 임의의 순서로 오브젝트의 열거 가능한 특성을 반복합니다.

루프는 객체 자체의 열거 가능한 모든 속성과 생성자의 프로토 타입에서 상속되는 속성을 반복합니다.

"for in"으로 생각하면 기본적으로 모든 키를 반복하고 나열합니다.

var str = 'abc';
var arrForOf = [];
var arrForIn = [];

for(value of str){
  arrForOf.push(value);
}

for(value in str){
  arrForIn.push(value);
}

console.log(arrForOf); 
// ["a", "b", "c"]
console.log(arrForIn); 
// ["0", "1", "2", "formatUnicorn", "truncate", "splitOnLast", "contains"]

Array, Map, String Objects와 같이 쉽게 반복 할 수 있도록 이미 정의 된 데이터 유형이 있습니다.

반복자 를 반복하는 경우 일반적 으로 아래 예제와 같이 삽입 순서에 따라 키를 제공합니다.

  const numbers = [1,2,3,4,5];
   for(let number in number) {
     console.log(number);
   }

   // result: 0, 1, 2, 3, 4

이제 of of 와 동일하게 시도 하면 키가 아닌 값을 제공합니다. 예 :

  const numbers = [1,2,3,4,5];
   for(let numbers of numbers) {
    console.log(number);
  }

  // result: 1, 2, 3, 4, 5

따라서 두 이터레이터를 살펴보면 두 이터레이터의 차이점을 쉽게 구별 할 수 있습니다.

참고 : - 의 경우 에만 Symbol.iterator와 함께 작동

따라서 일반 객체를 반복하려고하면 오류가 발생합니다.

const Room = {
   area: 1000,
   height: 7,
   floor: 2
 }

for(let prop in Room) {
 console.log(prop);
 } 

// Result area, height, floor

for(let prop of Room) {
  console.log(prop);
 } 

방은 반복 할 수 없습니다

이제 반복하기 위해 ES6 Symbol.iterator를 정의해야합니다.

  const Room= {
    area: 1000, height: 7, floor: 2,
   [Symbol.iterator]: function* (){
    yield this.area;
    yield this.height;
    yield this.floors;
  }
}


for(let prop of Room) {
  console.log(prop);
 } 

//Result 1000, 7, 2

이것은 For in 과 For of 의 차이점 입니다 . 그것이 차이를 없앨 수 있기를 바랍니다.

아무도 언급하지 않은 두 루프의 또 다른 차이점 은 다음과 같습니다.

Destructuring이 for...in되지 않습니다. for...of대신 사용하십시오 .

출처

따라서 루프에서 디스트 럭처링 을 사용하려면 각 배열 요소 의 인덱스 와 값 을 모두 얻으려면 Array 메소드 와 함께 루프 를 사용해야합니다 .for...ofentries()

for (const [idx, el] of arr.entries()) {
    console.log( idx + ': ' + el );
}

모두가이 문제가 발생하는 이유를 설명했지만 여전히 잊어 버린 다음 왜 잘못된 결과를 얻었는지 머리를 긁적입니다. 특히 결과가 언뜻보기에 좋은 것처럼 보일 때 큰 데이터 세트를 작업 할 때 특히 그렇습니다.

Object.entries당신을 사용 하면 모든 속성을 통과해야합니다.

var arr = [3, 5, 7];
arr.foo = "hello";

for ( var [key, val] of Object.entries( arr ) ) {
   console.log( val );
}

/* Result:

3
5
7
hello

*/

좋은 답변이 많이 있지만 5 센트를 넣으면 좋은 예가됩니다.

루프에서

열거 가능한 모든 소품을 반복합니다.

let nodes = document.documentElement.childNodes;

for (var key in nodes) {
  console.log( key );
}

루프

모든 반복 가능한 값을 반복

let nodes = document.documentElement.childNodes;

for (var node of nodes) {
  console.log( node.toString() );
}

처음으로 for 및 in 루프 를 배우기 시작했을 때 , 나는 출력과 혼동되었지만 몇 가지 연구와 이해를 통해 개별 루프를 다음과 같이 생각할 수 있습니다.

1. for ... in 루프 는개별 속성의 인덱스 를반환하며 속성 값 에 영향 을 미치지않으며, 값이 아닌 속성 에 대한 정보를 반복하고 반환 합니다 . 예 :

let profile = { name : "Naphtali", age : 24, favCar : "Mustang", favDrink : "Baileys" }

위의 코드는 profile 이라는 객체를 만드는 것이므로 두 예제 모두에 사용할 것이므로 예제 에서 프로필 객체 를 볼 때 혼동하지 말고 생성 된 것을 알고 있으면됩니다.

이제 for ... in 루프를 아래 에서 사용하겠습니다.

for(let myIndex in profile){
    console.log(`The index of my object property is ${myIndex}`)
}
 // Outputs : 
        The index of my object property is 0
        The index of my object property is 1
        The index of my object property is 2
        The index of my object property is 3

이제 출력 이유는 우리가 가지고있는 네 (4) 우리의 속성 프로파일 객체 및 인덱싱하는 것은 우리 모두 알고 시작 일부터 0 ... N 그래서, 우리는 속성의 인덱스 얻을 0, 1, 2, 우리가 이후를 for..in 루프 작업 .

2. for ... of loop * 는 property , value 또는 both를 반환 할 수 있습니다 . 방법을 살펴 보겠습니다. JavaScript에서는 배열 에서처럼 객체를 정상적으로 반복 할 수 없으므로 객체에서 선택한 항목에 액세스하는 데 사용할 수있는 몇 가지 요소가 있습니다.

   • Object.keys ( object-name-goes-here ) >>> 객체의 키 또는 속성 을 반환 합니다.

   • Object.values ( object-name-goes-here ) >>> 객체의 값 을 반환 합니다.

   • Object.entries ( object-name-goes-here ) >>> 객체 의 키 와 값 을 모두 반환 합니다.

아래는 사용법의 예입니다. Object.entries ()에주의하십시오 .

Step One: Convert the object to get either its key, value, or both.
Step Two: loop through.


// Getting the keys/property

   Step One: let myKeys = ***Object.keys(profile)***
   Step Two: for(let keys of myKeys){
             console.log(`The key of my object property is ${keys}`)
           }

// Getting the values of the property

    Step One: let myValues = ***Object.values(profile)***
    Step Two : for(let values of myValues){
                 console.log(`The value of my object property is ${values}`)
               }

Object.entries ()를 사용 하면 객체에서 두 개의 항목, 즉 키와 값을 호출하게 됩니다. 항목 중 하나를 사용하여 둘 다 호출 할 수 있습니다. 아래 예.

Step One: Convert the object to entries, using ***Object.entries(object-name)***
Step Two: **Destructure** the ***entries object which carries the keys and values*** 
like so **[keys, values]**, by so doing, you have access to either or both content.


    // Getting the keys/property

       Step One: let myKeysEntry = ***Object.entries(profile)***
       Step Two: for(let [keys, values] of myKeysEntry){
                 console.log(`The key of my object property is ${keys}`)
               }

    // Getting the values of the property

        Step One: let myValuesEntry = ***Object.entries(profile)***
        Step Two : for(let [keys, values] of myValuesEntry){
                     console.log(`The value of my object property is ${values}`)
                   }

    // Getting both keys and values

        Step One: let myBothEntry = ***Object.entries(profile)***
        Step Two : for(let [keys, values] of myBothEntry){
                     console.log(`The keys of my object is ${keys} and its value 
is ${values}`)
                   }

불분명 한 부품 섹션에 의견을 말하십시오.

for-in루프

for-in루프는 컬렉션의 열거 가능한 속성을 임의의 순서 로 순회하는 데 사용됩니다 . 컬렉션은 항목이 인덱스 나 키를 사용할 수있는 컨테이너 유형 객체입니다.

var myObject = {a: 1, b: 2, c: 3};
var myArray = [1, 2, 3];
var myString = "123";

console.log( myObject[ 'a' ], myArray[ 1 ], myString[ 2 ] );

for-in루프는 컬렉션 의 열거 가능한 속성 ( keys )을 한 번에 추출하여 한 번에 하나씩 반복합니다. 열거 가능한 속성은 for-in루프에 나타날 수있는 컬렉션의 속성입니다 .

기본적으로 Array 및 Object의 모든 속성은 for-in루프로 나타납니다 . 그러나 Object.defineProperty 메서드를 사용 하여 컬렉션의 속성을 수동으로 구성 할 수 있습니다 .

var myObject = {a: 1, b: 2, c: 3};
var myArray = [1, 2, 3];

Object.defineProperty( myObject, 'd', { value: 4, enumerable: false } );
Object.defineProperty( myArray, 3, { value: 4, enumerable: false } );

for( var i in myObject ){ console.log( 'myObject:i =>', i ); }
for( var i in myArray ){ console.log( 'myArray:i  =>', i ); }

위의 예 d에서myObject 과 색인 3은 과 같이 구성되어 있기 때문에 루프 에 myArray나타나지 않습니다.for-inenumerable: false .

for-in루프 에는 몇 가지 문제가 있습니다. 배열의 경우 for-in루프도 고려합니다methodsmyArray.someMethod = f 구문을 사용하여 배열에 추가 된 하지만 myArray.length여전히 남아 있습니다.4 .

그만큼 for-of루프

for-of컬렉션의 값을 반복 하는 것은 잘못된 생각 입니다.for-of루프는 Iterable객체를 반복 합니다. iterable은 Symbol.iterator프로토 타입 중 하나에 직접 이름을 가진 메소드가있는 오브젝트입니다 .

Symbol.iterator메소드는 Iterator를 리턴해야합니다 . 이터레이터는next 메소드 . 이 메소드는 return value과done properties 합니다.

우리가 반복되면 반복 가능한 사용하여 객체를 for-of루프의 Symbol.iterator방법은 한 번 얻을 호출됩니다 반복자 객체를. for-of루프가 반복 될 때마다이 next반복자 객체의 메서드 done는 next()호출에 의해 반환 될 때까지 false가 반환 될 때까지 호출됩니다. 속성이 호출에 의해 반환 된 for-of경우 모든 반복 에 대해 루프가 받은 값 입니다.valuenext()

var myObject = { a: 1, b: 2, c: 3, d: 4 };

// make `myObject` iterable by adding `Symbol.iterator` function directlty on it
myObject[ Symbol.iterator ] = function(){
  console.log( `LOG: called 'Symbol.iterator' method` );
  var _myObject = this; // `this` points to `myObject`
  
  // return an iterator object
  return {
    keys: Object.keys( _myObject ), 
    current: 0,
    next: function() {
      console.log( `LOG: called 'next' method: index ${ this.current }` );
      
      if( this.current === this.keys.length ){
        return { done: true, value: null }; // Here, `value` is ignored by `for-of` loop
      } else {
        return { done: false, value: _myObject[ this.keys[ this.current++ ] ] };
      }
    }
  };
}

// use `for-of` loop on `myObject` iterable
for( let value of myObject ) {
  console.log( 'myObject: value => ', value );
}

for-of루프는 ES6의 새로운 그래서입니다 Iterable을 하고 반복 가능 객체가 . Array생성자 유형은이 Symbol.iterator프로토 타입에 대한 방법을. Object생성자는 슬프게도을 가지고 있지 않지만 Object.keys(), Object.values()및 Object.entries()방법 (반복 가능을 반환 사용할 수있는 console.dir(obj)프로토 타입 방법을 확인 ). for-of루프 의 장점은 사용자 정의 Dog및 Animal클래스를 포함 하여 모든 객체를 반복 가능하게 만들 수 있다는 것 입니다.

객체를 반복 가능하게 만드는 쉬운 방법 은 사용자 정의 반복기 구현 대신 ES6 생성기 를 구현하는 것입니다.

달리 for-in, for-of비동기 작업이 각 반복에 완료 될 때까지 루프는 기다릴 수 있습니다. 이것은 문 문서await 뒤에 키워드를 사용하여 달성됩니다 .for

for-of루프의 또 다른 장점은 유니 코드를 지원한다는 것입니다. ES6 사양에 따르면 문자열은 UTF-16 인코딩으로 저장됩니다. 따라서 각 문자는 16-bit또는을 사용할 수 있습니다 32-bit. 전통적으로 문자열은 UCS-2 인코딩으로 저장되었으며,이 문자열은 내부 16 bits에만 저장할 수있는 문자를 지원 합니다.

따라서 문자열 String.length의 16-bit블록 수를 반환 합니다. 이모티콘 문자와 같은 최신 문자는 32 비트를 사용합니다. 따라서이 문자는 length2를 반환합니다 . for-in루프는 16-bit블록을 반복하고 잘못된를 반환합니다 index. 그러나 for-of루프는 UTF-16 사양에 따라 개별 문자를 반복합니다.

var emoji = "😊🤣";

console.log( 'emoji.length', emoji.length );

for( var index in emoji ){ console.log( 'for-in: emoji.character', emoji[index] ); }
for( var character of emoji ){ console.log( 'for-of: emoji.character', character ); }

https://javascript.info/array 에서 다음 설명이 매우 유용 하다는 것을 알았습니다 .

배열 항목을 순환하는 가장 오래된 방법 중 하나는 for 루프 오버 인덱스입니다.

let arr = ["Apple", "Orange", "Pear"];

for (let i = 0; i < arr.length; i++) { alert( arr[i] ); } But for arrays there is another form of loop, for..of:

let fruits = ["Apple", "Orange", "Plum"];

// iterates over array elements for (let fruit of fruits) { alert( fruit ); } The for..of doesn’t give access to the number of the current element, just its value, but in most cases that’s enough. And it’s shorter.

기술적으로 배열은 객체이기 때문에 다음과 같이 사용할 수도 있습니다.

let arr = ["Apple", "Orange", "Pear"];

for (let key in arr) { alert( arr[key] ); // Apple, Orange, Pear } But that’s actually a bad idea. There are potential problems with it:

for..in 루프는 숫자뿐만 아니라 모든 속성을 반복합니다.

브라우저와 다른 환경에는 배열처럼 보이는 소위 "배열과 같은"객체가 있습니다. 즉, 길이 및 색인 속성이 있지만 일반적으로 필요하지 않은 다른 숫자가 아닌 속성 및 메서드가있을 수도 있습니다. for..in 루프는 그것들을 나열합니다. 따라서 배열 형 객체로 작업해야하는 경우 이러한 "추가"속성이 문제가 될 수 있습니다.

for..in 루프는 배열이 아닌 일반 객체에 최적화되어 있으므로 10 ~ 100 배 느립니다. 물론 여전히 빠릅니다. 속도 향상은 병목 현상에서만 중요합니다. 그러나 여전히 차이점을 알고 있어야합니다.

일반적으로 배열에 for..in을 사용해서는 안됩니다.

다음은 for...in루프와 for...of루프 의 차이점을 기억하기위한 유용한 니모닉입니다 .

"색인, 대상"

for...in Loop=>에서 인덱스를 반복합니다 . 배열 합니다.

for...of Loop=> 객체의 객체를 반복 합니다.