javascript 비교 - 각 배열에 대한 자바 스크립트?




중복 개수 (24)

JavaScript를 사용하여 배열의 모든 항목을 반복하는 방법은 무엇입니까?

나는 그것이 다음과 같다고 생각했다.

forEach(instance in theArray)

어디에 theArray 내 배열이지만 잘못된 것으로 보입니다.


Answers

람다 구문은 일반적으로 IE 10 이하에서 작동하지 않습니다.

나는 보통

[].forEach.call(arrayName,function(value,index){
    console.log("value of the looped element" + value);
    console.log("index of the looped element" + index);
});


If you are a jQuery Fan and already have a jQuery file running, you should reverse the positions of the index and value parameters

$("#ul>li").each(function(**index,value**){
    console.log("value of the looped element" + value);
    console.log("index of the looped element" + index);
});

ES6의와 루프 사용 destructuring확산 연산자

일부 자바 스크립트 베테랑들이 그것을 지저분하다고 생각할지 모르지만, 스프레드 연산자의 파괴 및 사용은 ES6에 대한 새로운 사람들이 인간이 읽을 수있는 / 심미적 인 것으로 아주 유용하다는 것을 입증했습니다. 후배 또는 다른 사람들이 유용하다고 생각할 수도 있습니다.

다음 예제는 for...of명령문과 .forEach메소드를 사용 합니다 .

예 6, 7, 8 등의 모든 기능 루프와 함께 사용할 수 있습니다 .map, .filter, .reduce, .sort, .every, .some, 이러한 방법에 대한 자세한 내용은 체크 아웃에 대한 배열 개체를 .

예제 1 : 일반 for...of루프 - 여기에 트릭이 없습니다.

let arrSimple = ['a', 'b', 'c'];

for (let letter of arrSimple) {
  console.log(letter);
}

예 2 : 단어를 문자로 분할

let arrFruits = ['apple', 'orange', 'banana'];

for (let [firstLetter, ...restOfTheWord] of arrFruits) {
  // Create a shallow copy using the spread operator
  let [lastLetter] = [...restOfTheWord].reverse();
  console.log(firstLetter, lastLetter, restOfTheWord);

}

예 3 : 로 루핑 keyvalue

// let arrSimple = ['a', 'b', 'c'];

// Instead of keeping an index in `i` as per example `for(let i = 0 ; i<arrSimple.length;i++)`
// this example will use a multi-dimensional array of the following format type: 
// `arrWithIndex: [number, string][]`

let arrWithIndex = [
  [0, 'a'],
  [1, 'b'],
  [2, 'c'],
];

// Same thing can be achieved using `.map` method
// let arrWithIndex = arrSimple.map((i, idx) => [idx, i]);

// Same thing can be achieved using `Object.entries`
// NOTE: `Object.entries` method doesn't work on internet explorer unless it's polyfilled
// let arrWithIndex = Object.entries(arrSimple);

for (let [key, value] of arrWithIndex) {
  console.log(key, value);
}

예제 4 : 객체 속성을 인라인으로 가져 오기

let arrWithObjects = [{
    name: 'Jon',
    age: 32
  },
  {
    name: 'Elise',
    age: 33
  }
];

for (let { name, age: aliasForAge } of arrWithObjects) {
  console.log(name, aliasForAge);
}

예제 5 : 필요한 것의 딥 객체 속성 가져 오기

let arrWithObjectsWithArr = [{
    name: 'Jon',
    age: 32,
    tags: ['driver', 'chef', 'jogger']
  },
  {
    name: 'Elise',
    age: 33,
    tags: ['best chef', 'singer', 'dancer']
  }
];

for (let { name, tags: [firstItemFromTags, ...restOfTags] } of arrWithObjectsWithArr) {
  console.log(name, firstItemFromTags, restOfTags);
}

예 6 : 인가 예 3 에 사용.forEach

let arrWithIndex = [
  [0, 'a'],
  [1, 'b'],
  [2, 'c'],
];

// Not to be confused here, `forEachIndex` is the real index
// `mappedIndex` was created by "another user", so you can't really trust it

arrWithIndex.forEach(([mappedIndex, item], forEachIndex) => {
  console.log(forEachIndex, mappedIndex, item);
});

예 7 : 인가 예 4 와 함께 사용.forEach

let arrWithObjects = [{
    name: 'Jon',
    age: 32
  },
  {
    name: 'Elise',
    age: 33
  }
];
// NOTE: Destructuring objects while using shorthand functions 
// are required to be surrounded by parenthesis
arrWithObjects.forEach( ({ name, age: aliasForAge }) => {
  console.log(name, aliasForAge)
});

예 8 : 인가 예 5 와 함께 사용.forEach

let arrWithObjectsWithArr = [{
    name: 'Jon',
    age: 32,
    tags: ['driver', 'chef', 'jogger']
  },
  {
    name: 'Elise',
    age: 33,
    tags: ['best chef', 'singer', 'dancer']
  }
];

arrWithObjectsWithArr.forEach(({
  name,
  tags: [firstItemFromTags, ...restOfTags]
}) => {
  console.log(name, firstItemFromTags, restOfTags);
});


당신이 사용하고 싶다면 forEach(), 그것은 -

theArray.forEach ( element => { console.log(element); });

당신이 사용하고 싶다면 for(), 그것은 -

for(let idx = 0; idx < theArray.length; idx++){ let element = theArray[idx]; console.log(element); }


방대한 배열을 가지고 있다면 iterators효율성을 높이기 위해 사용해야 합니다. 반복자는 (같은 특정 자바 스크립트 컬렉션의 재산 Map, Set, String, Array). 심지어, for...of사용 iterator후드 아래.

반복자는 마치 스트림 인 것처럼 목록의 항목을 한 번에 하나씩 소비함으로써 효율성을 향상시킵니다. 반복기를 특별하게 만드는 것이 컬렉션을 통과하는 방법입니다. 다른 루프는 컬렉션을 반복하기 위해 전체 컬렉션을 앞에로드해야하지만 반복기는 컬렉션의 현재 위치 만 알아야합니다.

이터레이터의 next메소드를 호출하여 현재 항목에 액세스한다 . 다음 메소드는 value현재 항목의 를 리턴 하고 a boolean는 콜렉션의 끝에 도달했을 때를 표시합니다. 다음은 배열에서 반복자를 만드는 예제입니다.

