3.5 Array 클래스

Array 클래스

Array클래스에는 배열을 만드는 기능, 추가, 삭제, 찾기 등의 기능이 담겨 있습니다.

 

프로퍼티 목록

length 배열의 크기를 알수 있습니다.

 

메서드 목록

concat() 배열에 다른 배열이나 값을 연결해 새 배열을 만들어 변환

indexOf() 배열의 요소의 인덱스 값을 변환

pop() 마지막 배열 요소를 반환

push() 새로운 배열 요소를 마지막 배열 위치에 추가

sort() 배열 요소를 내림차순 또는 오름차순으로 정렬

....

 

- 배열 만들기

- 배열 요소 개수 알아내기

- 특정 위치의 배열 요소 접근하기

- 배열을 문자열로 만들기

- 문자열을 배열로 만들기

- 특정 위치에 배열 요소 추가

- 특정 위치의 배열 요소 삭제

- 정렬하기

 

-배열 만들기

리터럴 방식

var menus = ["menu1","menu2","menu3"];

 

클래스 방식

var users = new Array("menu1","menu2","menu3");

 

-배열 요소 개수 알아내기

length 프로퍼티를 이용하면 배열 요소 개수를 쉽게 알아낼 수 있습니다.

///////////////users 배열 요소 개수 알아내기/////////////////////

var users = ["user1","user2","user3"];

alert(users.length);

///////////////////////////////////////////////////////////////////////

-특정 위치의 배열 요소 접근하기

 

var 변수 = 배열변수[인덱스]

 

var menuItems = ["menu1","menu2","menu3"];

 

for(var i = 0; i<menuItem.legth;i++)

  var menuItem = menuItems[i];

 

 document.write(i+" = " + menuItem, "<br>");

}

//////////////////////////////////////////////////////////////////

-배열을 문자열로 만들기

 

var menus = 배열.join([separator]);

 

////////////////menuItems의 배열 요소를 문자열로 만들어 실행화면 출력//////////////

// menu1-menu2-menu3

 

var menuItems = ["menu1","menu2","menu3"];

var result = menuItems.join("-");

console.log(result);

//////////////////////////////////////////////////////////////////////////////////////////

-문자열을 배열로 만들기

 

var aryData = 문자열.split(separator);

 

///////////////////////////////////////////////////////////////////////////////////////

$(document).readty(function(){

  var $menu = $(".menu");

  var menuData = "menu1, menu2, menu3";

 

  var menuItems = menuData.split(",);

 

  for(var i = 0 ; i < menuItems.length;i++){

  // i번째 배열 요소를 메뉴 아이템으로 만들기

  var newMenuItem = "<li>" + menuItems[i] + "</li>";

  //동적으로 메뉴 아이템 추가

  $menu.append(newMenuItem);

  }

})

////////////////////////////////////////////////////////////////////////

-특정 위치에 배열요소 추가

 

배열 마지막 위치에 배열 요소 추가하기

var result = 배열.push(element[,element]);

 

////////////////////////////////////////////////////////////////////////

var menuItems = ["menu1","menu2","menu3"];

console.log(" 실행 전 : " + menuItems.join(","));

menuItems.push("new");

console.log(" 실행 후: " + menuItems.join(","));

////////////////////////////////////////////////////////////////////////

배열 첫 번째 위치에 배열 요소 추가하기

 

var result = 배열.unshift(element[,element]);

////////////////////////////////////////////////////////////////////////

var menuItems = ["menu1","menu2","menu3"];

console.log(" 실행 전 : " + menuItems.join(","));

menuItems.unshift("new");

console.log(" 실행 후: " + menuItems.join(","));

/////////////////////////////////////////////////////////////////////////

배열 N번째 위치에 배열 요소 추가 하기

 

var result = 배열.splice(start/*추가 삭제할 배열 요소의 시작위치*/

, deleteCount/*start부터 시작하여 삭제할 배열 요소의 개수*/

[, element]/*추가할 요소*/

);

 

////////////////////////////////////////////////////////////////////////

var menuItems = ["menu1","menu2","menu3"];

console.log(" 실행 전 : " + menuItems.join(","));

menuItems.splice(2,0,"new");

console.log(" 실행 후: " + menuItems.join(","));

///////////////////////////////////////////////////////////////////////

-특정 위치의 배열 요소 삭제

 

첫 번째 요소 삭제하기

 

var result = 배열.shift();

///////////////////////////////////////////////////////////////////

var menuItems = ["menu1","menu2","menu3"];

console.log(" 실행 전 : " + menuItems.join(","));

menuItems.shift();

console.log(" 실행 후: " + menuItems.join(","));

//////////////////////////////////////////////////////////////////

마지막 번째 요소 삭제하기

 

var result = 배열.pop();

////////////////////////////////////////////////////////////////

var menuItems = ["menu1","menu2","menu3"];

console.log(" 실행 전 : " + menuItems.join(","));

menuItems.pop();

console.log(" 실행 후: " + menuItems.join(","));

///////////////////////////////////////////////////////////////

N번째 배열 요소 삭제하기

 

splice() 메서드를 이용

////////////////////////////////////////////////////////////

var menuItems = ["menu1","menu2","menu3"];

console.log(" 실행 전 : " + menuItems.join(","));

menuItems.splice(2,1);

console.log(" 실행 후: " + menuItems.join(","));

////////////////////////////////////////////////////////////

- 정렬하기

 

var result = 배열.sort([compareFunction/*정렬 순서를 정의하는 함수*/]);

 

문자 오름차순 정렬

 

배열.sort(function(a,b){

  return a-b;

})

 

문자 내림차순 정렬

 

배열.sort(function(a,b){

  return b>a;

});

 

숫자 정렬하기

sort()는 문자열 정렬이기 때문에 숫자를 정렬하는데 문제가 발생합니다.

 

////////////////////잘못된 경우의 예///////////////////////////

var anyData = [5,2,8,9,3,6,4,1,77];

console.log(" 실행 전 : " + menuItems.join(","));

menuItems.sort();

console.log(" 실행 후: " + menuItems.join(","));

//////////////////////////////////////////////////////////////////

실행전 : 5,2,8,9,3,6,4,1,77

실행후 : 1,2,4,5,6,77,8,9

77이 정렬이 잘 되지 않았다.

///////////////compareFunction 을 활용/////////////////////////////

var anyData = [5,2,8,9,3,6,4,1,77];

console.log(" 실행 전 : " + menuItems.join(","));

menuItems.sort(function(a,b){return a-b;});

console.log(" 실행 후: " + menuItems.join(","));