jQuery.map()
원문 링크 
http://api.jquery.com/jQuery.map/
개요 : 배열의 모든 요소(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 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery.parseXML(), XML 문서를 파싱 (0) | 2012.07.02 |
|---|---|
| jQuery.parseJSON(), JSON 문자열을 JavaScript object로 변환 (0) | 2012.07.02 |
| jQuery.now(), 현재 시간을 number로 반환 (2) | 2012.07.02 |
| jQuery.merge(), 두 개의 배열을 합치기 (1) | 2012.07.02 |
| jQuery.makeArray(), 자바스크립트 배열로 변환 (0) | 2012.07.02 |
| jQuery.isXMLDoc(), XML 문서인지 확인 (0) | 2012.07.02 |
| jQuery.isWindow(), Window 인지 확인 (0) | 2012.07.02 |
| jQuery.isPlainObject(), object인지 확인 (0) | 2012.07.02 |