[JavaScript] 기초 문법(5) - 배열

# 배열

// 방법 1
let ar = [10, 20, 30];
// 출력
console.log(ar);
console.log(ar.length);
console.log(typeof(ar));
console.log(Array.isArray(ar)); // true가 나오면 배열

// 방법 2
let br = Array(); // [] : 빈배열
console.log(br);

// 방법 3
let cr = Array(5);
console.log(cr);

// 방법 4
let dr = Array(10, 20, 30); // 두 개 이상부터 배열에 값을 넣을 수 있음
console.log(dr);

 

# 배열에 담을 수 있는 타입

// 숫자, 문자열, boolean, 배열, 객체, 함수, undefined
let ar = [
    10,
    '호랑이',
    true,
    [10, 20, 30],
    {name:'독수리', age:10},
    function(){},
    undefined,
];
console.log(ar);

숫자, 문자열, boolean, 배열, 객체, 함수, undefined

# 배열 출력

let ar = [10, 20, 30];
console.log(ar);
for(const index in ar){
    console.log(index, ar[index]);
}; console.log('');

for(const value of ar){
    console.log(value); // 내부적으로 값을 가지고 있다.
}; console.log('');

// 인터페이스에 해당 - 자바의 상속과 비슷
// v : value, i : index
ar.forEach((v, i)=>{
        console.log(v, i);
});

# map

let ar = [10, 20, 30];
let br = ar.map(
    (num)=>{
        return num*10;
    }
)
console.log(br);

let cr = ar.map( num=> num*10 );
console.log(cr);

let dr = [0,1,2,3]
let er = dr.map(
    // num => {
    //     if (num % 2) return 'odd'
    //     else return 'even'
    // }
    num => (num%2) ? 'odd' : 'even' // 단줄처리
)
console.log(er);

주석 친 부분과 단줄처리 부분이 같다.

# map 사용

// 배열 안에 여러 객체를 사용함
let ar = [
    { n : '호랑이', a:10 },
    { n:'코끼리', a:20 },
    { n:'독수리', a:30 }
]

for (const key in ar){
    console.log(key);
    let e = ar[key];
    console.log(e);
    // console.log(e.n, e.a);
    console.log(e['n'], e['a']);
}

let sum = 0;
for(const v of ar){
    sum += v.a;
} console.log(sum);

// 항상 인터페이스 적인 약속이며, 두개의 값을 넣어야한다.
// value 자체가 객체
let br = ar.map( (v, k)=> v.n + v.a )
console.log(br);

map은 원본 데이터를 새로운 데이터로 가공해서 사용한다.

 

# filter

let ar = [1, 5, 11, 39, 21, 2];
let br = ar.filter(v => v < 15);
console.log(br);

filter는 특정 조건을 뽑아낸다.

# filter 응용

let ar = [1, 5, 11, 39, 21];
console.log(ar.length); // 배열은 길이가 구해진다.

let s1 = "Tiger";
console.log(s1.length); // 문자열도 길이가 구해진다.

let br = ['Tiger', 'cat', 'dog', 'lion', 'ai']
console.log(br.filter(v => v.length < 4));

filter를 사용해서 문자열의 길이가 4미만인 것만 뽑아낸다.

 

# 번외...

let ar = [80, 20, 10, 25];
console.log(ar, typeof(ar));

//// br, st01가 동일한 결과
let br = ar.toString(); // 파일 출력용으로 사용
console.log(br, typeof(br));

let st01 = '80,20,10,25';
console.log(st01, typeof(st01));

// 다양한 date의 함수들
let date = new Date();
console.log(date); // refresh 확인용으로 사용

 

# 배열 push, pop (오른쪽 편집)

let ar = [80, 20, 10, 25];
// stack 메모리 구조 => push, pop
// pop()*    <--- 주석에 기록 시, 원본 데이터 손상의 의미(*)를 갖는다.
let num = ar.pop(); // return 꺼낸 데이터
// 한 개의 요소를 element라고 한다.
console.log(ar, num);

// push()*
num = ar.push(20); // return 배열 길이
console.log(ar, num);

 

# shift (왼쪽 편집)

let ar = [10, 20, 30];
console.log(ar.shift()); // 왼쪽에 하나 뺏다.
console.log(ar);

console.log(ar.unshift(40)); // 왼쪽에 추가
console.log(ar);