다음 values()과 같은 메소드를 사용하여 일반 배열을 반복자로 변환하십시오 .

    const myArr = [2,3,4]

let it = myArr.values();

console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

다음 Symbol.iterator과 같이 정규 배열을 iterator로 변환 할 수도 있습니다 :

const myArr = [2,3,4]

let it = myArr[Symbol.iterator]();

console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

정규병 array을 다음 iterators과 같이 변형 할 수도 있습니다 .

let myArr = [8, 10, 12];

function makeIterator(array) {
    var nextIndex = 0;
    
    return {
       next: function() {
           return nextIndex < array.length ?
               {value: array[nextIndex++], done: false} :
               {done: true};
       }
    };
};

var it = makeIterator(myArr);

console.log(it.next().value);   // {value: 8, done: false}
console.log(it.next().value);   // {value: 10, done: false}
console.log(it.next().value);   // {value: 12, done: false}
console.log(it.next().value);   // {value: undefined, done: true}

참고 :

  • 반복자는 본질적으로 완전하지 않습니다.
  • 개체는 iterable기본적으로 없습니다 . for..in이 경우에는 값 대신 키와 함께 작동하기 때문에 사용하십시오 .

자세한 내용은 iteration protocol here 참조 here .


아마 for(i = 0; i < array.length; i++)루프가 최선의 선택이 아닙니다. 왜? 당신이 가지고있는 경우 :

var array = new Array();
array[1] = "Hello";
array[7] = "World";
array[11] = "!";

메서드는 from array[0]을 호출 합니다 array[2]. 첫째, 이것은 당신이 가지고 있지 않은 변수를 먼저 참조 할 것이고, 두 번째로 배열에 변수를 가지지 않을 것이고, 세 번째는 코드를 더 굵게 만들 것입니다. 여기보세요, 제가 사용하는 것입니다 :

for(var i in array){
    var el = array[i];
    //If you want 'i' to be INT just put parseInt(i)
    //Do something with el
}

그리고 그것이 함수가되기를 원하면 다음과 같이 할 수 있습니다 :

function foreach(array, call){
    for(var i in array){
        call(array[i]);
    }
}

당신이 좀 더 많은 논리를 깨고 싶다면 :

function foreach(array, call){
    for(var i in array){
        if(call(array[i]) == false){
            break;
        }
    }
}

예:

foreach(array, function(el){
    if(el != "!"){
        console.log(el);
    } else {
        console.log(el+"!!");
    }
});

다음을 반환합니다.

//Hello
//World
//!!!

배열을 비우는 것에 신경 쓰지 않는다면 :

var x;

while(x = y.pop()){ 

    alert(x); //do something 

}

xy 의 마지막 값을 포함하며 배열에서 제거됩니다. shift() 를 사용하여 y 에서 첫 번째 항목을주고 제거 할 수도 있습니다.


forEach 구현 ( jsFiddle 참조 ) :

function forEach(list,callback) {
  var length = list.length;
  for (var n = 0; n < length; n++) {
    callback.call(list[n]);
  }
}

var myArray = ['hello','world'];

forEach(
  myArray,
  function(){
    alert(this); // do something
  }
);

jQuery 라이브러리를 사용하는 경우 jQuery.each 를 사용할 수 있습니다.

$.each(yourArray, function(index, value) {
  // do your stuff here
});

편집하다 :

질문에 따라, 사용자는 jquery가 아닌 javascript 코드를 사용하여 편집합니다.

var length = yourArray.length;   
for (var i = 0; i < length; i++) {
  // Do something with yourArray[i].
}

개요:

배열을 반복 할 때 종종 다음 목표 중 하나를 달성 할 수 있습니다.

  1. 우리는 배열을 반복하고 새로운 배열을 생성하고자합니다 :

    Array.prototype.map

  2. 우리는 배열을 반복하고 새로운 배열을 만들지 않기를 원합니다 :

    Array.prototype.forEach

    for..of 고리

JS에서는 이러한 두 가지 목표를 달성하는 여러 가지 방법이 있습니다. 그러나 어떤 것은 다른 것보다 conventient하다. 아래에서 자바 스크립트에서 배열 반복을 수행하기 위해 일반적으로 사용되는 메소드 (가장 conventient imo)를 찾을 수 있습니다.

새 배열 만들기 : Map

map()Array.prototype배열의 모든 요소를 ​​변형 할 수 있는 함수 이며 배열 을 반환합니다 . map()인수로 콜백 함수를 사용하며 다음과 같은 방식으로 작동합니다.

let arr = [1, 2, 3, 4, 5];

let newArr = arr.map((element, index, array) => {
  return element * 2;
})

console.log(arr);
console.log(newArr);

map()인수로 전달한 콜백 은 모든 요소에 대해 실행됩니다. 그런 다음 원래 배열과 길이가 같은 배열이 반환됩니다. 이 새로운 배열 요소는 인수로 전달 된 콜백 함수에 의해 변형됩니다 map().

사이에 뚜렷한 차이 map와 같은 다른 루프 메커니즘 forEachfor..of루프가있는 map새로운 배열로 반환 그대로 기존의 배열을 잎 (같은 생각에 당신이 명시 적으로이를 조작하는 경우를 제외하고 splice).

또한이 map함수의 콜백은 현재 반복의 인덱스 번호를 두 번째 인수로 제공합니다. 또한 세 번째 인수 map는 호출 된 배열을 제공합니다 . 때로는 이러한 속성이 매우 유용 할 수 있습니다.

루프 사용 forEach

forEach에있는 함수 Array.prototype의 인수로 콜백 함수가 걸린다. 그런 다음 배열의 모든 요소에 대해이 콜백 함수를 실행합니다. map()함수 와 달리 forEach 함수는 nothing ( undefined)을 반환합니다 . 예 :

let arr = [1, 2, 3, 4, 5];

arr.forEach((element, index, array) => {

  console.log(element * 2);

  if (index === 4) {
    console.log(array)
  }
  // index, and oldArray are provided as 2nd and 3th argument by the callback

})

console.log(arr);

그냥 같은 map기능의 forEach콜백은 두 번째 인수로 현재 반복의 인덱스 번호를 제공합니다. 또한 세 번째 인수 forEach는 호출 된 배열을 제공합니다 .

요소를 통해 반복 사용 for..of

for..of루프는 배열 (또는 다른 반복 가능한 객체)의 모든 요소를 통해 루프. 그것은 다음과 같은 방식으로 작동합니다 :

