javascript3

배열(array)

연관된 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터 타입이다. 변수가 하나의 데이터를 저장하기 위한 것이라면 배열은 여러 개의 데이터를 하나의 변수에 저장하기 위한 것이라고 할 수 있다.

 

배열의 생성

여러개의 데이터를 하나의 변수에 담아서 관리할 수 있는 방법

대괄호[]는 배열을 만드는 기호

대괄호 안에 데이터를 콤마, 로 구분해서 나열하면 배열이 된다.

 

하나의 변수에 3개의 데이터를 담았다. 각각의 데이터를 원소(Element)라고 부른다.

var member = ['egoing', 'k8805', 'sorialgi']

이 데이터를 꺼내오는 방법

var member = ['egoing', 'k8805', 'sorialgi']
alert(member[0]);
alert(member[1]);
alert(member[2]);

// [0], [1], [2] : index

// egoing
// k8805
// sorialgi

function get_members() {
	return ['egoing', 'k8805', 'sorialgi']
}
var members = get_members();
document.write(members[0]);
document.write(members[1]);
document.write(members[2]);

 

배열의 사용

배열의 진가는 반복문과 결합했을때 나타난다. 반복문으로 리스트에 담긴 정보를 하나씩 꺼내서 처리 할 수 있기 때문이다.

var a = 'egoing';
a.toUpperCase();
"EGOING"

// .toUpperCase() : 자바스크립트가 기본적으로 제공하는 함수(내장함수)
// function() : 사용자정의 함수

function get_members(){
	return ['egoing', 'k8805', 'sorialgi'];
}

members = get_members();

document.write(members[0].toUpperCase()+"<br />");
document.write(members[1].toUpperCase()+"<br />");
document.write(members[2].toUpperCase()+"<br />");


// EGOING
// K8805
// SORIALGI

.toUpperCace() : 대문자로 전환

function get_meembers(){
	return ['egoing', 'k8805', 'sorialgi'];
}
members = get_members();
// members.length는 배열에 담긴 값의 숫자를 알려준다.
for(i = 0; i < members.length; i++) {
	// members[i].toUpperCase()는 members[i]에 담긴 문자를 대문자로 변환해준다.
    document.write(members[i].toUpperCase());
    document.write('<br />');
}

var a = ['egoing', 'k8805', 'sorialgi'];
alert(a.length); // a배열안에 담겨있는 값이 몇개인지

// 3

 

function get_members(){
	return ['egoing', 'k8805', 'sorialgi', 'leezche'];
}

members = get_members();

for(var i = 0; i < 3; i++) {
// 총 3번 i의 값은 0부터 2까지 변경되도록 고정되어있는 반복문
// 3대신 members.length를 넣으면 length의 값이 많아지거나 적어져도 for문이 동장하는 숫자는 배열의 갯수에 따라 유동적으로 변한다.('leezche'가 자동으로 추가 된다.)
	document.write(members[i].toUpperCase()+"<br />");
}

// EGOING
// K8805
// SORIALGI

 

배열의 제어

배열은 복수의 데이터를 효율적으로 관리, 전달하기 위한 목적으로 고안된 데이터 타입이다.

데이터의 추가/수정/삭제와 같은 일을 편리하게 할 수 있도록 돕는 다양한 기능을 가지고 있다.

 

배열의 크기

length()

var arr = [1,2,3,4,5]
alert(arr.length)

// 5

 

배열의 추가

배열의 끝에 원소를 추가

push() 는 인자로 전달된 값을 배열(li)에 추가하는 명령

push() 는 하나의 데이터를 추가

push()는 배열의 마지막에 데이터를 추가

var li = ['a', 'b', 'c', 'd', 'e']
li.push('f');
alert(li);

// a, b, c, d, e, f

concat() 은 복수의 원소를 배열에 추가

var li = ['a', 'b', 'c', 'd', 'e']
li.concat(['f', 'g']);
alert(li);

