• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
basic JQ - 제이쿼리 입문
basic JQ - 선행지식 / 포함요소
basic JQ - 시작 (= 버전 + 다운 + 설치 + 외부링크) (jQuery, down, CDN)
basic JQ - syntax ★ - 기본구문 (= 최적작동시점) + (즉시호출/즉시작동/즉시실행) 구문 (= IIF… 2
Selector JQ - selector ★★★★★ - 선택자 (= 제어할 요소선택) ※ this선택자 (=디스선택자)
Event JQ - event ★ - 이벤트 (= 메서드실행 촉발사건) ※ e 매개변수를 명시적으로 전달해야 하는 이유
Event JQ - $(document).ready() 메서드 ★ - 문서로드완료후 실행 (= ready메서드 = 다…
Event JQ - click() 메서드 ★ - click 이벤트발생/함수실행. (= click메서드 = 클릭 메서드…
Event JQ - dblclick() 메서드 ★ - dblclick 이벤트발생/함수실행. (= dblclick메서드 …
Event JQ - mouseenter() 메서드 ★★★ - mouseenter 이벤트발생/함수실행. (= mousee…
Event JQ - mouseleave() 메서드 ★ - mouseleave 이벤트발생/함수실행 (= mouseleav…
Event JQ - mousedown() 메서드 - mousedown 이벤트발생/함수실행. (= mousedown메서…
Event JQ - mouseup() 메서드 - mouseup 이벤트발생/함수실행. (= mouseup메서드 = 마우스…
Event JQ - hover() 메서드 ★ - hover 이벤트발생/함수실행. (= hover메서드 = 허버 메서드)
Event JQ - blur() 메서드 ★ - 포커스 해제/제거(= blur메서드 = 블러메서드) ※ 포커스 시 아웃…
Event JQ - on() 메서드 ★★★★★ - 이벤트핸들러 부착 (= 여러이벤트・여러메서드 함께실행 = 이벤트부착…
Effect JQ - Hide/Show - hide() / show() / toggle() 메서드 ★ - 숨기기/보이기…
Effect JQ - Fade (페이드) ★ - fadeIn() / fadeOut() / fadeToggle() / fa…
Effect JQ - slideDown() / slideUp() / slideToggle() 메서드 ★ - 슬라이드메서드…
1/15
목록
찾아주셔서 감사합니다. Since 2012