[Traversing] JQ - map() 메서드 - 일치하는 요소집합의 각 요소를 함수를 통해 전달하여 반환값 포함하는 새 jQuery 객체 생성 (= map메서드 = 맵메서드) ※ 배열 매핑

1. map() 예제 - 각 요소의 함수 반환값 이용해 새 jQuery 객체 생성
2. map() 정의
3. map() 구문
4. map() 예제 - 각 배열값에 4를 더해 새 배열 생성
5. map() 예제 - 배열값이 양수면 1 더하고, 그렇지 않으면 null 반환해 새 배열 생성
6. map() 예제 - 원래 값과 그 값에 1을 더한 값을 반환해 새 배열 생성
7. map() 예제 - 객체 값을 2배로 늘려 새 배열 생성
8. map() 예제 - 객체 이름만으로 새 배열 생성
9. map() 예제 - 각 배열값의 제곱값으로 새 배열 생성
10. map() 예제 - 50보다 크면 45빼고, 그렇지 않으면 null 반환해 새 배열 생성
11. map() 예제 - 각 배열값에서 45를 뺀 값과 색인번호로 구성된 새 배열 생성
12. 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
console.log(arr); // ["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 ) => Object
• JQ 1.6 : Function( Object propertyOfObject, String key ) => Object

 

---

[반환값]

 

콜백함수가 적용된 배열 반환.  

 

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() 함수 이용