'2018/04/29'에 해당되는 글 3건

each 메소드와 map 메소드의 차이점을 알아보자.

위 예제를  실행해보면 결과에 차이가 난다.

$.map([], callback(elementOfArray, indexInArray))
$.each([], callback(indexInArray, element))

callback function 의 index, element(item) 위치가 서로 반대다.

each 메소드는 index 가 먼저고, 그 다음에 element 가 온다.

each 메소드

- jQuery 객체/배열의 수 만큼 반복하고, 선택된 요소들에 함수를 실행한다.

- 배열과 length 속성을 갖는 배열과 비슷한 객체들을 index를 기준으로 반복할 수 있다.

- jQuery 유틸리티 메소드 : .each(object, function(index, element) ) { 실행 함수 }

- jQuery 일반 메소드 : $(selector).each(function(index, item){ 실행함수 })

- jQuery 객체들을 위한 반복 로직을 처리하기 이해 만들어졌다.

- each 메소드에서 this 는 current element 를 가리킨다.

each 메소드는 원래의 배열을 반환(returns the original array) 하지만,

map 메소드는 제공된 배열 데이터를 변환시켜 다시 새로운 배열 객체를 반환(returns a new array)한다.

map 메소드를 과다 사용하면 많은 메모리를 낭비할 수 있다.

$(selector).each(...) 는 selector 아이템으로 반복 처리한다.
$.map() 메소드는 selector 를 사용하지 않는다.

실행결과는

each 메소드는 조건이 false를 만나면 loop 를 break 하여 결과는 1, 2 만 나온다.

map 메소드는 조건만 skip 하여 결과는 1, 2, 4, 5 가 나온다.

jQuery map()함수는 배열 데이터를 변환시켜 새로운 배열 객체를 만든다.

jQuery 1.6 부터 Object 도 지원한다.

$.map() 함수를 사용하기 위해서는 반드시 완전한 배열로 바꿔줘야 한다.

<input type="text" name="item[1]" class="item" value="1">
<input type="text" name="item[2]" class="item" value="50">
<input type="text" name="item[3]" class="item" value="12">

jQuery.map(array, callback(elementOfArray, indexInArray) )
- array : 변환할 배열
- callback(elementOfArray, indexInArray) 모든 요소에 대해 실행될 함수.
  첫번째 인자는 배열 요소(item),
  두번째 인자는 배열 인덱스

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

아래 코드는 위와 같은 결과를 얻어내는 jQeury 함수와 스타일 시트다.

모양을 좀 더 미려하게 보여주는 CSS 코드라고 보면 된다.

ㅇ 배열
   - 배열은 여러 개의 변수를 한곳에 저장할 수 있는 자료형이다.
   - 자바스크립트에서는 문자열과 숫자, 불, 함수, 객체와 정의되지 않은 자료형까지 총 6가지의 자료형이 존재
   - 배열은 이중 객체의 일종으로, 대괄호([])를 이용해서 생성
   - 배열 안에 입력된 값을 배열 요소라고 부른다.
   - alert(array[1]); // 배열 기호 안에 들어간 숫자를 인덱스(Index)라고 부른다.
   - for (var i in array) 은 for (var i = 0; i < array.length; i++) 와 같은 의미

ㅇ 배열 선언 방법

    - 배열 리터럴 : 대괄호([]) 내에 데이터를 나열하여 배열을 선언하고, 데이터를 할당할 수 있다.

       var arr = [데이터1, 데이터2, 데이터3, ...., 데이터 n];

    - 배열 객체 :

       var arr = new Array(); // 배열 개수 미지정 객체배열 생성

       arr[0] = 2; arr[1] = "one"; arr[2] = 5;

       var arr = new Array(3); // 배열 개수 지정

       arr[0] = 2; arr[1] = "one"; arr[2] = 5;

       var arr = new Array(1, 2, 3, 4, 5); // 배열을 선언함과 동시에 데이터를 배열에 할당

    - 다차원 배열 선언 : 자바스크립트는 기본적으로 다차원 배열을 지원하지 않는다.

      배열안에 배열을 넣는 방식으로 사용은 가능하다.

       var arr = new Array();

       var arr[0] = new Array();

       var arr[0][0] = new Array();

ㅇ 배열 객체의 메소드 및 속성

ㅇ 배열 활용