어레이 반복에 "for...in"을 사용하는 것이 좋지 않은 이유는 무엇입니까?

sourcecode

어레이 반복에 "for...in"을 사용하는 것이 좋지 않은 이유는 무엇입니까?

copyscript 2022. 11. 7. 22:40

어레이 반복에 "for...in"을 사용하는 것이 좋지 않은 이유는 무엇입니까?

for...in자바스크립트왜왜????

그 이유는 다음과 같은 구성입니다.

var a = []; // Create a new empty array.
a[5] = 5;   // Perfectly legal JavaScript that resizes the array.

for (var i = 0; i < a.length; i++) {
    // Iterate over numeric indexes from 0 to 5, as everyone expects.
    console.log(a[i]);
}

/* Will display:
   undefined
   undefined
   undefined
   undefined
   undefined
   5
*/

다른 것과 완전히 다를 수 있습니다.

var a = [];
a[5] = 5;
for (var x in a) {
    // Shows only the explicitly set index of "5", and ignores 0-4
    console.log(x);
}

/* Will display:
   5
*/

또한 JavaScript 라이브러리는 다음과 같은 작업을 수행할 수 있으며, 사용자가 작성하는 모든 배열에 영향을 미칩니다.

// Somewhere deep in your JavaScript library...
Array.prototype.foo = 1;

// Now you have no idea what the below code will do.
var a = [1, 2, 3, 4, 5];
for (var x in a){
    // Now foo is a part of EVERY array and 
    // will show up here as a value of 'x'.
    console.log(x);
}

/* Will display:
   0
   1
   2
   3
   4
   foo
*/

for-in스테이트먼트 자체는 "나쁜 관행"은 아니지만 어레이나 어레이와 같은 오브젝트에 대해 반복할 때 잘못 사용될 수 있습니다.

「for-in스테이트먼트는 오브젝트 속성 위에 열거하는 것입니다.이 문은 프로토타입 체인으로 올라가 상속된 속성(때로는 바람직하지 않은 속성)을 열거합니다.

또한 반복 순서는 사양에 의해 보장되지 않습니다.즉, 어레이 개체를 "반복"할 경우 속성(어레이 인덱스)이 숫자 순서로 표시되는지 확인할 수 없습니다.

예를 들어 JScript(IE <= 8)에서는 Array 객체의 열거 순서가 속성이 생성된 대로 정의됩니다.

var array = [];
array[2] = 'c';
array[1] = 'b';
array[0] = 'a';

for (var p in array) {
  //... p will be "2", "1" and "0" on IE
}

된 속성에 '상속성'을 Array.prototypeMuTools(무도구)를 사용합니다.

Array.prototype.last = function () { return this[this.length-1]; };

for (var p in []) { // an empty array
  // last will be enumerated
}

어레이나 어레이와 같은 오브젝트 상에서 반복하기 위해서는 플레인 올드 등의 시퀀셜루프를 사용하는 것이 가장 좋습니다.for/whileloopsyslog.syslog..syslog.

개체의 자체 속성(상속되지 않은 속성)만 열거하는 경우hasOwnProperty★★★★

for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    // prop is not inherited
  }
}

은 이 도 합니다.Object.prototype(을) 해도 hasOwnProperty★★★★

for (var prop in obj) {
  if (Object.prototype.hasOwnProperty.call(obj, prop)) {
    // prop is not inherited
  }
}

세 중 하나는 '안 쓰는 게 고 하면 안 이유는 세 가지입니다.for..in"CHANGE: "CHANGE:

for..in 및 된 속성을 속성은 오브젝트가 아닙니다.DontEnum, 어레이 오브젝트에 , 즉, IArray.prototype스크립트와 잘 되는) 이러한 됩니다. (체크)를 통해 할 수 .상속되는 속성은 체크함으로써 제외할 수 있습니다.hasOwnProperty()에 설정된 이 되지 않습니다.
for..in되지 않습니다.
어레이 객체와 해당 프로토타입 체인의 모든 속성을 이동해야 하고 속성 이름만 표시되므로 속도가 느립니다. 즉, 값을 얻으려면 추가 검색이 필요합니다.

왜냐하면...의 경우 배열 자체가 아니라 배열을 유지하는 개체를 통해 열거하기 때문입니다.어레이 프로토타입 체인에 기능을 추가하면 그 기능도 포함됩니다.예.