let arr = [1, 2, 3, 4, 5];

for(let element of arr) {
  console.log(element * 2);
}

위의 예에서는 element배열 요소 를 나타내며 arr루프를 만들려는 배열입니다. 이름 element이 임의적 인 것은 아니며 'el'또는 이와 유사한 다른 선언문을 적용 할 수 있습니다.

for..in루프를 루프와 혼동하지 마십시오 for..of. for..in배열의 모든 열거 가능 속성을 for..of반복합니다. 반면 루프는 배열 요소를 반복합니다. 예 :

let arr = [1, 2, 3, 4, 5];

arr.foo = 'foo';

for(let element of arr) {
  console.log(element);
}

for(let element in arr) {
  console.log(element);
}


배열을 반복하려면 표준 3 부분 for 루프를 사용하십시오.

for (var i = 0; i < myArray.length; i++) {
    var arrayItem = myArray[i];
}

myArray.length 를 캐싱하거나 역순으로 반복하여 성능 최적화를 얻을 수 있습니다.


있다 몇 가지 방법 루프는 다음과 자바 스크립트의 배열을 통해 :

왜냐하면 가장 일반적인 것이기 때문입니다. 루핑을위한 전체 코드 블록

var languages = ["JAVA", "JavaScript", "C#", "Python"];
var i, len, text;
for (i = 0, len = languages.length, text = ""; i < len; i++) {
    text += languages[i] + "<br>";
}
document.getElementById("example").innerHTML = text;
<p id="example"></p>

while - 조건이 끝나는 동안 루프. 가장 빠른 루프 인 것 같습니다.

var text = "";
var i = 0;
while (i < 10) {
    text +=  i + ") something<br>";
    i++;
}
document.getElementById("example").innerHTML = text;
<p id="example"></p>

do / while - 조건이 참일 때 코드 블록을 반복하면서 적어도 한 번 실행됩니다.

var text = ""
var i = 0;
do {
    text += i + ") something <br>";
    i++;
}
while (i < 10);
document.getElementById("example").innerHTML = text;
<p id="example"></p>

기능 루프 - forEach, map, filter, 또한 reduce(그들은 기능을 통해 루프,하지만 당신은 등 배열, 뭔가를해야 할 경우에 사용

// For example, in this case we loop through the number and double them up using the map function
var numbers = [65, 44, 12, 4];
document.getElementById("example").innerHTML = numbers.map(function(num){return num * 2});
<p id="example"></p>

배열에 대한 함수 프로그래밍에 대한 자세한 내용과 예제는 블로그 게시물 Functional programming in JavaScript : map, filter and reduce를 참조하십시오 .


inbuilt에 침입 할 능력이 없습니다 forEach. 실행을 중단하려면 다음 Array#some과 같이 사용하십시오 .

[1,2,3].some(function(number) {
    return number === 1;
});

이것은 some배열 순서로 실행되는 콜백이 true를 반환하자마자 true를 반환 하기 때문에 작동 합니다. 나머지는 실행을 단락시킵니다. 원래 응답 some 프로토 타입을 참조하십시오some


나는 또한이 구문을 좋아할만한 누군가를 위해 역 루프와 위의 대답의 구성으로 이것을 추가하고 싶다.

var foo = [object,object,object];
for (var i = foo.length, item; item = foo[--i];) {
    console.log(item);
}

장점 :

이것에 대한 이점 : 나중에 다른 라인으로 선언 할 필요가없는 첫 번째와 같은 참조가 이미 있습니다. 객체 배열을 반복 할 때 유용합니다.

단점 :

참조가 false 일 때마다 중단됩니다 (false, undefined 등). 그것은 장점으로 사용될 수 있습니다. 그러나 읽는 것이 조금 더 어려워 질 것입니다. 또한 브라우저에 따라 원래의 것보다 빠르게 작동하도록 최적화되지 않을 수도 있습니다.


세 가지 구현이 있습니다 foreach에서 jQuery 다음과 같이가.

var a = [3,2];

$(a).each(function(){console.log(this.valueOf())}); //Method 1
$.each(a, function(){console.log(this.valueOf())}); //Method 2
$.each($(a), function(){console.log(this.valueOf())}); //Method 3

TL, DR

  • 안전 장치와 함께 사용하거나 최소한 그것이 왜 당신을 물릴 지 모른다고 생각하지 않는 한 for-in 사용하지 마십시오.
  • 최상의 베팅은 대개

    • for-of 루프 (ES2015 + 만 해당),
    • Array#forEach ( spec | MDN ) (또는 그 친척 some ) (ES5 + 전용),
    • 간단한 구식 for 루프,
    • 또는 안전 장치 for-in 있는 유인물.

그러나 더 많은 것을 탐구하고, 읽으십시오 ...

JavaScript는 배열과 배열과 같은 객체를 통해 루핑하기위한 강력한 의미를가집니다. 저는 대답을 두 부분으로 나누었습니다 : 진짜 배열을위한 옵션 , 단지 배열 과 비슷한 것들, 예를 들어 arguments 객체, 다른 반복 가능한 객체 (ES2015 +), DOM 콜렉션 등과 같은 옵션.

ES2015 옵션을 지금도 ES5 엔진에서 ES2015에서 ES5로 전환하여 사용할 수 있음을 빠르게 알려드립니다. "ES2015 transpilating"/ "ES6 transpiling"검색

자, 우리 옵션을 살펴 보자.

실제 배열의 경우

ECMAScript 5 ( "ES5")에는 현재 가장 널리 지원되는 버전과 ECMAScript 2015 ( "ES2015", "ES6")에 추가 된 세 가지 옵션이 있습니다.

  1. 각 및 관련 (ES5 +)
  2. for 돌이 사용
  3. for-in 올바르게 사용하십시오.
  4. for-of 사용합니다 (암시 적으로 반복자 사용) (ES2015 +).
  5. 반복자를 명시 적으로 사용 (ES2015 +)

세부:

1. 각각의 용도와 관련

ES5 (직접 또는 폴리 폴리을 사용)에 의해 추가 된 Array 기능에 액세스 할 수있는 막연한 현대 환경 (IE8 아님)에서는 forEach ( spec | MDN )를 사용할 수 있습니다.

var a = ["a", "b", "c"];
a.forEach(function(entry) {
    console.log(entry);
});

forEach 는 해당 콜백을 호출 할 때 콜백 함수와 선택적 this 값을 사용할 수 있습니다 (위에서 사용하지 않음). 콜백은 배열의 각 항목에 대해 순서대로 나열되어 스파 스 배열에 존재하지 않는 항목을 건너 뜁니다. 위의 인수를 하나만 사용했지만 콜백은 각 항목의 값, 해당 항목의 인덱스 및 반복되는 배열에 대한 참조 (함수에 아직 유용하지 않은 경우에 대비하여) ).

