JavaScript 배열 처리를 위한 map() 메소드 활용 분석

이 글에서는 배열 데이터를 처리하기 위한 map() 메서드의 사용법과 map() 메서드와 forEach 문의 차이점을 소개합니다. 아래에서 구체적인 내용을 살펴보겠습니다.

먼저 map()

var array = [ 数组数据 ];
array.map(回调函数);

Map의 기본 구문을 살펴보겠습니다. Map은 각 요소에 대해 "콜백 함수"를 실행하고 그 결과를 새로운 결과로 반환할 수 있는 배열 데이터에 대한 메서드입니다. 정렬.

즉, 이 함수에 실행할 프로세스를 작성하면 배열의 각 요소에 대해 어떤 작업이라도 수행할 수 있습니다!

맵 메소드를 사용하여 배열을 반복하는 방법은 무엇입니까?

다음 예는 숫자 데이터가 포함된 배열에 map 메소드를 사용한 예입니다

var items = [1,2,3,4,5];
 
var result = items.map(function( value ) {
    return value * 2;
});
console.log( result );

출력 결과는 다음과 같습니다

이 예에서는 값 배열에 대해 ​​​​" 1~5"에서는 콜백 함수를 사용하여 각 요소를 실행하고 두 번 처리합니다.

이 때문에 "result"의 반환 값으로 결과가 2배가 되는 배열을 할당하여 출력 결과가 자신의 2배가 되는 것을 볼 수 있습니다.

처음에는 for문이나 while문을 이용하여 루프를 작성하는 것이 전부였지만, map을 이용하면 아주 간단한 프로그램으로 구현할 수 있어서 매우 편리합니다!

JavaScript 배열 처리를 위한 map() 메소드 활용 분석에는 map() 메서드와 유사한 Reduce() 메서드도 있습니다. Reduce() 메서드에 대해서는 다음 문서를 참조하세요. JavaScript 배열 처리를 위한 map() 메소드 활용 분석에서 Reduce를 사용하는 방법

reduce()에 대해 및 map() 메서드의 차이점은 다음 문서를 참조하세요. JavaScript 배열 처리를 위한 map() 메소드 활용 분석에서 map()과 Reduce()의 차이점은 무엇인가요?

map()과 forEach 문의 차이점은 무엇인가요?

map()은 forEach 문과 유사하며 동일한 방식으로 배열에서 작동할 수 있습니다.

구체적인 예를 살펴보겠습니다

//forEach
[1,2,3].forEach(function( value ) {
   console.log( value );
});
 
 
//map
[1,2,3].map(function( value ) {
    console.log( value );
});

출력 결과는 동일합니다

이 예에서 볼 수 있듯이 forEach와 map으로 얻은 결과는 동일합니다.

그럼 차이점은 무엇인가요? 가장 큰 차이점은 반환 값이 있는지 여부입니다.

즉, forEach는 단지 실행 메소드일 뿐이고, map은 실행 후 그 결과를 배열 데이터로 반환합니다.

forEach의 예시를 자세히 살펴보겠습니다.

var result = [1,2,3].forEach(function( value ) {
 
    return value * 2;
 
});
 
console.log( result );

forEach의 반환 값을 볼 수 없습니다.

map:

var result = [1,2,3].map(function( value ) {
 
    return value * 2;
 
});
 
console.log( result );

실행 결과로 배열 데이터를 반환할 수 있습니다.

map 콜백 함수

전에 콜백 함수에는 매개변수가 하나만 있는 것을 보았지만 실제로는 세 개의 매개변수와 함께 사용할 수 있습니다!

数组数据.map( function( value, index, array ) {

});

var items = [1,2,3,4,5,6,7,8,9];
var result = items.map( function( value, index, array ) {
    if( index % 2 !== 0 ) {
        return value * 2;
    }
    else {
        return value;
    }
});
console.log( result );

또한 map에는 원본 배열 데이터를 변경하지 않는 기능이 있는데 세 번째 매개변수 배열을 사용하면 원본 데이터도 변경할 수 있습니다!

var items = [1,2,3,4,5,6,7,8,9];
 
items.map( function( value, index, array ) {
 
    array[index] = value * 2;
 
});
 
console.log( items );

과거에는 "map"의 첫 번째 매개변수로 "콜백 함수"를 지정했지만 실제로는 두 번째 매개변수로 "객체"를 지정할 수 있습니다!

var array = [ 数组数据 ]; 
//指定对象为第2个参数
array.map( 回调函数, 对象 );

var foodList = {
  '苹果': 45,
  '哈密瓜': 50,
  '猕猴桃': 60,
  '草莓': 40
};
数组.map( function( value ) {
 
}, foodList );

var foodList = {
  '苹果': 45,
  '哈密瓜': 50,
  '猕猴桃': 60,
  '草莓': 40
};
var order = ['草莓', '猕猴桃'];
var result = order.map( function( value, index, array ) {
    return this[value];
 
}, foodList );
console.log( result );

이 예에서는 키가 배열 순서로 설정되어 있는 것을 볼 수 있으며, 이로부터 객체가 소유한 키와 일치하는 "가격"을 얻어 배열로 반환합니다.

위 내용은 JavaScript 배열 처리를 위한 map() 메소드 활용 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!