Array.prototype.myOwnFunction = function() { alert(this); }
a = new Array();
a[0] = 'foo';
a[1] = 'bar';
for(x in a){
 document.write(x + ' = ' + a[x]);
}

이것은 다음과 같이 쓰여집니다.

0 = foo1 = 바myOwnFunction = function() { alert(this), }

또한 프로토타입 체인에 아무것도 추가되지 않을지 확신할 수 없으므로 for 루프를 사용하여 어레이를 열거하면 됩니다.

for(i=0,x=a.length;i<x;i++){
 document.write(i + ' = ' + a[i]);
}

이것은 다음과 같이 쓰여집니다.

0 = foo1 = 바

2016년 (ES6) 사용 for…of존 슬레거스가 이미 알아차렸듯이, 배열 반복을 위해.

보다 알기 쉽게 하기 위해 간단한 데모 코드를 추가하고 싶습니다.

Array.prototype.foo = 1;
var arr = [];
arr[5] = "xyz";

console.log("for...of:");
var count = 0;
for (var item of arr) {
    console.log(count + ":", item);
    count++;
    }

console.log("for...in:");
count = 0;
for (var item in arr) {
    console.log(count + ":", item);
    count++;
    }

콘솔에는 다음이 표시됩니다.

for...of:

0: undefined
1: undefined
2: undefined
3: undefined
4: undefined
5: xyz

for...in:

0: 5
1: foo

즉, 다음과 같습니다.

for...of0 ~되며 0 ~5는 됩니다.Array.prototype.foo. 배열 값이 표시됩니다.
for...in, 「일부러」의만을 나타냅니다.5되어 있지 어레이인덱스는 하지만, 「」를 추가합니다foo. 어레이 속성 이름이 표시됩니다.

간단한 답변:그럴 가치도 없어요.

더 긴 답변:순차적인 요소 순서와 최적의 성능이 필요하지 않더라도 그럴 가치가 없습니다.

장황한 답변:그건 그럴 가치가 없어

「」를 사용합니다.for (var property in array)이 되다array개체로 반복되어 개체 프로토타입 체인을 통과하고 궁극적으로 인덱스 기반보다 느리게 수행됨forloopsyslog.syslog..syslog.
for (... in ...)는 오브젝트 속성을 순서대로 반환하는 것을 보증하지 않습니다.
「」를 사용합니다.hasOwnProperty() ★★★★★★★★★★★★★★★★★」!isNaN()오브젝트 속성을 필터링하는 체크는 퍼포먼스가 더 느려지는 추가 오버헤드이며, 즉 포맷이 더 간결하기 때문에 애초에 오브젝트를 사용하는 주요 이유를 부정합니다.

이러한 이유로 성능과 편의성 간의 적절한 균형은 존재하지 않습니다.어레이를 개체로 처리하여 어레이의 개체 속성에 대한 작업을 수행하는 것이 목적이 아니라면 이점이 없습니다.

수용하다포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, , 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포인, 포length,toString을 참조해 주십시오.)

단, 코드(또는 사용 중인 프레임워크)가 어레이 또는 어레이 프로토타입에 커스텀 속성을 추가하면 이러한 속성이 반복에 포함되며 이는 원하는 속성이 아닐 수 있습니다.

프로토타입과 같은 일부 JS 프레임워크는 어레이 프로토타입을 수정합니다.JQuery와 같은 다른 프레임워크에서는 지원되지 않으므로 JQuery를 사용하면 for-in을 안전하게 사용할 수 있습니다.

의심스럽다면 for-in을 사용하지 않는 것이 좋습니다.

어레이를 통해 반복하는 다른 방법은 for-loop을 사용하는 것입니다.

for (var ix=0;ix<arr.length;ix++) alert(ix);

그러나, 이것은 다른 문제가 있습니다.JavaScript를 사용합니다.「」를 정의하는 arr같이요.

var arr = ["hello"];
arr[100] = "goodbye";

그러면 배열에는 두 개의 항목이 있지만 길이는 101입니다.을 사용하면 인덱스가 인덱스가 은 for-in 2의 입니다.for-loop 101의 값입니다.99달러undefined.

