[JavaScript] 값의 집합 처리/조작하기 - Array

 

 

Array 객체 (배열 조작하기)

자바스크립트에서 Array 객체는 배열형의 값을 취급하기 위한 객체로 배열에 대한 요소의 추가/삭제, 결합 정렬 등을 행하기 위한 기능을 제공한다.

 

배열 생성 예시)

var ary = [1, 2, 3];

// new 연산자 사용가능
var ary = Array('e','ww', 'wq');

 

 

 array 의 주요 맴버

var ary = [1, 2, 3];

// 배열의 크기
console.log(ary.length);   // 3

// 배열인지 아닌지 구별
console.log(Array.isArray(ary));    // true

// 배열의 요소들을 문자열로 반환 
console.log(ary.toString());     // 1,2,3

// 지정한 요소와 일치한 요소의 인덱스를 반환한다.
console.log(ary.indexOf(2));     // 1

// 지정한 요소와 일치한 마지막 요소의 인덱스를 반환한다.
console.log(ary.lastIndexOf(1));    // 0

 

 

 Array 가공하기 

var ary1 = ["A", "B", "C"];
var ary2 = ["D","E", "F"];

// 지정 배열을 현재 배열에 연결한다. 
console.log(ary1.concat(ary2));   // [ 'A', 'B', 'C', 'D', 'E', 'F' ]

// 배열 내의 요소를 지정한 구분 문자로 연결한다.
console.log(ary1.join('+'));    // A+B+C

// slice(start, end) : (strat+1) ~ end 번째의 요소를 빼냄
console.log(ary1.slice(1));    // [ 'B', 'C' ]
console.log(ary2.slice(0, 2));   // [ 'D', 'E' ]

// splice 치환
let temp = ["Ko", "rR", "AA", "cake", "koCo"];
console.log(temp.splice(1, 3, "A", "B", "C"));  // [ 'rR', 'AA', 'cake' ] : 치환 대상 리턴
console.log(temp);   // [ 'Ko', 'A', 'B', 'C', 'koCo' ] : 치환 후 배열

// fill 치환
let temp2 = ["A", "B", "C", "D", "E"];
console.log(temp2.fill('Z', 2, 4));   // [ 'A', 'B', 'Z', 'Z', 'E' ]
console.log(temp2);                   // [ 'A', 'B', 'Z', 'Z', 'E' ]

 

 

 Array 정렬 - sort(), reverse()

sort() 정렬과 reverse() 정렬은 모두 원래의 배열에도 영향을 미친다. 기본적으로 배열을 문자열로 취급하여 사전순으로 정렬한다.

var ary = ["바다", "포도", "가나", "커피"];

console.log(ary.sort());   // [ '가나', '바다', '커피', '포도' ]
console.log(ary);     // [ '가나', '바다', '커피', '포도' ]

console.log(ary.reverse());   // [ '포도', '커피', '바다', '가나' ]
console.log(ary);   // [ '포도', '커피', '바다', '가나' ]

 

독자적인 규칙으로 배열을 나열할 수 있다. 이 규칙을 변경하는데 인수로서 다음과 같은 함수를 정의할 수 있다.

• 인수는 2가지이다.
• 제1인수가 제2인수보다 작은 경우는 음수, 큰 경우는 양수를 반환한다.

 

예시) 오름차순 

var ary = [5, 7, 1, 9, 20];

ary.sort(function(x, y) {
    return x - y;
})

console.log(ary);   // [1, 5, 7, 9, 20]

 

 

 Array 추가와 삭제

 var t = [1, 2, 3, 4, 5];

 // pop() : 배열 끝의 요소를 취득하며 삭제
 console.log(t.pop());    // 5
 console.log(t);    //  [ 1, 2, 3, 4 ]

 // push(data) : 배열 끝에 요소를 추가
 console.log(t.push(100));   // 5 : 배열의 개수 반환
 console.log(t);    // [ 1, 2, 3, 4, 100 ]

 // shift() : 배열 선두의 요소를 취득하여 삭제
 console.log(t.shift());    // 1
 console.log(t);    //  [ 2, 3, 4, 100 ]

 // unshift(data1, [...]) : 배열 선두에 지정 요소 추가
 console.log(t.unshift(-10, -100));   // 6 : 배열의 개수 반환
 console.log(t);   // [ -10, -100, 2, 3, 4, 100 ]

 

 

 스택 구현하기

