[JS] 배열(Array) : 선언 & 초기화 & 메소드 종류

 

배열(Array)

자바스크립트에서는 자료형 지정이 없기 때문에 한 배열 안에 모든 자료형 보관 가능

 

1.배열 선언 및 초기화

배열 선언 시 크기를 지정하지 않고 선언할 수도 있고 크기를 정하고 선언할 수도 있음

function arrayTest2(){
  var arr1 = new Array();     // 배열 선언
  var arr2 = new Array(3);    // 배열 및 배열 길이 선언
  console.log('arr1.length : ' + arr1.length);
  console.log('arr2.length : ' + arr2.length);

  // length가 0이면 값 삽입 불가능? 확인 ㄱ
  

  // 배열 추가
  arr1[0] = '사과';
  arr1[1] = '귤';
  arr1[2] = '바나나';
  arr1[3] = '딸기';       // 4번째 인덱스에 추가됨. 
  // 배열 길이 0으로 지정해놔도 데이터 계속 들어갈 수 있음

  console.log('arr1.length : ' + arr1.length);
  console.log(arr1);

  // 알아서 값이 증가하면서 값도 받아옴
  arr2[0] = '지하철';
  arr2[1] = '기차';
  arr2[2] = '비행기';

  console.log('arr2.length : ' + arr2.length);
  console.log(arr2);
  

  // 초기화 의미 : 객체 선언을 하고 값을 최초로 할당하는 것

  // 선언과 동시에 초기화 방법1 -  강의시간 12:20
  var arr3 = new Array('빨강', '초록', '파랑');
  console.log('arr3.length : ' + arr3.length);
  console.log(arr3);

  // 선언과 동시에 초기화 방법2
  var arr4 = ['java','oracle','jdbc','html','css','javascript'];
  console.log('arr4.length : ' + arr4.length);
  console.log(arr4);  // ['java','oracle','jdbc','html','css','javascript']
}

 

2.배열 메소드

 

indexOf()

해당 요소가 위치한 인덱스 번호 반환

없으면 -1반환

function methodTest1(){
    var arr = ['사과', '포도', '배', '바나나', '감', '키위', '복숭아'];
    console.log(arr.indexOf('바나나'));    // 3. 해당 요소가 위치한 인덱스 반환
    console.log(arr.indexOf('토마토'));    // 배열에 존재하지 않는 값이기에 -1 반환
}

 

concat()

이어 붙이기

function methodTest2(){
    var arrl = ['빨강', '노랑', '초록'];
    var arr2 = ['파랑', '보라'];

    console.log(arr1.concat(arr2)); // ['빨강', '노랑', '초록',//'파랑', '보라']
    console.log(arr2.concat(arr1)); // ['파랑', '보라',//'빨강', '노랑', '초록']
    
    // 메소드 체인 가능
    onsole.log(arr2.concat(arr1).concat(arr1).concat(arr2));
}

 

join()

결합해서 ‘문자열’로 반환

join()은 parameter 지정안하면 ,으로

지정하면 지정한 값(구분자)을 넣어서 구분하여 반환

• 밑에 toString()과 비슷

<button onclick="methodTest3();">배열 메소드 : join()</button>
<script>
    function methodTest3(){
        var arr = ['강남', '역삼', '선릉', '교대'];
        console.log(arr.join());    // 강남,역삼,선릉,교대
        console.log(typeof arr.join()); // string

    }
</script>

 

reverse()

배열의 값을 뒤집어서 반환

function methodTest4(){
  var arr = [1, 2, 3, 4, 5, 6, 7];
  console.log(arr.reverse());     // [7, 6, 5, 4, 3, 2, 1]
  var arr2 = ['a','b','c','d','e'];
  console.log(arr2.reverse());    // ['e', 'd', 'c', 'b', 'a']
}

 

sort()

배열 값을 정렬 : 안에 들어온 값들을 문자열로 변환해서 문자열 정렬

간단한 문자열 숫자는 숫자로 변환하여 숫자 정렬하고 다음 영어 정렬한다

function methodTest5(){
    var arr = [10, 543, 34, 450, 123, 885];
    console.log(arr.sort());    // [10, 123, 34, 450, 543, 885]

    var arr = ['b', 10, 543, 34, 450, 123, 'a']; 
    console.log(arr.sort());    // [10, 123, 34, 450, 543, 'a', 'b']

		// console.log(a.sort());    //  ['4', 5, 'a', 'b', 'c']    str4를 숫자4로 바꾸고 4,5..순으로 정렬

    // 숫자로 정렬하고 싶을 때 방법
    var sortArr = arr.sort(function(left, right){
                    return left-right; // 내림차순
                    return right-left; // 오름차순
                // 뺄셈을 이용해 누가 더 큰지 알아내고 이를 기반으로   자리를 바꿀지 말지 정한다.
// 레프트 라이트
// 양수 왼쪽값이 더 큼 왼쪽값이 더 크면 안되니 ... 뺄셈을 이용해서 누가 더 큰지 비교
// 자동으로 큰수를 넣는거 그 이후                    
        }
    );
    console.log(sortArr);
}

 