루프가 오브젝트의 속성 이름을 반복하기 때문에 변수가 문자열이기 때문에 카운터 변수를 사용하여 계산을 수행할 필요가 있는 경우에는 다른 답변에 제시된 이유와 더불어 "for...in" 구조를 사용하지 않는 것이 좋습니다.

예를들면,

for (var i=0; i<a.length; i++) {
    document.write(i + ', ' + typeof i + ', ' + i+1);
}

쓸 것이다

0, number, 1
1, number, 2
...

반면에.

for (var ii in a) {
    document.write(i + ', ' + typeof i + ', ' + i+1);
}

쓸 것이다

0, string, 01
1, string, 11
...

물론, 이것은 다음을 포함하면 쉽게 극복할 수 있습니다.

ii = parseInt(ii);

하지만 첫 번째 구조는 더 직접적입니다.

forin열거 가능한 모든 속성('모든 어레이 요소'와 동일하지 않음)에 대한 루프: http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf, 섹션 12.6.4(5판) 또는 13.7.5.15(7판)를 참조하십시오.

속성을 열거하는 메커니즘과 순서가 지정되지 않았습니다...

(내 것을 강조합니다.)

즉, 브라우저가 원하는 경우 삽입된 순서대로 속성을 검색할 수 있습니다.아니면 숫자 순서대로.또는 사전 순서(여기서 "30"은 "4" 앞에 와야 합니다! 모든 객체 키와 모든 어레이 인덱스는 실제로 문자열이므로 이 모든 것이 타당합니다.)개체를 해시 테이블로 구현한 경우 버킷을 통해 통과할 수 있습니다.또는 그 중 하나를 가져와서 "뒤로"를 추가합니다.브라우저는 각 속성을 정확히 한 번만 방문하면 랜덤으로 반복되어 ECMA-262에 준거할 수 있습니다.

실제로 대부분의 브라우저는 현재 거의 동일한 순서로 반복하는 것을 좋아합니다.하지만 꼭 해야 한다는 말은 없어요.이는 구현에 따라 다르며, 다른 방법이 훨씬 더 효율적인 것으로 판명되면 언제든지 변경될 수 있습니다.

쪽이든, '어느 쪽이든'은forin질서의 함축은 없습니다.는, 그 해, 의 「순서」, 「순서」를 해 주세요.for인덱스로 루프합니다.

주로 두 가지 이유:

하나.

다른 사용자가 말한 것처럼 어레이에 없거나 프로토타입에서 상속된 키를 얻을 수 있습니다.예를 들어 라이브러리가 어레이 또는 객체 프로토타입에 속성을 추가한 경우:

Array.prototype.someProperty = true

모든 어레이의 일부로 제공됩니다.

for(var item in [1,2,3]){
  console.log(item) // will log 1,2,3 but also "someProperty"
}

이 문제는 hasOwnProperty 메서드로 해결할 수 있습니다.

var ary = [1,2,3];
for(var item in ary){
   if(ary.hasOwnProperty(item)){
      console.log(item) // will log only 1,2,3
   }
}

단, 이것은 for-in 루프가 있는 모든 오브젝트에 대해 반복하는 경우에 해당됩니다.

두명

일반적으로 어레이 내 항목의 순서가 중요하지만 for-in 루프는 어레이가 어레이가 아닌 개체로 처리되기 때문에 올바른 순서로 반복되지 않습니다.이것은 사소한 것처럼 보이지만, 실제로 응용 프로그램을 망칠 수 있고 디버깅하기 어렵습니다.

저는 별로 추가할 것이 없다고 생각합니다.사용 이유에 대한 Triptich의 답변 또는 CMS의 답변for...in경우에 따라서는 피해야 합니다.

하지만, 나는 현대 브라우저에 대한 대안이 있다는 것을 추가하고 싶다.for...in할 수 문장이에요.for...in사용할 수 없습니다.그 대안은 다음과 같습니다.

for (var item of items) {
    console.log(item);
}

주의:

은 Internet Explorer를 하지 않습니다.for...of(Edge 12+는 유효합니다).클라이언트측 실가동 코드로 사용할 수 있을 때까지 조금 더 기다려야 합니다.단, 서버측 JS 코드에서 사용하는 것은 안전합니다(Node.js를 사용하는 경우).