스택(Stack)이란 나중에 들어간 것이 먼저 나오는 구조(LIFO : Last In First Out) 이다. 먼저 낳은 것이 나중에 나오는 구조(FILO : First In Last Out) 이라고도 불리는 데이터 구조이다. 스택은 push/pop 메소드로 구현할 수 있다.

var data = [];

data.push(1);
data.push(2);
data.push(3);
data.push(4);

console.log(data.pop());   // 4
console.log(data.pop());   // 3
console.log(data.pop());   // 2

 

 

 큐 구현하기

큐(Queue) 란 먼저 넣은 것이 먼저 나오는 구조(FIFO : First In First Out) 라고 불리는 데이터구조이다. 대기 행렬이라고도 부른다. 큐는 push/ shift 메소드로 구현할 수 있다.

var data = [];

data.push(1);
data.push(2);
data.push(3);
data.push(4);

console.log(data.shift());   // 1
console.log(data.shift());   // 2
console.log(data.shift());   // 3

 

 

 사용자 정의 함수로 독자적인 처리하기 (콜백)

Array 객체에는 인수에 대한 사용자 정의 함수를 지정할 수 있는 메소드가 있다. 콜백으로 분류되어 있는 메소드들이다.

 

㉮ forEach 메소드

forEach 메소드는 지정한 함수로 배열 내의 요소를 순서대로 처리하기 위한 메소드이다.

var data = ['A', 'B', 'C', 'D'];

data.forEach(function(value, index, array) {
    // value : 요소의 값 , index : 인덱스 번호 , array : 원래의 배열
    console.log(`${index} 번째 요소의 값 : ${value}`);
});

/* 결과 값
0 번째 요소의 값 : A
1 번째 요소의 값 : B
2 번째 요소의 값 : C
3 번째 요소의 값 : D
/*

 

 

㉯ map 메소드

map 메소드를 이용함으로써 배열을 지정된 함수로 가공할 수 있다. 반환 값으로써 가공한 결과를 반환해야 한다.

var data = ['A', 'B', 'C', 'D'];

var result = data.map(function(value, index, array) {
    // value : 요소의 값 , index : 인덱스 번호 , array : 원래의 배열
    return value + ' + ';
});

console.log(result);   // [ 'A + ', 'B + ', 'C + ', 'D + ' ]

 

 

㉰ some 메소드

some 메소드는 지정된 함수로 각각의 요소를 판정하여 하나라도 조건에 일치하는 요소가 있다면 true 를 반환한다. 반환값으로 요소가 조건이 일치하지 않는지 아닌지 true/false 값이 필요하다.

var data = [2, 4, 7, 9, 10];

var result = data.some(function(value, index, array) {
    // value : 요소의 값 , index : 인덱스 번호 , array : 원래의 배열
    return value % 2 == 0;
});

console.log(result);  // true

 

 

㉱ every 메소드

every 메소드는 some 메소드와 비슷한데 모든 요소를 판정하여 모든 요소가 조건에 일치해야만 true 를 반환한다.

var data = [2, 4, 7, 9, 10];

var result = data.every(function(value, index, array) {
    // value : 요소의 값 , index : 인덱스 번호 , array : 원래의 배열
    return value % 2 == 0;
});

console.log(result);  // false

 

 

㉲ filter 메소드

filter 메소드는 지정된 함수에서 개별 요소를 판정하여 조건에 일치한 요소만 추출한다.

var data = [2, 4, 7, 9, 10];

var result = data.filter(function(value, index, array) {
    // value : 요소의 값 , index : 인덱스 번호 , array : 원래의 배열
    return value % 2 == 0;
});

console.log(result);  // [ 2, 4, 10 ]