Internet Explorer 8과 같은 오래된 브라우저 (2016 년 9 월에 NetApp이 4 %의 시장 점유율 이상을 기록함)를 지원하지 않는 한, sham을 사용하지 않고 범용 웹 페이지에서 forEach 를 행복하게 사용할 수 있습니다. 더 이상 사용하지 않는 브라우저를 지원해야하는 경우 각 브라우저에서 shimming / polyfilling for eachach를 쉽게 수행 할 수 있습니다 (여러 옵션에서 "es5 shim"을 검색).

forEach 는 인덱싱 및 값 변수를 포함 범위에서 선언 할 필요가 없다는 장점이 있습니다. 즉, 반복 함수에 대한 인수로 제공되므로 잘 정의 된 반복만으로 범위가 지정됩니다.

각 배열 항목에 대한 함수 호출을 만드는 데 드는 런타임 비용이 걱정된다면 그렇게하지 마십시오. blog.niftysnippets.org/2012/02/foreach-and-runtime-cost.html .

또한 forEach 는 "모두를 통한 루프"기능을 제공하지만 ES5는 다음을 비롯한 여러 가지 유용한 "배열 및 작업 수행 방식"기능을 정의했습니다.

  • every (콜백이 false 리턴하거나 false 반환 할 때 루핑을 중지 함)
  • some (콜백이 true 또는 true 반환 할 때 처음으로 루핑을 멈춤)
  • filter (필터 함수가 true 반환하는 요소를 포함하는 새 배열을 만들고 false 반환하는 요소는 생략 함)
  • map (콜백에 의해 반환 된 값에서 새 배열을 만듭니다)
  • reduce (콜백을 반복적으로 호출하여 값을 생성하고 이전 값을 전달하며 세부 사항은 스펙을 참조하고 배열의 내용과 다른 많은 것들을 요약하는 데 유용함)
  • reduceRight ( reduce 와 같지만 오름차순이 아닌 내림차순으로 작업)

2. 간단한 for 루프를 사용하십시오.

때때로 오래된 방법이 최고입니다.

var index;
var a = ["a", "b", "c"];
for (index = 0; index < a.length; ++index) {
    console.log(a[index]);
}

루프가 진행되는 동안 배열의 길이가 변경되지 않고 성능에 민감한 코드 (거의 없을 수 있음)가 있으면 길이를 앞당기는 약간 더 복잡한 버전이 조금 더 빨라질 수 있습니다.

var index, len;
var a = ["a", "b", "c"];
for (index = 0, len = a.length; index < len; ++index) {
    console.log(a[index]);
}

그리고 / 또는 뒤로 계산 :

var index;
var a = ["a", "b", "c"];
for (index = a.length - 1; index >= 0; --index) {
    console.log(a[index]);
}

그러나 최신 자바 스크립트 엔진을 사용하면 마지막 주스를 꺼내야 할 때가 드뭅니다.

ES2015 이상에서는 for 루프에 for 색인 및 값 변수를 로컬로 만들 수 있습니다.

let a = ["a", "b", "c"];
for (let index = 0; index < a.length; ++index) {
    let value = a[index];
}
//console.log(index); // Would cause "ReferenceError: index is not defined"
//console.log(value); // Would cause "ReferenceError: value is not defined"

그렇게 할 때 value 뿐만 아니라 index 도 각 루프 반복마다 다시 작성됩니다. 즉, 루프 본문에 만들어진 클로저는 해당 반복에 대해 생성 된 index (및 value )에 대한 참조를 유지합니다.

let divs = document.querySelectorAll("div");
for (let index = 0; index < divs.length; ++index) {
    divs[index].addEventListener('click', e => {
        alert("Index is: " + index);
    });
}

5 개의 div가있는 경우 첫 번째를 클릭하면 "색인 : 0"을, 마지막을 클릭하면 "색인 : 4"를 얻게됩니다. let 대신에 var 를 사용하면 이것은 작동하지 않습니다 .

3. for-in 올바르게 사용하십시오.

당신은 for-in 을 사용하라는 사람들을 알게 될 것 for-in . 그러나 그것이 for-in 을위한 것이 아닙니다 . for-in 루프는 배열의 인덱스가 아니라 객체열거 가능 속성을 통해 수행됩니다. 주문은 ES2015 (ES6)조차도 보장 되지 않습니다. ES2015는 [[OwnPropertyKeys]] , [[Enumerate]]Object.getOwnPropertyKeys 와 같은 객체를 사용하는 것들을 통해 객체 속성에 대한 순서를 정의하지만 for-in 이 그 순서를 따를 것을 정의 하지 않습니다 . ( 이 다른 답변의 세부 정보)

적절한 보호 장치를 사용하면 스파 스 배열 의 경우 특히 유용 할 있습니다.

// `a` is a sparse array
var key;
var a = [];
a[0] = "a";
a[10] = "b";
a[10000] = "c";
for (key in a) {
    if (a.hasOwnProperty(key)  &&        // These are explained
        /^0$|^[1-9]\d*$/.test(key) &&    // and then hidden
        key <= 4294967294                // away below
        ) {
        console.log(a[key]);
    }
}