인덱스가 아닌 개체 필드를 통해 열거되기 때문입니다."길이" 인덱스를 사용하여 값을 얻을 수 있지만, 이 값을 원하는지는 의문입니다.

for ... in ...이것은 프로그래머가 언어를 잘 이해하지 못할 때만 문제가 됩니다.이것은 버그나 다른 것이 아닙니다.오브젝트의 모든 멤버(모두 열거할 수 있는 멤버입니다만, 현시점에서는 그것이 상세입니다)에 걸쳐 반복된다는 것입니다.배열의 인덱스 속성만 반복하는 경우 의미적으로 일관성을 유지하는 유일한 방법은 정수 인덱스를 사용하는 것입니다.for (var i = 0; i < array.length; ++i)★★★★★★★★★★★★★★★★」

임의의 오브젝트는 임의의 속성을 관련지을 수 있습니다.특히 어레이 인스턴스에 추가 속성을 로드하는 것은 나쁘지 않습니다.따라서 인덱스된 배열과 유사한 속성만 보려는 코드는 정수 인덱스를 고수해야 합니다.무엇을 충분히 인식하고 있는 코드for ... in그리고 정말로 모든 자산을 볼 필요가 있습니다.그것도 괜찮습니다.

TL&DR: 사용방법for in어레이의 루프가 나쁜 것은 아닙니다.사실 그 반대입니다.

에는 ★★★★★★★★★★★★★★★★★★★★★.for inloop은 어레이에서 올바르게 사용되는 경우 JS의 보석입니다.소프트웨어를 완전히 제어하고 자신이 무엇을 하고 있는지 알아야 합니다.여기 언급된 단점들을 하나씩 살펴보고 반증해 봅시다.

상속된 속성도 루프합니다.우선, 에 대한 모든 확장Array.prototype를 사용하여 실행했어야 합니다.enumerable는 스음음음음음음음음음음음음음음음 to to to to to 로 설정해야 .false 하지 않는 사용하지 . 그렇지 않은 라이브러리는 전혀 사용하지 마십시오.
상속 체인에 추가한 속성은 나중에 계산됩니다.어레이 서브클래싱을 실행하는 경우Object.setPrototypeOfextend 한 번 .을 하세요.Object.defineProperty()로는 「」가 되어 있습니다.writable,enumerable ★★★★★★★★★★★★★★★★★」configurable 를 " " 로false어레이 서브클래싱의 예를 다음에 나타냅니다.

function Stack(...a){
  var stack = new Array(...a);
  Object.setPrototypeOf(stack, Stack.prototype);
  return stack;
}
Stack.prototype = Object.create(Array.prototype);                                 // now stack has full access to array methods.
Object.defineProperty(Stack.prototype,"constructor",{value:Stack});               // now Stack is a proper constructor
Object.defineProperty(Stack.prototype,"peak",{value: function(){                  // add Stack "only" methods to the Stack.prototype.
                                                       return this[this.length-1];
                                                     }
                                             });
var s = new Stack(1,2,3,4,1);
console.log(s.peak());
s[s.length] = 7;
console.log("length:",s.length);
s.push(42);
console.log(JSON.stringify(s));
console.log("length:",s.length);

for(var i in s) console.log(s[i]);

★★★★★★★★★★★★★·for in코드를 신경 썼기 때문에 이제 루프가 안전합니다.

루프가 느리다.절대.시간이 필요한 스파스 어레이를 루프하는 경우 이 방법이 가장 빠른 반복 방법입니다.이것은 알아야 할 가장 중요한 퍼포먼스 요령 중 하나입니다.예를 들어보자.희박한 어레이를 루프합니다.

var a = [];
a[0] = "zero";
a[10000000] = "ten million";
console.time("for loop on array a:");
for(var i=0; i < a.length; i++) a[i] && console.log(a[i]);
console.timeEnd("for loop on array a:");
console.time("for in loop on array a:");
for(var i in a) a[i] && console.log(a[i]);
console.timeEnd("for in loop on array a:");

의미론상 , , 방법, 방법, 방법, 방법, 방법, 방법, 방법, 방법.for, in는 어레이(즉, 다른 JavaScript 객체와 동일)를 다른 일반적인 언어와 정렬하지 않습니다.

