나는 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"됩니다. 왜 ?
답변
답변
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데이터 구조를 반복하는 데 사용되는 구조를 반복하고 있습니다. 유일한 차이점은 반복하는 것입니다.
for..in객체의 열거 가능한 모든 속성 키 를 반복 합니다.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 의 차이점 입니다 . 그것이 차이를 없앨 수 있기를 바랍니다.