두 가지 사항을 확인하십시오.

  1. 그 객체는 그 이름으로 자체의 속성을 가진다 (프로토 타입으로부터 상속받은 것이 아님).

  2. 이 키는 일반 문자열 형식의 기본 10 숫자 문자열이며 해당 값은 <= 2 ^ 32 - 2 (4,294,967,294)입니다. 그 번호는 어디서 나왔습니까? 이것은 스펙 의 배열 인덱스 정의의 일부입니다. 다른 수 (정수가 아닌 수, 음수, 2 ^ 32-2보다 큰 수)는 배열 색인이 아닙니다. 2 ^ 32 - 2 인 이유는 배열의 length 가 가질 수있는 최대 값 인 2 ^ 32 - 1 보다 큰 인덱스 값을 하나 낮추기 때문입니다. (예를 들어, 배열의 길이는 32 비트 부호없는 정수에 맞습니다.) (RobG의 소품에서 내 이전 블로그 테스트에 대한 의견을 지적 해주었습니다.

이는 대부분의 배열에서 루프 반복 당 약간의 추가 오버 헤드이지만, 배열이 희박한 경우 실제로 존재하는 항목 만 루프하기 때문에 반복하는 것이 더 효율적인 방법 일 수 있습니다. 예를 들어 위의 배열에 대해 우리는 10,001 번이 아니라 총 세 번 반복합니다 (키 "0" , "10""10000" - 문자열임을 기억하십시오).

이제는 매번 그 내용을 쓰고 싶지 않으므로 이것을 툴킷에 넣을 수 있습니다.

function arrayHasOwnIndex(array, prop) {
    return array.hasOwnProperty(prop) && /^0$|^[1-9]\d*$/.test(prop) && prop <= 4294967294; // 2^32 - 2
}

그리고 나서 우리는 이것을 다음과 같이 사용합니다 :

for (key in a) {
    if (arrayHasOwnIndex(a, key)) {
        console.log(a[key]);
    }
}

또는 "대부분의 경우에 적합합니다"테스트에만 관심이있는 경우이 테스트를 사용할 수 있지만 가까운 경우에는 정확하지 않습니다.

for (key in a) {
    // "Good enough" for most cases
    if (String(parseInt(key, 10)) === key && a.hasOwnProperty(key)) {
        console.log(a[key]);
    }
}

4. for-of 사용 (반복적으로 암시 적으로 사용) (ES2015 +)

ES2015는 반복기 를 JavaScript에 추가 합니다 . 반복자를 사용하는 가장 쉬운 방법은 새로운 for-of 문입니다. 다음과 같이 보입니다.

var val;
var a = ["a", "b", "c"];
for (val of a) {
    console.log(val);
}

산출:

a
b
c

커버 아래에서 배열에서 반복자 를 가져 와서 루프를 통해 값을 가져옵니다. 객체 (배열)에 의해 정의 된 반복자를 사용하고 배열은 반복자가 해당 속성이 아닌 항목을 반복하여 반복하도록 정의하므로 for-in 을 사용하는 것이 문제가되지 않습니다. ES5의 for-in 과 달리 항목을 방문하는 순서는 색인의 숫자 순서입니다.

5. 반복자를 명시 적으로 사용하십시오 (ES2015 +).

때로는 반복자를 명시 적으로 사용하고자 할 수 있습니다. for-of 보다 훨씬 까다 롭긴하지만 그렇게 할 수도 있습니다. 다음과 같이 보입니다.

var a = ["a", "b", "c"];
var it = a.values();
var entry;
while (!(entry = it.next()).done) {
    console.log(entry.value);
}

iterator는 사양의 Iterator 정의와 일치하는 객체입니다. next 메서드는 호출 할 때마다 새 결과 개체를 반환합니다. 결과 객체에는 done 여부를 알려주는 속성과 해당 반복에 대한 value 이있는 속성 value 이 있습니다. ( donefalse 일 경우 선택 사항이며, undefined 인 경우 value 는 선택 사항입니다.)

value 의 의미는 반복자에 따라 다릅니다. 배열은 (최소한) 반복자를 반환하는 세 가지 함수를 지원합니다.

  • values() : 위에 사용 된 값입니다. iterator를 반환합니다. 각 value 은 해당 반복의 배열 항목입니다 (앞의 예제에서 "b" , "b""c" ).
  • keys() : 각각의 value 이 해당 반복의 키인 반복자를 반환합니다 a 위의 예에서는 "0" , "1" , "2" 입니다.
  • entries() : 각 반복자의 [key, value] 형식의 배열 인 각 반복자를 반환합니다.

배열과 같은 객체의 경우

실제 배열과는 달리 length 속성과 숫자 이름을 가진 속성 인 NodeList 인스턴스, arguments 객체 등이 배열과 유사한 객체입니다. 어떻게 내용을 반복합니까?

배열에 대해 위의 옵션 중 하나를 사용하십시오.

배열 접근법 중 적어도 일부, 가능하게는 대부분 또는 모두가 배열과 유사한 객체에 똑같이 잘 적용됩니다.

  1. 각 및 관련 (ES5 +)

    Array.prototype 의 다양한 함수는 "의도적으로 일반"이며 Function#call 또는 Function#apply 를 통해 배열과 유사한 객체에서 일반적으로 사용할 수 Function#apply . 이 답변 끝 부분에 호스트 제공 객체대한주의 사항 이 있지만 드문 문제입니다.

    NodechildNodes 속성에서 forEach 를 사용하려고한다고 가정합니다. 당신이 할거야 :

    Array.prototype.forEach.call(node.childNodes, function(child) {
        // Do something with `child`
    });
    

    이 작업을 많이 수행하려는 경우 함수 참조 사본을 다시 사용할 수있는 변수로 가져와야 할 수 있습니다 (예 :

    // (This is all presumably in some scoping function)
    var forEach = Array.prototype.forEach;
    
    // Then later...
    forEach.call(node.childNodes, function(child) {
        // Do something with `child`
    });
    
  2. for 돌이 사용

    분명히 간단한 for 루프가 배열과 같은 객체에 적용됩니다.

  3. for-in 올바르게 사용하십시오.

    for-in 배열과 같은 보호 장치는 배열과 유사한 객체에서도 작동해야합니다. 위 # 1의 호스트 제공 객체에 대한주의 사항이 적용될 수 있습니다.

  4. for-of 사용합니다 (암시 적으로 반복자 사용) (ES2015 +).

    for-of 는 객체가 제공하는 반복자를 사용합니다 (있는 경우). 우리는 다양한 배열과 같은 객체들, 특히 호스트가 제공하는 객체들과 함께 이것이 어떻게 작동 하는지를 알아야 할 것이다. 예를 들어, querySelectorAllNodeList 대한 사양이 반복을 지원하도록 업데이트되었습니다. getElementsByTagNameHTMLCollection 대한 사양이 아닙니다.

  5. 반복자를 명시 적으로 사용 (ES2015 +)

    # 4를 보면 iterator가 어떻게 작동하는지보아야합니다.

진정한 배열 만들기

다른 경우에는 배열과 같은 객체를 실제 배열로 변환 할 수 있습니다. 그렇게하는 것은 놀랍도록 쉽습니다.

  1. 배열의 slice 메소드 사용

    우리는 배열의 slice 메소드를 사용할 수 있습니다. 위에서 언급 한 다른 메소드는 "의도적으로 일반"이므로 다음과 같이 배열과 같은 객체와 함께 사용할 수 있습니다.

    var trueArray = Array.prototype.slice.call(arrayLikeObject);
    

    예를 들어 NodeList 를 true 배열로 변환하려면 다음을 수행 할 수 있습니다.

    var divs = Array.prototype.slice.call(document.querySelectorAll("div"));
    

    아래 에 호스트 제공 객체에 대한주의 사항을 참조하십시오. 특히 IE8 이하에서는 실패 할 것이므로 호스트 제공 객체를 this 같이 사용할 수는 없습니다.

  2. 확산 구문 사용 ( ... )

    또한이 기능을 지원하는 JavaScript 엔진과 함께 ES2015의 확산 구문 을 사용할 수도 있습니다.

    var trueArray = [...iterableObject];
    

    예를 들어, NodeList 를 확산 구문으로 변환하려면 다음과 같이하면됩니다.

    var divs = [...document.querySelectorAll("div")];
    
  3. Array.from (spec) | (MDN)

    Array.from (ES2015 +, 쉽게 polyfilled)은 배열과 같은 객체에서 배열을 생성합니다. 선택적으로 매핑 함수를 통해 항목을 먼저 전달할 수 있습니다. 그래서:

    var divs = Array.from(document.querySelectorAll("div"));
    

    또는 주어진 클래스가있는 요소의 태그 이름 배열을 가져 오려면 매핑 함수를 사용하십시오.

    // Arrow function (ES2015):
    var divs = Array.from(document.querySelectorAll(".some-class"), element => element.tagName);
    
    // Standard function (since `Array.from` can be shimmed):
    var divs = Array.from(document.querySelectorAll(".some-class"), function(element) {
        return element.tagName;
    });
    

호스트 제공 객체에 대한주의 사항

Array.prototype 함수를 호스트 제공 배열과 유사한 객체 (JavaScript 목록이 아닌 브라우저에서 제공하는 DOM 목록 및 기타 항목)와 함께 사용하는 경우 대상 환경에서 호스트가 제공하는 객체를 확인하기 위해 반드시 테스트해야합니다 객체가 올바르게 동작합니다. 대부분 (현재) 올바르게 작동 하지만 테스트하는 것이 중요합니다. 그 이유는 여러분이 사용하기를 원하는 대부분의 Array.prototype 메소드는 호스트 제공 객체를 사용하여 추상 [[HasProperty]] 연산에 정직한 답을 제공하기 때문입니다. 이 글을 쓰는 시점에서 브라우저는 매우 훌륭하게 작동하지만, 5.1 사양은 호스트가 제공하는 객체가 정직하지 않을 가능성을 허용했습니다. 이것은 §8.6.2§8.6.2 , 그 섹션의 시작 부분 근처의 큰 테이블 아래의 여러 단락들)에 다음과 같이 쓰여 있습니다 :

호스트 객체는 달리 명시하지 않는 한 어떤 방식 으로든 이러한 내부 메소드를 구현할 수 있습니다. 예를 들어 특정 호스트 객체에 대한 [[Get]][[Put]] 은 실제로 속성 값을 가져 와서 저장하지만 [[HasProperty]] 항상 false를 생성 할 수 있습니다.

(필자는 ES2015 스펙에서 동등한 표현을 찾을 수 없었지만 여전히 그렇습니다.)이 글을 쓰면서 현재의 브라우저에서 일반적인 호스트 제공 배열과 유사한 객체 [ NodeList 인스턴스, 예] do [[HasProperty]] 올바르게 처리해야하지만 테스트하는 것이 중요합니다.)