// C#
char[] a = new char[] {'A', 'B', 'C'};
foreach (char x in a) System.Console.Write(x); //Output: "ABC"

// Java
char[] a = {'A', 'B', 'C'};
for (char x : a) System.out.print(x);          //Output: "ABC"

// PHP
$a = array('A', 'B', 'C');
foreach ($a as $x) echo $x;                    //Output: "ABC"

// JavaScript
var a = ['A', 'B', 'C'];
for (var x in a) document.write(x);            //Output: "012"

이것이 (보통) 나쁜 관행인 이유는 다음과 같습니다.

for...in루프는 자신의 모든 열거 가능한 속성과 프로토타입의 열거 가능한 속성에 대해 반복됩니다.일반적으로 어레이 반복에서는 어레이 자체에 대해서만 반복하는 것이 좋습니다.어레이에 아무것도 추가하지 않아도 라이브러리나 프레임워크에 의해 추가될 수 있습니다.

예:

Array.prototype.hithere = 'hithere';

var array = [1, 2, 3];
for (let el in array){
    // the hithere property will also be iterated over
    console.log(el);
}

for...in루프는 특정 반복 순서를 보장하지 않습니다.요즘 대부분의 현대 브라우저에서는 순서가 많이 나오지만 100% 보장은 되지 않습니다.
for...in ignore " " 를 무시합니다.undefined어레이 요소, 즉 아직 할당되지 않은 어레이 요소.

예:

const arr = []; 
arr[3] = 'foo';   // resize the array to 4
arr[4] = undefined; // add another element with value undefined to it

// iterate over the array, a for loop does show the undefined elements
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

console.log('\n');

// for in does ignore the undefined elements
for (let el in arr) {
    console.log(arr[el]);
}

다른 문제들과 더불어, "for..in" 구문은 인덱스가 정수가 아닌 문자열이기 때문에 느릴 수 있습니다.

var a = ["a"]
for (var i in a)
    alert(typeof i)  // 'string'
for (var i = 0; i < a.length; i++)
    alert(typeof i)  // 'number'

중요한 측면은 이다.for...in 열거 속성 속성이 true로 설정된 개체에 포함된 속성만 반복합니다.그래서 만약 어떤 물체를 반복하려고 한다면for...in열거형 속성 속성이 false일 경우 임의 속성이 누락될 수 있습니다.특정 요소가 열거되지 않도록 일반 배열 개체의 열거 가능한 속성 속성을 변경할 수 있습니다.일반적으로 속성 속성은 객체 내의 함수 속성에 적용되는 경향이 있습니다.

속성의 열거 가능한 속성 속성 값은 다음을 통해 확인할 수 있습니다.

myobject.propertyIsEnumerable('myproperty')

또는 네 가지 속성 속성을 모두 얻으려면:

Object.getOwnPropertyDescriptor(myobject,'myproperty')

이것은 ECMAScript 5에서 사용할 수 있는 기능입니다.이전 버전에서는 열거 가능한 속성 속성 값을 변경할 수 없었습니다(항상 true로 설정되어 있었습니다).

for/in는 해시 테이블(어소시에이션 배열)과 어레이(비어소시에이션)의 2종류의 변수와 함께 동작합니다.

자바스크립트이 없는 를 사용할 수 .for (var i=0; i<=arrayLen; i++)자동 삭제 반복을 건너뜁니다.

제가 때는 '아까', '아까', '아까', '아까', '아까', '아까', '아까'를 쓰는 게 좋을 것 같아요.for/in자동 검출에 필요한 프로세스는 매우 작습니다.

이에 대한 진짜 대답은 브라우저가 JavaScript 코드를 어떻게 파싱/해석하느냐에 따라 달라집니다.브라우저 간에 변경될 수 있습니다.

수 .for/in;

//Non-associative
var arr = ['a', 'b', 'c'];
for (var i in arr)
   alert(arr[i]);

//Associative
var arr = {
   item1 : 'a',
   item2 : 'b',
   item3 : 'c'
};

for (var i in arr)
   alert(arr[i]);

왜냐하면 조심하지 않으면 원형 체인의 물체에 속하는 특성들을 반복할 것이기 때문입니다.

하시면 됩니다.for.. inhasOwnProperty를 사용하여 각 속성을 확인합니다.