console.log(ar.unshift(50, 60, 70)); // 리스트 추가
console.log(ar);

 

# 배열 병합

let ar = [10, 20, 30]

// concat() - 배열과 배열을 병합시킬때 사용
let br = ar.concat(40);
console.log(ar);
console.log(br);

let cr = [40, 50, 60];
let dr = ar.concat(cr);
console.log(dr); // [10, 20, 30, 40, 50, 60]

ar.push(cr)
console.log(ar); // [10, 20, 30, [40, 50, 60]]

concat()는 배열 병합 시, 사용하며 push와 출력 결과가 다르다.

 

# join

let ar = ['tiger', 'lion', 'cat'];
// join(구분자) 
console.log(ar.join());
console.log(ar.join(''));
console.log(ar.join(' + '));

# 정렬

let ar = [-52, 73, 43, 32];
//---------------------------------------------------------------------
//// 사전 순으로 정렬(문자열)
ar.sort(); // [10, 20, 30, 5, 50]
console.log(ar);
//---------------------------------------------------------------------
//// 순차 정렬
// 인터페이스화 되어 있으므로 반드시 인수 두개를 전달해야한다.
function func(a, b){ 
    if(a>b){ // 정렬 방식 설정
        return +1; // 양수
    }else{
        return -1; // 음수
    }
}
ar.sort(func) // 정렬 방법 제시
console.log(ar);
//---------------------------------------------------------------------
//// 역순 정렬
function func1(a, b){ // 규칙을 정해준다.
    return (a<b)? +1 : -1;
}
ar.sort(func1); console.log(ar);
//---------------------------------------------------------------------
// 슈가 코드
function func2(a, b){ return a - b; }
ar.sort(func2); console.log(ar);
//---------------------------------------------------------------------
// 활용 1
function func3(a, b){ // 이렇게 사용하는 이유 : 활용성 때문에
    let c = a / 10 + a % 10;
    let d = b / 10 + b % 10;
    return c-d;
}
ar.sort(func3); console.log(ar);
//---------------------------------------------------------------------
// 활용 2
function func3(a, b){ 
    let c = Math.abs(a);
    let d = Math.abs(b);
    return c-d;
}
ar.sort(func3); console.log(ar);

정렬

# 정렬 응용

let ar = [
    {n:30, s:'삼성'},
    {n:20, s:'현대'},
    {n:10, s:'롯데'},
]

function func(a, b){
    return a.n - b.n;
}
ar.sort(func);
console.log(ar);

다음과 같이 정렬을 응요할 수 있다.

 

# slice

// slice() - 원본 손상 없음
let ar = [10, 20, 30, 40, 50, 60];
// slice 유효 범위 : silce(2, 4) = [2, 4) - 주석을 잡아 표기하기도 함
let br = ar.slice(2, 4); // 2 <= x < 4
console.log(ar);
console.log(br);

slice는 특정 부분을 잘라낼때 사용한다.

 

# splice

let ar = [1, 2, 3];
// [시작 위치, 삭제항목수, 추가 항목,,,]
ar.splice(1, 0, 10, 20, 30); // return 없음
console.log(ar);

ar.splice(1, 2, 88, 99); // return 없음
console.log(ar);

let br = [66, 55, 44, 33];
ar.splice(0,0,br); // 배열 덩어리
console.log(ar);

# indexOf

let ar = ['tiger', 'cat', 'lion', 'apple'];
console.log(ar.indexOf('lion'));
console.log(ar.indexOf('dog'));

// (찾으려는 값, 찾으려는 위치값 지정)
console.log(ar.indexOf('lion', 1));

console.log(ar.lastIndexOf('apple'));

console.log(ar.indexOf('tiger')); // 앞에서부터 검색
console.log(ar.lastIndexOf('tiger')); // 뒤에서부터 검색

 

# every

let ar = [1,2,10, 39, 20];
let br = [1,2,10, 50, 20];

function func(value){
    return value < 40; // 모두 만족해야함
}

console.log(ar.every(func)); // return true, fasle 
console.log(br.every( value => value < 40));

결석 데이터를 찾을 때, every를 사용한다. (결석 데이터 : 들어오면 안되는 데이터 또는 조건에 맞지 않는 데이터)

 

# some

let ar = [1, 5, 11, 39, 21, 2];

console.log(ar.some(v=>v%2==0));

some은 조건 하나만 맞으면, true