push() & pop()

 - push : 마지막에 요소 추가 <-> unshift // 길이 반환

 - pop : 마지막 요소 꺼내오기 <-> shift // 제거된 요소 반환

       (꺼내오며 마지막 요소가 배열에서 삭제됨)

function methodTest6(){
  var arr = ['김고은', '한예슬', '신민아', '전지현', '손예진', '김소연'];
  arr.push('유인나'); // 마지막에 유인나 추가됨
  console.log(arr);   // ['김고은', '한예슬', '신민아', '전지현', '손예진', '김소연', '유인나']

  arr.push('송혜교'); 
  console.log(arr);   // ['김고은', '한예슬', '신민아', '전지현', '손예진', '김소연', '유인나', '송혜교']

  console.log(arr.push('유인나')); // 9 : 푸쉬가 되고 난 다음에 사이즈가 나오는것

  arr.sort();

  console.log(arr);
  console.log("========")
  console.log(arr.pop()); // 마지막 요소 꺼내오기(꺼내오며 마지막 요소가 배열에서 삭제됨)
  console.log(arr);   
  arr.pop();              // 마지막 요소 꺼내오기(꺼내오며 마지막 요소가 배열에서 삭제됨)
  console.log(arr);
}

// push : 마지막 요소에 추가
console.log(a);           // (5) ['4', 5, 'a', 'b', 'c']
console.log(a.push());    //  5     <- 콘솔에서는 소트된 상태에서 원래 배열의 마지막값 5를 반환
console.log(a.push(6));   //  6    
console.log(a);           // (6) ['4', 5, 'a', 'b', 'c',6]
console.log(a.push())       // 6 // 파라미터 안적으면 배열의 길이 반환(?)
console.log(typeof(a.push()));    //  number

 

shift() & unshift()

 - shift : 첫번째 요소 제거하고, 제거된 요소를 반환 <-> pop // 제거된 요소 반환(str 반환)

 - unshift : 맨 앞에 요소 추가하고, 추가한 길이를 반환 <-> push // 길이 반환(number 반환)

(method) Array<string>.shift(): string

(method) Array<string>.unshift(...items: string[]): number

function methodTest7(){
    var arr = ['야구', '축구', '농구', '배구', '탁구'];
    console.log(arr);         // ['야구', '축구', '농구', '배구', '탁구']

    arr.shift();              // 야구 삭제
    console.log(arr);         // ['축구', '농구', '배구', '탁구']
    console.log(arr.shift()); // 축구
    console.log(arr);         // ['농구', '배구', '탁구']

    arr.unshift('ㅁ');          // ㅁ 추가
    console.log(arr.unshift()); // 4    길이 반환
    console.log(arr);           //  ['ㅁ', '농구', '배구', '탁구']
}

 

slice() & splice()

slice()

slice(start idx, end idx) 끝 인덱스 미포함(-1)해서 엘리먼트 추출

splice()

splice(start idx, end idx, 대체할 idx) a부터 b개까지 c의 값으로 변경

function methodTest8(){
    var arr = ['자바', '오라클', 'JDBC', 'HTML', 'css', 'JavaScript']; // 끝 인덱스 미포함해서
    console.log(arr.slice(2, 4));   // ['JDBC', 'HTML']
    console.log(arr);               // ['자바', '오라클', 'JDBC', 'HTML', 'css', 'JavaScript']
    
    console.log(arr.splice(0, 2, 'Spring')); // ['자바', '오라클'] // 0부터 2개 빼내고 spring을 추가하겠다는 코드
    console.log(arr);       // ['Spring', 'JDBC', 'HTML', 'css', 'JavaScript']

}

 

toString()

join()과 비슷

차이는

toString() : 무조건 ','로 구분지어 반환

join()은 parameter 디폴트는 ',' 들어가고 지정하면 지정한 값(구분자)을 넣어서 각 값을 연결하여 반환

toString() → 무조건 ,쉼표 구분자로 합쳐서 문자열로 연결되어 나옵니다 ≒ join

function methodTest9(){
  var arr = ['잠은', '보약이다', '잠은', '죽어서 자는게', '아니다', '그건', '죽은거다'];
  console.log(arr.toString()); // 잠은,보약이다,잠은,죽어서 자는게,아니다,그건,죽은거다
  console.log(arr.toString('ㅁ'));
  console.log(arr);            // ['잠은', '보약이다', '잠은', '죽어서 자는게', '아니다', '그건', '죽은거다']

  console.log(arr.join());     // 잠은,보약이다,잠은,죽어서 자는게,아니다,그건,죽은거다
  console.log(arr.join('/'));  // 잠은/보약이다/잠은/죽어서 자는게/아니다/그건/죽은거다

  console.log(arr); 

}