반드시 나쁘다고는 할 수 없지만 어레이의 경우 뭔가 추가된 경우Array.prototype★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★:

var arr = ['a','b','c'];
for (var key in arr) { ... }

「」라고 하는 .helpfulUtilityMethod 추가되었습니다.Array의 »prototypekey0,1,2 , , , , 입니다.helpfulUtilityMethod 정수만 예상했다면, 헉.

하다를 돼요.for(var x in y)오브젝트(위에서 설명한 바와 같이)가 아닌 속성 목록에서만 사용할 수 있습니다.

「」의 for...in어레이의 루프는 잘못된 것이 아닙니다만, 왜 누군가가 다음과 같이 말했는지는 짐작할 수 있습니다.

구문이 메서드가 합니다.1 ) Each'라고 Array.prototype.forEach(function(element, index, array) {} );

에는 항상 2) 어레이에는 길이가 .for...in ★★★★★★★★★★★★★★★★★」forEach.'undefined'이치노따라서 값을 하나만 할당하면 이러한 루프는 함수를 한 번만 실행하지만 배열은 열거되므로 정의된 값이 있는 가장 높은 인덱스까지의 길이가 항상 지정되지만 이러한 루프를 사용할 경우 해당 길이가 인식되지 않을 수 있습니다.

3) 루프 규격은 파라미터에서 정의한 횟수만큼 함수를 실행하며 배열에 번호가 매겨지기 때문에 함수를 실행하는 횟수를 정의하는 것이 더 합리적입니다.다른 루프와 달리 for 루프는 값이 정의되어 있는지 여부에 관계없이 배열 내의 모든 인덱스에 대해 함수를 실행할 수 있습니다.

기본적으로 모든 루프를 사용할 수 있지만 어떻게 작동하는지 정확히 기억해야 합니다.서로 다른 루프가 반복하는 조건과 각각의 개별 기능을 이해하고 서로 다른 시나리오에 어느 정도 적합하다는 것을 인식한다.

이 경우, 보다, 보다, 보다, 보다, 보다, 보다, 보다, 보다, 보다, 보다, 보다, 보다, 보다, 보다, 보다, 보다, 보다, 보다, 보다, 보다, 보다, , 보다, 보다, 보다, 보다, , 보다, 보다, 보다, 보다, 보다, 보다, 보다, 보다, 보다, 보다, 보다, 보다, , 보다, 보다, 보다, 보다, 보다, , 보다, 보다, 보다, 보다, 보다, 보다forEach 나은 for...in일반적으로 루프는 쓰기 쉽고 기능이 향상되기 때문에 이 메서드와 표준만을 사용하는 습관을 들이는 것이 좋습니다.

처음 두 루프는 console.log 문을 한 번만 실행하는 반면 루프 표준은 지정된 횟수만큼 함수를 실행합니다(이 경우 array.length = 6).

var arr = [];
arr[5] = 'F';

for (var index in arr) {
console.log(index);
console.log(arr[index]);
console.log(arr)
}
// 5
// 'F'
// => (6) [undefined x 5, 6]

arr.forEach(function(element, index, arr) {
console.log(index);
console.log(element);
console.log(arr);
});
// 5
// 'F'
// => Array (6) [undefined x 5, 6]

for (var index = 0; index < arr.length; index++) {
console.log(index);
console.log(arr[index]);
console.log(arr);
};
// 0
// undefined
// => Array (6) [undefined x 5, 6]

// 1
// undefined
// => Array (6) [undefined x 5, 6]

// 2
// undefined
// => Array (6) [undefined x 5, 6]

// 3
// undefined
// => Array (6) [undefined x 5, 6]

// 4
// undefined
// => Array (6) [undefined x 5, 6]

// 5
// 'F'
// => Array (6) [undefined x 5, 6]

for...in 루프는 항상 키를 열거합니다.오브젝트 속성 키는 항상 String이며 배열의 인덱스 속성도 마찬가지입니다.

var myArray = ['a', 'b', 'c', 'd'];
var total = 0
for (elem in myArray) {
  total += elem
}
console.log(total); // 00123

for...in은 JavaScript에서 오브젝트를 조작할 때 유용하지만 어레이에서는 사용할 수 없지만 잘못된 방법이라고 말할 수는 없습니다.이 예에서는 for...in loop을 사용하고 있습니다.

