두 가지 방법 사이의 주요 차이점은 개념 및 문체입니다 : 당신이 사용하는 forEach당신이 뭔가를 할 때 에 나 와 배열의 각 요소 ( “와”하고는 “부작용”을 의미 인용 포스트, 내가 무슨 생각입니다) , 반면 배열의 각 요소 map를 복사하고 변환 하려는 경우 (원본을 변경하지 않고) 사용합니다.

둘 다 map및 forEach배열의 각 항목에 대해 함수를 호출하고 해당 함수가 사용자 정의되어 있기 때문에 하나를 사용하여 수행 할 수있는 작업이 거의 없습니다. 추악하지만 map배열을 제자리에서 수정하거나 배열 요소로 무언가를 수행하는 데 사용할 수 있습니다.

var a = [{ val: 1 }, { val: 2 }, { val: 3 }];
a.map(function(el) {
    el.val++; // modify element in-place
    alert(el.val); // do something with each element
});
// a now contains [{ val: 2 }, { val: 3 }, { val: 4 }]

그러나 사용하려는 의도는 훨씬 명확하고 명확합니다 forEach.

var a = [{ val: 1 }, { val: 2 }, { val: 3 }];
a.forEach(function(el) {
    el.val++;
    alert(el.val);
});

특히 현실 세계에서 일반적으로 el그렇듯이 사람이 읽을 수있는 유용한 변수 인 경우 :

cats.forEach(function(cat) {
    cat.meow(); // nicer than cats[x].meow()
});

같은 방식 forEach으로 새 배열을 만드는 데 쉽게 사용할 수 있습니다 .

var a = [1,2,3],
    b = [];
a.forEach(function(el) {
    b.push(el+1);
});
// b is now [2,3,4], a is unchanged

그러나 사용하는 것이 더 깨끗합니다 map.

var a = [1,2,3],
    b = a.map(function(el) {
        return el+1;
    });

또한 map새 어레이를 만들기 때문에 필요한 모든 것이 반복 일 때, 특히 대형 어레이의 경우 적어도 약간의 성능 / 메모리 적중이 발생할 수 있습니다. http://jsperf.com/map-foreach를 참조하십시오.

이러한 함수를 사용하려는 이유는 자바 스크립트에서 배열 조작을해야 할 때마다 유용합니다. (브라우저 환경에서 자바 스크립트에 대해 이야기하고 있더라도) 거의 항상 코드에 직접 적지 않은 배열에 액세스하고 있습니다. 페이지의 DOM 요소 배열, AJAX 요청에서 가져온 데이터 또는 사용자가 양식에 입력 한 데이터를 처리 할 수 ​​있습니다. 한 가지 일반적인 예는 외부 API에서 데이터를 가져 오는 것입니다. 여기서 map데이터를 원하는 형식으로 변환하고 forEach사용자에게 표시하기 위해 새 배열을 반복 하는 데 사용할 수 있습니다.