ProgrammingjQuery

(jQuery)제이쿼리 map 함수 사용법

$.map(), .map(), .text(), [object Object], jQuery.map(), jQuery.text(), jquery, jquery map, makeArray, map 객체, map 메소드, map 배열, 맵, 맵 함수, 새로운 배열요소로 변경, 제이쿼리 맵, 제이쿼리 텍스트

##(jQuery) 제이쿼리 맵

jQuery.map( array, callback )
Translate all items in an array or object to new array of items.

제이쿼리.맵(배열, 콜백함수)
객체나 배열에 있는 모든 아이템들을 새로운 배열로 만들때 사용합니다. 이미 주어진 배열을 변경하기 위해 사용합니다.

via GIPHY

간단하게 말해 주어진 배열을 원하는대로 변경할 수 있습니다.
예시가 있는 경우가 더욱 이해하기 편합니다. 함께 예시를 확인해 보시죠.

위에서 보듯이 .map()을 사용하기 전에 $.makeArray()를 사용해 오류를 막을 수 있습니다.
가짜 배열 fakeArray 을 사용한다면 Uncaught TypeError: fakeArray.join is not a function 오류가 납니다.

배열 .map() Example

1
2
3
4
5
$.map( [ 0, 1, 2 ], function( n ) {
  return n + 4;
});

//결과는 [4, 5, 6]
1
2
3
4
5
6
$.map( [ 0, 1, 2 ], function( n ) {
  return n > 0 ? n + 1 : null;
});

//결과는 [ 2, 3 ]
//삼항 연산자 `n > 0 ? n + 1 : null`는 n의 값이 0보다 크면 n+1 아니면 null이 나옵니다.

삼항 연산자를 자세히 알고 싶다면 (JavaScript) 삼항 연산자 Ternary Operator를 클릭하여 확인하세요.

1
2
3
4
5
6
$.map( [ 0, 1, 52, 97 ], function( a ) {
  return (a > 50 ? a - 45 : null);
});

//결과는 [ 7, 52 ]
//삼항 연산자 `a > 50 ? a - 45 : null`는 a의 값이 50보다 크면 a-45 아니면 null이 나옵니다.
1
2
3
4
5
$.map( [ 0, 1, 2 ], function( n ) {
    return [ n, n + 1 ];
});

//결과는 [ 0, 1, 1, 2, 2, 3 ]
1
2
3
4
5
6
7
var array = [ 0, 1, 52, 97 ];
array = $.map( array, function( a, index ) {
  return [ a - 45, index ];
});

//결과는 [ -45, 0, -44, 1, 7, 2, 52, 3]
//인덱스는 제로 베이스입니다. ('1'이 아닌 '0'부터 시작 '0', '1', '2', '3', ...)

객체 .map() Example

1
2
3
4
5
6
7
var dimensions = { width: 10, height: 15, length: 20 };
dimensions = $.map( dimensions, function( value, index ) {
  return value * 2;
});

//결과는 [ 20, 30, 40 ]
//여기에서 index는 숫자가 아닌 [ "width", "height", "length" ]가 출력됩니다.
1
2
3
4
5
6
var dimensions = { width: 10, height: 15, length: 20 };
var keys = $.map( dimensions, function( value, key ) {
  return key;
});

//결과는 [ "width", "height", "length" ]

Reference

Share