let txt = "";
const person = {fname:"Alireza", lname:"Dezfoolian", age:35}; 
for (const x in person) {
    txt += person[x] + " ";
}
console.log(txt); //Alireza Dezfoolian 35

자, 이제 어레이를 사용해 보겠습니다.

let txt = "";
const person = ["Alireza", "Dezfoolian", 35]; 
for (const x in person) {
   txt += person[x] + " ";
}
console.log(txt); //Alireza Dezfoolian 35

같은 결과를 볼 수 있듯이...

하지만 뭔가 해보죠. Array의 프로토타입을...

Array.prototype.someoneelse = "someoneelse";

이제 새로운 Array()를 만듭니다.

let txt = "";
const arr = new Array();
arr[0] = 'Alireza';
arr[1] = 'Dezfoolian';
arr[2] = 35;
for(x in arr) {
 txt += arr[x] + " ";
}
console.log(txt); //Alireza Dezfoolian 35 someoneelse

누군가 엘스가 보여!!!이 경우 새로운 어레이 오브젝트를 루프합니다.

그게 바로 우리가 사용해야 하는 이유 중 하나야조심스럽지만 항상 그런 건 아니에요

JavaScript 요소는 표준 객체 속성으로 저장되므로 for...in 루프를 사용하여 JavaScript 배열을 통해 반복하는 것은 권장되지 않습니다. 일반 요소 및 모든 열거 가능한 속성이 나열됩니다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Indexed_collections 에서

되어 있지 덧붙입니다.★★★★★★★★★★…을 절대로 사용하지 말아야 할 매우 좋은 이유가 있다고 덧붙이고 싶다.NodeList(에서 수 것과 querySelectorAll콜은 반환된 요소가 전혀 표시되지 않기 때문에 NodeList 속성에서만 반복됩니다.

단일 결과의 경우 다음과 같은 결과를 얻었습니다.

var nodes = document.querySelectorAll(selector);
nodes
▶ NodeList [a._19eb]
for (node in nodes) {console.log(node)};
VM505:1 0
VM505:1 length
VM505:1 item
VM505:1 entries
VM505:1 forEach
VM505:1 keys
VM505:1 values

내가 왜 알 수 .for (node in nodes) node.href = newLink;실패했어요.

언급URL : https://stackoverflow.com/questions/500504/why-is-using-for-in-for-array-iteration-a-bad-idea

'sourcecode' 카테고리의 다른 글

MYSQL의 2개의 개별 테이블에서 사용 가능한 모든 행에 대해 피벗 테이블엔트리를 작성하는 방법 (0)	2022.11.07
TRANSACTION 블록 MySQL 외부에서 삽입 실행 (0)	2022.11.07
커스텀 마리아 DB 도커 이미지 작성 방법 (0)	2022.11.07
Kotlin에서 익명 인터페이스 인스턴스를 작성하려면 어떻게 해야 합니까? (0)	2022.11.07
JSONObject를 사용하여 Java에서 올바른 JSONArray를 작성하는 방법 (0)	2022.11.07

현재글어레이 반복에 "for...in"을 사용하는 것이 좋지 않은 이유는 무엇입니까?

각종 프로그래밍 정보를 다루는 블로그입니다.

WordPress, Java, Python, Git, MariaDB, MySQL, php, mongoDB, reactjs, oracle, angularjs, Ajax, vuejs2, jquery, vuex, C, Powershell, Spring-Boot, JSON, JavaScript,

Today :
Yesterday :

copyscript

어레이 반복에 "for...in"을 사용하는 것이 좋지 않은 이유는 무엇입니까?

어레이 반복에 "for...in"을 사용하는 것이 좋지 않은 이유는 무엇입니까?

주의:

'sourcecode' 카테고리의 다른 글

'sourcecode'의 다른글

티스토리툴바

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

어레이 반복에 "for...in"을 사용하는 것이 좋지 않은 이유는 무엇입니까?

어레이 반복에 "for...in"을 사용하는 것이 좋지 않은 이유는 무엇입니까?

주의:

'sourcecode' 카테고리의 다른 글

'sourcecode'의 다른글

관련글

티스토리툴바