쉬운 해결책은 이제 underscore.js 라이브러리 를 사용하는 것 입니다. 이 도구는 다음과 같은 유용한 도구를 제공 each하며 작업이 forEach가능한 경우 해당 작업을 자동으로 위임합니다 .

CodePen 의 작동 원리 는 다음과 같습니다.

var arr = ["elemA", "elemB", "elemC"];
_.each(arr, function(elem, index, ar)
{
...
});

또한보십시오

  • Array::forEach .
  • 에서 for_each...in (MDN)는 그 설명 for each (variable in object)ECMA-357 (의 일부로서 사용되지 EAX ) 표준.
  • for...of (MDN) for (variable of object)은 Harmony (ECMAScript 6) 제안의 일부로 사용하는 다음 반복 방법을 설명합니다 .

편집 :이 답변은 절망적으로 오래되었습니다. 보다 근대적 인 접근법을 얻으 려면 어레이에서 사용할 수있는 방법을 살펴보십시오. 관심 대상의 방법은 다음과 같습니다.

  • 각각
  • 지도
  • 필터
  • 지퍼
  • 줄이다
  • ...마다
  • 약간

JavaScript 에서 배열을 반복하는 표준 방법 for -loop의 바닐라 for .

var length = arr.length,
    element = null;
for (var i = 0; i < length; i++) {
  element = arr[i];
  // Do something with element
}

그러나이 방법은 조밀 한 배열이 있고 각 인덱스가 요소로 채워져있는 경우에만 유용합니다. 배열이 희소 한 경우 배열에 실제로 존재하지 않는 많은 인덱스를 반복하므로이 접근 방식으로 성능 문제가 발생할 수 있습니다. 이 경우 for..lo-loop이 더 좋은 아이디어 일 수 있습니다. 그러나 for..in -loop도 레거시 브라우저에서 열거되거나 추가 (예 : 배열 요소)가 필요하면 적절한 보호 책을 사용해야 어레이의 원하는 속성 (즉, 배열 요소) 만 작동하도록해야합니다. 속성은 enumerable 정의됩니다.

ECMAScript 5 에서는 배열 프로토 타입에 forEach 메서드가 있지만 레거시 브라우저에서는 지원되지 않습니다. 따라서 일관되게 사용할 수 있으려면이를 지원하는 환경 (예 : 서버 측 JavaScript의 경우 Node.js )이 있거나 "Polyfill"을 사용해야합니다. 그러나이 기능을위한 Polyfill은 간단하며 코드를 읽기 쉽게 만들어주기 때문에 포함시킬 좋은 polyfill입니다.


이것은 인덱스가 0에서 시작하는 NON-sparse 목록에 대한 반복기입니다.이 인덱스는 document.getElementsByTagName 또는 document.querySelectorAll을 처리 할 때 일반적인 시나리오입니다.

