jQuery.map(), 새로운 배열 요소로 변경

jQuery.map()

원문 링크 http://api.jquery.com/jQuery.map/

jQuery.map( array, callback(elementOfArray, indexInArray) )Returns : Array

개요 : 배열의 모든 요소(items)를 새로운 배열 요소로 변경합니다.

  • jQuery.map( array, callback(elementOfArray, indexInArray) )
  • array 변환할 배열
  • callback(elementOfArray, indexInArray) 모든 요소에 대해 실행될 함수. 첫번째 인자는 배열 요소(item), 두번째 인자는 배열 인덱스.
  • jQuery.map( arrayOrObject, callback( value, indexOrKey ) )
  • arrayOrObject 변환할 배열 또는 오브젝트.
  • callback( value, indexOrKey ) 모든 요소에 대해 실행될 함수. 첫번째 인자는 value, 두번째 인자는 배열 또는 오브젝트의 인덱스 또는 key.

$.map() 함수는 배열의 각 아이템에 대한 함수이고 새로운 배열 요소를 적용시키는 함수입니다. jQuery 1.6 이전 버전의, $.map()은 단지 arrays only 였습니다. jQuery 1.6 부터 오브젝트도 지원합니다.

Array-like objects 는 — .length 프로퍼티와 .length - 1 index 부터 시작되는 value를 가진 — $.map() 함수에서 사용하기 위해 반드시 완전한 배열로 바꿔줘야 합니다. jQuery의 함수인 $.makeArray() 함수를 이용하면 원하는 결과를 얻을 수 있습니다.

// The following object masquerades as an array.
var fakeArray = {"length": 1, 0: "Addy", 1: "Subtracty"};

// Therefore, convert it to a real array
var realArray = $.makeArray( fakeArray )

// Now it can be used reliably with $.map()
$.map( realArray, function(val, i) {
  // do something 
});

변환 함수는 배열 또는 오브젝트의 최상위 요소부터 호출되기 시작하고 두개의 인자를 가집니다. 배열이냐 객체이냐에 따라 index와 key로 나뉩니다.

이 함수는 아래와 같은 형태를 반환합니다.

  • 변환된 value
  • null 또는 undefined 이면 아이템은 remove 됩니다.
  • an array of values, which will be flattened into the full array

예 제  
.map() 함수 사용법

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; }
  p { color:green; margin:0; }
  span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div></div>
  <p></p>
  <span></span>
  
<script>
    var arr = [ "a", "b", "c", "d", "e" ];
    $("div").text(arr.join(", "));

    arr = jQuery.map(arr, function(n, i){
      return (n.toUpperCase() + i);
    });
    $("p").text(arr.join(", "));

    arr = jQuery.map(arr, function (a) { 
      return a + a; 
    });
    $("span").text(arr.join(", "));

</script>

</body>
</html>

미리보기

 

예 제   원본 배열 요소에 4를 더하기

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

 //Result : [4, 5, 6] 

 

예 제   zero 보다 큰 요소에 1을 더하고 그렇지 않다면 제거

$.map( [0,1,2], function(n){
   return n > 0 ? n + 1 : null;
 });

 //Result : [2, 3]

 

예 제   새로운 배열을 만들어 내는데, 원본값과 원본값에 1을 더한 요소를 추가합니다.

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

 //Result : [0, 1, 1, 2, 2, 3]

 

예 제   원본 오브젝트의 value에 2를 곱합니다.

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

 //Result : [20, 30, 40]

 

예 제   오브젝트의 key를 출력

var dimensions = { width: 10, height: 15, length: 20 },
    keys = $.map( dimensions, function( value, index ) {
      return index;
    });

 //Result : ["width", "height", "length"]

 

예 제   요소 값을 제곱합니다.

$.map( [0,1,2,3], function (a) { 
  return a * a; 
});

 //Result : [0, 1, 4, 9]

 

예 제   50보다 작은 값은 제거하고 크다면 45를 빼기

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

 //Result : [7, 52]

 

예 제   45를 뺀 결과와 원본 배열의 인덱스를 새로운 배열 요소로 구성합니다.

var array = [0, 1, 52, 97];
array = $.map(array, function(a, index) {
  return [a - 45, index];
});

 //Result : [-45, 0, -44, 1, 7, 2, 52, 3]

 

특이합니다. 몇몇 예제는 좀 오버이긴 한데. 배열을 다루는 획기적인 방법이네요. 그런데 이런 식으로 사용하려면 많은 경험이 있어야 할 듯.....

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.

Comment List

Write Comment