자바 스크립트 : .forEach ()와 .map ()의 차이점

이런 주제가 많았다는 것을 알고 있습니다. 그리고 기본 사항을 알고 있습니다. .forEach()원래 어레이와 .map()새 어레이에서 작동합니다 .

나의 경우에는:

function practice (i){
    return i+1;
};

var a = [ -1, 0, 1, 2, 3, 4, 5 ];
var b = [ 0 ];
var c = [ 0 ];
console.log(a);
b = a.forEach(practice);
console.log("=====");
console.log(a);
console.log(b);
c = a.map(practice);
console.log("=====");
console.log(a);
console.log(c);

그리고 이것은 출력입니다.

[ -1, 0, 1, 2, 3, 4, 5 ]
=====
[ -1, 0, 1, 2, 3, 4, 5 ]
undefined
=====
[ -1, 0, 1, 2, 3, 4, 5 ]
[ 0, 1, 2, 3, 4, 5, 6 ]

사용하는 이유를 이해할 수없는 practice변화의 가치 b에 undefined.
이 질문이 어리석은 질문이라면 미안하지만이 언어가 상당히 새롭고 지금까지 찾은 답변이 만족스럽지 않았습니다.

그들은 하나가 아니며 동일하지 않습니다. 차이점을 설명하겠습니다.

forEach: 목록을 반복하고 각 목록 구성원에 부작용이있는 일부 작업을 적용합니다 (예 : 모든 목록 항목을 데이터베이스에 저장).

map: 목록을 반복하고 해당 목록의 각 멤버를 변환하고 변환 된 멤버와 동일한 크기의 다른 목록을 반환합니다 (예 : 문자열 목록을 대문자로 변환).

참고 문헌

Array.prototype.forEach ()-JavaScript | MDN

Array.prototype.map ()-JavaScript | MDN

• Array.forEach "배열 요소 당 한 번씩 제공된 함수를 실행합니다."

• Array.map "이 배열의 모든 요소에 대해 제공된 함수를 호출 한 결과로 새 배열을 만듭니다."

그래서, forEach 실제로 아무것도 반환하지 않습니다. 각 배열 요소에 대한 함수를 호출하면 완료됩니다. 따라서 호출 된 함수 내에서 반환하는 모든 것은 단순히 버려집니다.

반면에는 map각 배열 요소에 대해 비슷하게 함수를 호출하지만 반환 값을 버리는 대신이를 캡처하고 해당 반환 값의 새 배열을 만듭니다.

이것은 또한 사용하는 곳 어디에서나 사용할 수 있지만 여전히 그렇게해서는 안되므로 목적없이 반환 값을 수집하지 마십시오. 필요하지 않은 경우 수집하지 않는 것이 더 효율적입니다.mapforEach

+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| | foreach | 지도 |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| 기능 | 각각에 대해 주어진 작업을 수행 | 주어진 "변환"을 수행 |
| | 배열의 요소 | 각 요소의 "복사"|
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| 반환 값 | 정의되지 않은 반환 | 변형 된 새 배열을 반환합니다.
| | | 원래 배열을 남기는 요소 |
| | | 변경되지 않은 |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| 선호하는 | 비 변환 수행 | 출력을 포함하는 배열 얻기 |
| 사용 시나리오 | 각 요소에 대한 처리. | 각 요소에 대해 수행되는 일부 처리 |
| 및 예 | | 배열의. |
| | 예를 들어 모든 요소를 ​​| |
| | 데이터베이스 | 예를 들어, |
| | | 의 각 문자열 길이 |
| | | 배열 |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +

알아야 할 주요 차이점 .map()은 새로운 배열을 반환하지만 .forEach()그렇지 않은 경우입니다. 이것이 출력에서 ​​그 차이를 보는 이유입니다. .forEach()배열의 모든 값에서 작동합니다.

읽어보세요 :

• Array.prototype.forEach()-자바 스크립트 | MDN
• Array.prototype.map()-자바 스크립트 | MDN

다음을 확인해보십시오 Array.prototype.every().--JavaScript | MDN

forEach : Array의 요소에 대한 작업을 수행하려는 경우 for 루프를 사용하는 것과 동일합니다. 이 방법의 결과는 우리에게 출력 구매를 제공하지 않습니다.

map : 배열의 요소에 대해 작업을 수행하고 작업의 출력을 Array에 저장하려는 경우. 이는 각 반복 후 결과를 반환하는 함수 내의 for 루프와 유사합니다.

도움이 되었기를 바랍니다.

차이점은 그들이 반환하는 것에 있습니다. 실행 후 :

arr.map()

처리 된 함수에서 생성 된 요소의 배열을 반환합니다. 동안:

arr.forEach()

undefined를 반환합니다.

성능 분석 For 루프는 배열의 요소 수가 증가함에 따라 map 또는 foreach보다 빠르게 수행됩니다.

let array = [];
for (var i = 0; i < 20000000; i++) {
  array.push(i)
}

console.time('map');
array.map(num => {
  return num * 4;
});
console.timeEnd('map');


console.time('forEach');
array.forEach((num, index) => {
  return array[index] = num * 4;
});
console.timeEnd('forEach');

console.time('for');
for (i = 0; i < array.length; i++) {
  array[i] = array[i] * 2;

}
console.timeEnd('for');

Foreach와지도의 차이점 :

지도() : map을 사용하면 map은 메인 배열을 반복하여 새로운 배열을 반환 할 수 있습니다.

Foreach () : Foreach를 사용하면 각 can 반복 주 배열에 대해 아무것도 반환 할 수 없습니다.

useFul 링크 : 차이 를 이해하려면이 링크를 사용 하십시오 .

https://codeburst.io/javascript-map-vs-foreach-f38111822c0f

한 가지 지적 할 점은 foreach는 초기화되지 않은 값을 건너 뛰는 반면 map은 그렇지 않다는 것입니다.

var arr = [1, , 3];

arr.forEach(function(element) {
    console.log(element);
});
//Expected output: 1 3

console.log(arr.map(element => element));
//Expected output: [1, undefined, 3];

forEach ()와 map ()의 차이점

forEach () 는 요소를 반복합니다. 반환 값을 버리고 항상 undefined를 반환합니다.이 메서드의 결과는 출력을 제공하지 않습니다.

지도()요소를 통한 루프는 메모리를 할당하고 기본 배열을 반복하여 반환 값을 저장합니다.

예:

   var numbers = [2,3,5,7];

   var forEachNum = numbers.forEach(function(number){
      return number
   })
   console.log(forEachNum)
   //output undefined

   var mapNum = numbers.map(function(number){
      return number
   })
   console.log(mapNum)
   //output [2,3,5,7]

map ()이 forEach ()보다 빠릅니다.

forEach는 그렇지 않은 반면 Map은 암시 적으로 반환합니다.

이것이 JSX 애플리케이션을 코딩 할 때 거의 항상 forEach 대신 맵을 사용 하여 React에 콘텐츠를 표시 하는 이유 입니다.

각각() :

반환 값 : 정의되지 않음

originalArray : 메서드 호출 후 수정 됨

map () :

반환 값 : 호출 배열의 모든 요소에 대해 제공된 함수를 호출 한 결과로 채워진 새 배열

originalArray : 메서드 호출 후 수정되지 않음