function each( fn, data ) {

    if(typeof fn == 'string')
        eval('fn = function(data, i){' + fn + '}');

    for(var i=0, L=this.length; i < L; i++) 
        fn.call( this[i], data, i );   

    return this;
}

Array.prototype.each = each;  

사용 예 :

예제 # 1

var arr = [];
[1, 2, 3].each( function(a){ a.push( this * this}, arr);
arr = [1, 4, 9]

예 2

each.call(document.getElementsByTagName('p'), "this.className = data;",'blue');

각 p 태그는 class="blue"

예 # 3

each.call(document.getElementsByTagName('p'), 
    "if( i % 2 == 0) this.className = data;",
    'red'
);

다른 모든 p 태그는 class="red">

예 # 4

each.call(document.querySelectorAll('p.blue'), 
    function(newClass, i) {
        if( i < 20 )
            this.className = newClass;
    }, 'green'
);

마지막으로 처음 20 개의 파란색 p 태그가 녹색으로 변경됩니다.

문자열을 함수로 사용할 때의주의 사항 : 함수는 컨텍스트 외부에서 생성되므로 변수 범위가 확실한 경우에만 사용해야합니다. 그렇지 않으면 범위 지정이보다 직관적 인 곳에서 함수를 전달하는 것이 좋습니다.


일부 C 스타일 언어는 foreach 를 사용하여 열거 형을 반복합니다. JavaScript에서는 for..in 루프 구조 로이 작업을 수행합니다.

var index,
    value;
for (index in obj) {
    value = obj[index];
}

캐치가 있습니다. for..in 은 객체의 열거 형 멤버와 프로토 타입의 멤버를 반복합니다. 객체의 프로토 타입을 통해 상속 된 값을 읽지 않으려면 객체가 객체에 속하는지 확인하기 만하면됩니다.

for (i in obj) {
    if (obj.hasOwnProperty(i)) {
        //do stuff
    }
}

또한 ECMAScript 5forEach 메서드를 Array.prototype 추가했습니다.이 메서드는 calback을 사용하여 배열을 열거하는 데 사용할 수 있습니다 (polyfill은 문서에 있으므로 이전 브라우저에서도 사용할 수 있습니다).

arr.forEach(function (val, index, theArray) {
    //do stuff
});

콜백이 false 반환하면 Array.prototype.forEach 가 중단되지 않습니다. jQueryUnderscore.js 는 각자의 변형을 제공하여 단락 될 수있는 루프를 제공합니다.


forEach는 다음과 같이 호출 할 수 있습니다.

let Array = [1,3,2];

theArray.forEach((element)=>{ 
  // use the element of the array
  console.log(element) 
}

요소는 0부터 배열의 길이까지의 각 인덱스의 값을가집니다.

산출:

1    
3    
2

설명 :

forEach는 프로토 타입 클래스입니다. 당신은 또한 thisArray.prototype.forEach (...);

프로토 타입 : https://hackernoon.com/prototypes-in-javascript-5bba2990e04b

다음과 같이 배열을 변경할 수도 있습니다.

for(let i=0;i<theArray.length;i++){
  console.log(i); //i will have the value of each index
}

for each네이티브 JavaScript 에는 루프 가 없습니다 . 라이브러리를 사용하여이 기능을 사용할 수 있습니다 (나는 Underscore.js 권장합니다 ) for. 간단한 루프를 사용하십시오.

for (var instance in objects) {
   ...
}

그러나 더 단순한 for루프 를 사용하는 이유가있을 수 있습니다 (스택 오버플로 질문 참조). 왜 "for ... in"을 배열 반복과 함께 사용하는 것이 좋지 않은가? )

var instance;
for (var i=0; i < objects.length; i++) {
    var instance = objects[i];
    ...
}

나는 이것이 오래된 게시물 인 것을 알고 있으며 이미 많은 훌륭한 답변들이 있습니다. 좀 더 완벽을 위해 AngularJS 사용하여 다른 것을 던질 것이라고 생각했습니다. 물론 이것은 Angular를 사용하는 경우에만 적용됩니다. 그럼에도 불구하고 어쨌든 그것을 넣고 싶습니다.

angular.forEach 는 두 개의 인수와 선택적 인 세 번째 인수를 취합니다. 첫 번째 인수는 반복 할 객체 (배열)이고 두 번째 인수는 반복 함수이며 선택적 세 번째 인수는 객체 컨텍스트입니다 (기본적으로 'this'로 루프 내에서 참조됩니다.).

각 회진 forEach 루프를 사용하는 여러 가지 방법이 있습니다. 가장 간단하고 아마도 가장 많이 사용되는 것은

var temp = [1, 2, 3];
angular.forEach(temp, function(item) {
    //item will be each element in the array
    //do something
});

한 배열에서 다른 배열로 항목을 복사하는 데 유용한 또 다른 방법은

var temp = [1, 2, 3];
var temp2 = [];
angular.forEach(temp, function(item) {
    this.push(item); //"this" refers to the array passed into the optional third parameter so, in this case, temp2.
}, temp2);

그래도 할 필요는 없지만 다음과 같이하면됩니다. 앞의 예와 같습니다.

angular.forEach(temp, function(item) {
    temp2.push(item);
});

이제 angular.forEach내장 된 바닐라 맛의 for루프 에 반대 되는 기능 을 사용하는 것이 장단점이 있습니다 .

찬성

  • 쉬운 가독성
  • 간편한 쓰기 기능
  • 사용 가능한 경우 angular.forEachES5 forEach 루프를 사용합니다. 이제 각 for 루프는 for 루프보다 훨씬 느리기 때문에 cons 섹션에서 효율적으로 처리 할 것입니다. 일관되고 표준화 된 것이 좋기 때문에 이것을 프로로 언급합니다.

다음과 같은 두 개의 중첩 루프를 생각해보십시오. 정확히 같은 일을합니다. 우리가 2 개의 객체 배열을 가지고 있고 각 객체가 결과 배열을 포함한다고 가정 해 봅시다. 각각의 문자열은 Value 속성을 가지고 있습니다. 그리고 각각의 결과를 반복 할 필요가 있다고 가정 해 봅시다. 평등 한 경우 몇 가지 작업을 수행하십시오.

angular.forEach(obj1.results, function(result1) {
    angular.forEach(obj2.results, function(result2) {
        if (result1.Value === result2.Value) {
            //do something
        }
    });
});

//exact same with a for loop
for (var i = 0; i < obj1.results.length; i++) {
    for (var j = 0; j < obj2.results.length; j++) {
        if (obj1.results[i].Value === obj2.results[j].Value) {
            //do something
        }
    }
}

이것은 매우 단순한 가상의 예제이지만, 두 번째 접근법을 사용하여 루프에 3 중 임베디드를 작성 했으므로이 내용을 읽거나 쓰는 것이 매우 어려웠습니다.

단점

  • 능률. angular.forEach그리고 기본은 forEach, 그 문제에 관해서는, 모두 너무 느린 정상보다 for루프 .... 약 90 % 느린 . 따라서 대규모 데이터 세트의 경우 기본 for루프 를 유지하는 것이 가장 좋습니다 .
  • 휴식을 취하거나 계속하거나 지원을받지 마십시오. continue실제로 " accident "에 의해 지원됩니다 , angular.forEach당신 은 그 반복에 대한 함수에서 벗어나지 못하게하는 return;것과 같은 함수에 문장을 넣는 angular.forEach(array, function(item) { if (someConditionIsTrue) return; });것을 계속합니다. 이것은 네이티브 forEach가 중단을 지원하지 않거나 계속할 수도 없기 때문 입니다.

다른 여러 장단점이있을 것이라고 확신합니다. 여러분이 적합하다고 생각하는 것을 추가해 주시기 바랍니다. 나는 결론을 내릴 수 있습니다. 효율성이 필요하다면, for당신의 반복적 인 요구에 맞게 네이티브 루프를 고수 해야합니다. 그러나 데이터 집합이 더 작고 가독성과 쓰기 기능을 대신해서 포기하는 것이 좋을 경우, 그 angular.forEach나쁜 소년을 던지십시오 .


배열로 작업하는 ECMAScript5 (Javascript의 버전).

forEach - 배열의 모든 항목을 반복하고 각 항목에 필요한 모든 작업을 수행합니다.

['C', 'D', 'E'].forEach(function(element, index) {
  console.log(element + " is the #" + (index+1) + " in musical scale");
});

// Output
// C is the #1 in musical scale
// D is the #2 in musical scale
// E is the #3 in musical scale

경우에, 더 inbuilt 기능을 사용하여 배열 작업에 관심이 많습니다.

map - 콜백 함수의 결과로 새로운 배열을 생성합니다. 이 방법은 배열의 요소를 형식화해야 할 때 사용하는 것이 좋습니다.

// Let's upper case the items in the array
['bob', 'joe', 'jen'].map(function(elem) {
  return elem.toUpperCase();
});

// Output: ['BOB', 'JOE', 'JEN']

reduce - 이름에서 알 있듯이 currenct 요소에서 전달 된 주어진 함수와 이전 실행 결과를 호출하여 배열을 단일 값으로 줄입니다.

[1,2,3,4].reduce(function(previous, current) {
  return previous + current;
});
// Output: 10
// 1st iteration: previous=1, current=2 => result=3
// 2nd iteration: previous=3, current=3 => result=6
// 3rd iteration: previous=6, current=4 => result=10

every - 배열의 모든 요소가 콜백 함수에서 테스트를 통과하면 true 또는 false를 반환합니다.

// Check if everybody has 18 years old of more.
var ages = [30, 43, 18, 5];  
ages.every(function(elem) {  
  return elem >= 18;
});

// Output: false

filter - 필터가 해당 함수에 true를 반환하는 요소가있는 배열을 반환한다는 점을 제외하고는 모두 매우 비슷합니다.

// Finding the even numbers
[1,2,3,4,5,6].filter(function(elem){
  return (elem % 2 == 0)
});

// Output: [2,4,6]

희망이 유용 할 것입니다.


Closures 작성자는 Closures 에 대해 설명하고 클로저가 필요한 이유를 설명하고 클로저를 이해하는 데 필요한 LexicalEnvironment를 설명합니다.
요약은 다음과 같습니다.

변수에 액세스했지만 로컬 변수가 아닌 경우에는 어떻게해야합니까? 여기처럼 :

이 경우 인터프리터는 외부 LexicalEnvironment객체 에서 변수를 찾습니다 .

프로세스는 두 단계로 구성됩니다.

  1. 첫째, 함수 f가 생성되면 빈 공간에 생성되지 않습니다. 현재 LexicalEnvironment 객체가 있습니다. 위의 경우 창 (a는 함수 생성시 정의되지 않음)입니다.

함수가 생성되면 현재 [LexicalEnvironment]를 참조하는 숨겨진 속성 [[Scope]]을 얻습니다.

변수를 읽었지만 어디에서도 찾을 수없는 경우 오류가 생성됩니다.

중첩 된 함수

함수는 스코프 체인이라고도 부를 수있는 LexicalEnvironments의 체인을 형성하여 다른 함수의 내부에 중첩 될 수 있습니다.

따라서 함수 g는 g, a 및 f에 액세스 할 수 있습니다.

마감

중첩 된 함수는 외부 함수가 완료된 후에도 계속 살 수 있습니다.

LexicalEnvironments 마크 업 :

우리가 볼 때, this.say사용자 개체의 속성입니다, 그래서 사용자가 완료된 후 거주하고 있습니다.

그리고 기억하면, 언제 this.say만들어 this.say.[[Scope]]지나요? (모든 함수와 마찬가지로) 현재 LexicalEnvironment에 대한 내부 참조 를 얻습니다. 따라서 현재 사용자 실행의 LexicalEnvironment는 메모리에 남아 있습니다. 사용자의 모든 변수도 속성이므로 일반적으로 정크가 아닌 신중하게 보관됩니다.

전체적인 요점은 내부 함수가 미래에 외부 변수에 액세스하려고한다면 그렇게 할 수 있다는 것입니다.

요약:

  1. 내부 함수는 외부 LexicalEnvironment에 대한 참조를 유지합니다.
  2. 내부 함수는 외부 함수가 완료 되더라도 언제든지 변수를 액세스 할 수 있습니다.
  3. 브라우저는 LexicalEnvironment와 모든 속성 (변수)을 참조하는 내부 함수가있을 때까지 메모리에 LexicalEnvironment 및 모든 속성 (변수)을 유지합니다.

이를 클로저 (closure)라고합니다.





javascript arrays loops foreach iteration