// a, b, c, d, e, f, g

 

unshift()는 인자로 전달한 값을 배열의 첫번째 원소로 추가하고 배열의 기존 값들의 색인을(인덱스 값을) 1씩 증가시킨다.

unshift() 는 배열의 시작점에 원소를 추가하는 방법이다.

var li = ['a', 'b', 'c', 'd', 'e'];
li.unshift('z');
alert(li);

// z, a, b, c, d, e

 

splice() : 원소 사이에 값을 끼워넣고 싶을때 사용

첫번쨰 인자에 해당하는 원소부터 두번째 인자에 해당하는 원소의 숫자만큼의 값을 배열로부터 제거한 후에 리턴한다. 그리고 세번째 인자부터 전달된 인자들을 첫번째 인자의 원소 뒤에 추가한다.

splice() : 배열의 특정구간을 추출하거나, 특정구간에 특정 배열을 추가함

배열에 배열을 추가하거나 삭제 할때 사용. 대상 구간에 해당하는 삭제될 원소들은 리턴된다.

원본이 수정된다.

slice()가 원본이 유지되는 것과 다르다.

array.splice(index, howmany, element···)

// index : 배열에 추가할 특정 배열의 위치를 가르키는 index(number로 입력)
// howmany : index에서부터 제거될 원소들의 수. index부터 index+howmany에 해당하는 원소들은 삭제된다.(number로 입력)
// element : index와 index+howmany 사이에 추가될 값(number로 입력)

var a = ["a", "b", "c"]
a.splice(1,0,'d');
// index 1의 자리 즉, b의 자리이고 0이라는 것은 그 앞에 c라는 값을추가해라
a = ["a", "d", "b", "c"]

var a = ["a", "b", "c"];
a.splice(1, 1, 'x', 'y');
// 인덱스 1의 자리 즉, b의 자리를 의미하고 1이라는 것은  인덱스 1의 자리에 한개의 element를 삭제하고 뒤에 따라오는 값을 삭제된 자리에 넣는다.
a = ["a", "x", "y", "c"]

var li = ['a', 'b', 'c', 'd', 'e'];
li.splice(2, 0, 'B');
alert(li);

 

배열의 제거

shift() :  배열의 첫번째 원소를 제거

var li = ['a', 'b', 'c', 'd', 'e']
li.shift();
alert(li);

// b, c, d, e

pop() :  배열의 끝 원소 제거

var li = ['a', 'b', 'c', 'd', 'e']
li.pop();
alert(li);

// a, b, c, d

 

배열의 정렬

sort()

var li = ['c', 'e', 'a', 'b', 'd']
li.sort();
alert(li);

// a,b,c,d,e

reverse() : 거꾸로 정렬

var li = ['c', 'e', 'a', 'b', 'd']
li.reverse();
alert(li);

// e,d,c,b,a

sort()

배열을 정렬한다.

array.sort(sortfunc);

// sortfunc : 원소들 간에 무엇이 우선인지를 판단한다.(function)

function sortNumber(a,b) {
// 비교 대상인 a와 b가 인자로 전달된다.
// alert('a :'+a+', b:'+b);
// a에서 b를 뺀 결과가 음수면 a가 b보다 작고, 0이면 같다.
// sort메소드는 return 값이 음수,양수,0인지에 따라서 순서를 정한다.
	return a-b;
}

var numbers = [20,10,9,8,7,6,5,4,3,2,1];
alert(numbers.sort(sortNumber)); // array, [1,2,3,4,5,6,7,8,9,10,20]

function sortNumber(a,b) {
// 위의 예제와 비교해서 a와 b의 순서를 바꾸면 정렬순서가 반대가 된다.
	return b-a;
}

var numbers = [20,10,9,8,7,6,5,4,3,2,1];
alert(numbers.sort(sortNumber)); // array, [20,10,9,8,7,6,5,4,3,2,1]