목차
map() 예제 - 각 요소의 함수 반환값 이용해 새 jQuery 객체 생성 map() 정의 map() 구문 map() 예제 - 각 배열값에 4를 더해 새 배열 생성 map() 예제 - 배열값이 양수면 1 더하고, 그렇지 않으면 null 반환해 새 배열 생성 map() 예제 - 원래 값과 그 값에 1을 더한 값을 반환해 새 배열 생성 map() 예제 - 객체 값을 2배로 늘려 새 배열 생성 map() 예제 - 객체 이름만으로 새 배열 생성 map() 예제 - 각 배열값의 제곱값으로 새 배열 생성 map() 예제 - 50보다 크면 45빼고, 그렇지 않으면 null 반환해 새 배열 생성 map() 예제 - 각 배열값에서 45를 뺀 값과 색인번호로 구성된 새 배열 생성 map() 예제 - 2차원 배열의 일부 요소를 1차원 배열로 가져오기
map() 예제 - 각 요소의 함수 반환값 이용해 새 jQuery 객체 생성
<style>
.hz1 {color: blue;}
.hz2 {color: green;}
.hz3 {color: red;}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<div class='hz1'></div>
<div class='hz2'></div>
<div class='hz3'></div>
<script>
var arr = [ "a", "b", "c", "d", "e" ];
// .hz1// ["a", "b", "c", "d", "e"]
$( ".hz1" ).text( arr.join ( ", " ) ); // a, b, c, d, e
// .hz2
arr = jQuery.map( arr, function( n, i ) {
return ( n.toUpperCase () + i );
});
console.log(arr); // ["A0", "B1", "C2", "D3", "E4"]
$( ".hz2" ).text( arr.join( ", " ) ); // A0, B1, C2, D3, E4
// .hz3
arr = jQuery.map( arr, function( a ) {
return a + a;
});
console.log(arr); // ["A0A0", "B1B1", "C2C2", "D3D3", "E4E4"]
$( ".hz3" ).text( arr.join( ", " ) ); // A0A0, B1B1, C2C2, D3D3, E4E4
</script>
결과보기
map() 정의
객체의 각 요소를 콜백함수로 가공해 새 객체 반환.
JQ 1.0에서는 배열만 가능.
JQ 1.6부터는 객체도 가능.
map() 구문
jQuery.map(array, callback )
또는,$.map( array, callback )
[매개변수]
array
필수. 기존 객체.
JQ ver 1.0 +: 배열
JQ ver 1.6 +: 객체
callback
필수. 기존 객체를 가공할 콜백함수
JQ 1.0 : Function( Object elementOfArray, Integer indexInArray )
JQ 1.6 : Function( Object propertyOfObject, String key )
[반환값]
콜백함수가 적용된 배열 반환.
map() 예제 - 각 배열값에 4를 더해 새 배열 생성
$.map( [ 0, 1, 2 ], function( n ) {
return n + 4;
} );
반환값: [4, 5, 6]
map() 예제 - 배열값이 양수면 1 더하고, 그렇지 않으면 null 반환해 새 배열 생성
$.map( [ 0, 1, 2 ], function( n ) {
return n > 0 ? n + 1 : null;
} );
반환값: [ 2, 3 ]
map() 예제 - 원래 값과 그 값에 1을 더한 값을 반환해 새 배열 생성
$.map( [ 0, 1, 2 ], function( n ) {
return [ n, n + 1 ];
} );
반환값: [ 0, 1, 1, 2, 2, 3 ]
map() 예제 - 객체 값을 2배로 늘려 새 배열 생성
var dimensions = { width: 10, height: 15, length: 20 };
dimensions = $.map( dimensions, function( value, index ) {
return value * 2;
} );
반환값: [ 20, 30, 40 ]
map() 예제 - 객체 이름만으로 새 배열 생성
var dimensions = { width: 10, height: 15, length: 20 };
var keys = $.map( dimensions, function( value, key ) {
return key;
} );
반환값: [ "width", "height", "length" ]
map() 예제 - 각 배열값의 제곱값으로 새 배열 생성
$.map( [ 0, 1, 2, 3 ], function( a ) {
return a * a;
} );
반환값: [ 0, 1, 4, 9 ]
map() 예제 - 50보다 크면 45빼고, 그렇지 않으면 null 반환해 새 배열 생성
$.map( [ 0, 1, 52, 97 ], function( a ) {
return (a > 50 ? a - 45 : null);
} );
반환값: [ 7, 52 ]
map() 예제 - 각 배열값에서 45를 뺀 값과 색인번호로 구성된 새 배열 생성
var array = [ 0, 1, 52, 97 ];
array = $.map( array, function( a, index ) {
return [ a - 45, index ];
} );
반화값: [ -45, 0, -44, 1, 7, 2, 52, 3]
map() 예제 - 2차원 배열의 일부 요소를 1차원 배열로 가져오기
var arr = [
['HTML','뼈대','https://homzzang.com/b/html'],
['CSS','디자인','https://homzzang.com/b/css'],
['JS','기능','https://homzzang.com/b/js']
]
var arrName = [];
arr.map(val => arrName.push (val[0]));
console.log(arrName);
반환값: ["HTML","CSS","JS"]
Phillips 님 (220209) https://sir.kr/qa/448771
PS. PHP 경우, array_column() 함수 이용
