[Web] 웹 기초 (18) - JavaScript #11 배열 (Array), 정렬 (sort)

Array 객체

자바스크립트 배열선언

• 배열의 길이는 가변적이다.
• 생성 방법 1: let a = new Array()
• 생성 방법 2 : let a = new Array(1,2,3);
• 생성 방법 3 : let a = []
• 생성 방법 4 : let a = [1,2,3];
• 다차원 배열은 1차원 배열의 요소를 다시 1차원 배열로 선언
  • let a = new Array();
  • a[0] = new Array(); 
    (a의 첫번째 요소를 다시 배열로 만들기)

// 기본형------------------------
let a = [1,2,3,4,5];
console.log(a[0]); // 1
console.log(a); // 배열 정보, 값 출력


//map형 ---------------------------
let b = {"id" : "hong", "name" : "홍길동", "age" : "40"};
console.log('id', b.id ); // hong
console.log('성명', b.name ); // 홍길동
console.log('나이', b.age ); // 40


// 기본형의 2차원 배열
let c = [
  [1,2,3],
  [4,5,6]
];
console.log('1행 : ', c[0]); // [1,2,3]
console.log('2행 : ', c[1]); // [4,5,6]
console.log('1행 1열 : ', c[0][0]); // 1


//배열 안에 map 구조
let d = [
  1,2,3,{"name" : "park", "score" : "60"},
  4,5,6
];
console.log('d[0] : ', d[0]); // 1
console.log('d[4] : ', d[4]); // 4
console.log('d[3].name : ', d[3].name); // park


//map 안에 배열
let e = {
   "id" : "hong",
   "score" : [50, 80, 40, 30, 20]
}
console.log('id : ', e.id); // hong
console.log('score : ', e.score); // [50, 80, 40, 30, 20]
console.log('score[0] : ', e.score[0]); // 50

 

 

배열 (Array) 정렬

  let array1 = [123,54,234,54,34,6,534,23,14,3,1,56,-34];
  let array2 = ['!', 'apple', '사과', '1사과', 'fd', 'banana', '2바나나', '호', '23', '65', '&@', '123'];
  
  console.log('array1 정렬 전 : ', array1);
  console.log('array2 정렬 전 : ', array2);
  
  array1.sort();
  array2.sort();
  
  console.log('array1 정렬 후 : ', array1);
  console.log('array2 정렬 후 : ', array2);

 

결과

array1 정렬 전 :  (13) [123, 54, 234, 54, 34, 6, 534, 23, 14, 3, 1, 56, -34]
array2 정렬 전 :  (11) ['!', 'apple', '사과', '1사과', 'fd', 'banana', '2바나나', '호', '23', '65', '&@', '123']
array1 정렬 후 :  (13) [-34, 1, 123, 14, 23, 234, 3, 34, 534, 54, 54, 56, 6]
array2 정렬 후 :  (11) ['!', '&@', '123', '1사과', '23', '2바나나', '65', 'apple', 'banana', 'fd', '사과', '호']

• 자바스크립트에서는 기본적으로 문자 정렬이므로 array1의 숫자들은 문자 기준으로 정렬된다. 마찬가지로 array2의 123이 23이나 65보다 앞으로 정렬

 

콘솔에 출력했을 때에는 최종적으로 정렬된 결과가 나와서.. 눌러서 펼쳐보면 정렬전과 후가 같아보임

 

 

숫자정렬

array1.sort(
	function numAsc(left,right){
		// 양수면 자리교환, 음수나 동일한 값이면 자리교환 X
		return left-right;
	}
  );

 

output:

[-34, 1, 3, 6, 14, 23, 34, 54, 54, 56, 123, 234, 534]

 

숫자정렬 - reverse (내림차순)

array1.reverse();

• array1.reverse( ) : 배열을 거꾸로 재정렬

 

 

output:

 [534, 234, 123, 56, 54, 54, 34, 23, 14, 6, 3, 1, -34]

 

 

join

  console.log('join : ', array1.join('------>'));
  // 배열과 배열 사이에 구분자를 컴마 대신에 -----> 해당 기호로 써라

 

splice

점수가 50보다 큰 값 삭제 (splice 이용)

  // 배열 요소 삭제
  for(i=array1.length-1; i>=0; i--){
	  if(array1[i]>50){
 	    array1.splice(i,1);
	  }
  }

 

for(i=0; i<array1.length; i++){
  if(array1[i]>50){
    array1.splice(i,1);
  }
}

• 삭제할때 주의!!!!!
• 다음과 같이 일반적인 방법으로 for문 돌리면 첨자가 계속 바뀌기 때문에 엉뚱한 값이 삭제된다. 이를 방지하기 위해서 for문을 뒤에서부터 역순으로 돌리는 것

 

pop

배열의 맨 마지막 값을 제거한다.

let array = ['banana', 'apple', 'tomato', 'strawberry', 'orange'];
array.pop(); // orange
console.log(array); // ['banana', 'apple', 'tomato', 'strawberry']

// pop 메소드를 사용한 element를 변수에 담을 수도 있다.
let popped = array.pop(); // strawberry

 

---

 

예제 - object형 데이터를 배열에 저장한 후 원하는 키로 정렬

 

function Data(id, score){
	  this.id = id;
	  this.score = score;
  }
  
  let array3 = [];
  // 임의의 데이터 넣기
  array3.push( new Data('1', 70) );
  array3.push( new Data('32', 20) );
  array3.push( new Data('6', 60) );
  array3.push( new Data('2', 90) );
  array3.push( new Data('11', 100) );
  array3.push( new Data('26', 30) );

 

score 순으로 오름차 정렬

 function scoreSort(obj1, obj2){
	  return Number(obj1.score) - Number(obj2.score);
  }
  
  array3.sort(scoreSort);

 

출력방법

for(d of array3){
  console.log(d.id + ' : '+d.score);
}

 

output :

32 : 20
26 : 30
6 : 60
1 : 70
2 : 90
11 : 100

 

 

 

id순으로 오름차 정렬

function IdSort(obj1, obj2){
	  let r = Number(obj1.id) > Number(obj2.id)? 1 : -1;
	  return r;
  }
  
  array3.sort(IdSort);

 

output:

1 : 70
2 : 90
6 : 60
11 : 100
26 : 30
32 : 20