[JavaScript] JavaScript Array 객체

2023. 2. 8. 05:34JavaScript

1. Array 객체 생성

let arr = [값1, 값2, ...]; -> 생성과 동시에 초기화
let arr = new Array(); -> 배열을 생성하기만 함
let arr = new Array(배열크기); -> 생성과 동시에 공간을 만들어 둠

2. 주요 메소드

pop() arr.pop(); 배열의 마지막 요소를 제거 후 리턴
push() arr.push("안녕"); 배열의 마지막에 새로운 요소 추가
reverse() arr.reverse(); 배열의 요소 순서 반전
sort()
sort((a ,b) => {return a - b}
sort((a ,b) => {return b - a}
arr.sort();
arr.sort((a ,b) => {return a - b};
arr.sort((a ,b) => {return b - a};
배열 요소 정렬 - 기본값으로 오름차순
오름차순 : arr.sort((a ,b) => {return a - b};
내림차순 : arr.sort((a ,b) => {return b - a};
splice() arr.splice(1, 2); 요소의 지정된 부분 삭제 후 삭제한 요소 리턴
slice() arr.slice(1, 2) 요소의 지정한 부분 반환
concat() arr1.concat(arr2); 매개변수로 입력한 배열의 요소를 모두 합쳐서 배열 생성 후 반환
join() arr.join(" ");
arr.join("#");
배열 안의 모든 요소를 문자열로 변환 후 반환
indexOf() arr.indexOf("나라"); 배열의 앞쪽부터 특정 요소의 위치 검색
없으면 -1 반환
lastIndexOf() arr.indexOf("미국"); 배열의 뒤쪽부터 특정 요소의 위치 검색
없으면 -1 반환

3. 배열 예시

<script>
    // Array 객체 생성하는 법
    let arr1 = ["AB", "CD", "EFG", "가나다", 123];      // 생성과 동시에 초기화
    let arr2 = new Array();                             // 배열을 생성하기만 함
    let arr3 = new Array(5);                            // 생성과 동시에 공간을 만들어 줌
    let arr4 = new Array("AB", 123);                    // 생성과 동시에 초기화
    
    console.log(arr1);  // ['AB', 'CD', 'EFG', '가나다', 123]
    console.log(arr2);  // []
    console.log(arr3);  // [empty × 5]
    console.log(arr4);  // ['AB', 123]

    // pop() - 배열의 마지막 요소를 제거 후 리턴
    console.log("=============> pop")
    console.log(arr1.pop());    // 123
    console.log(arr1);          // ['AB', 'CD', 'EFG', '가나다']

	// push() - 배열의 마지막에 새로운 요소 추가
    console.log("=============> push");
    console.log(arr1.push("안녕!")); // 5
    console.log(arr1);               // ['AB', 'CD', 'EFG', '가나다', '안녕!']
    console.log(arr1.push("우리", "나라", "만세")); // 8
    console.log(arr1);               // ['AB', 'CD', 'EFG', '가나다', '안녕!', '우리', '나라', '만세']

	// reverse() - 배열의 요소 순서 반전
    console.log("=============> reverse");
    console.log(arr1.reverse());    // ['만세', '나라', '우리', '안녕!', '가나다', 'EFG', 'CD', 'AB']

	// sort() - 배열 요소 정렬// 기본값으로 문자열 오름차순
    console.log("==============> sort");
    console.log(arr1.sort());           // ['AB', 'CD', 'EFG', '가나다', '나라', '만세', '안녕!', '우리']
    console.log([1,2,7,8,3].sort());    // [1, 2, 3, 7, 8]
    // 오름차순 array.sort((a, b) => {return a - b}))
    console.log([1,2,7,8,3].sort((a, b) => {return a - b}));    // [1, 2, 3, 7, 8]
    // 내림차순 array.sort((a, b) => {return b - a}))
    console.log([1,2,7,8,3].sort((a,b) => {return b - a}));     // [8, 7, 3, 2, 1]

	// splice() - 요소의 지정된 부분 삭제 후 삭제한 요소 리턴
        // 앞, 뒤 둘다 포함
    console.log("=============> splice")
    console.log(arr1.toString())    // AB,CD,EFG,가나다,나라,만세,안녕!,우리
    console.log(arr1.splice(1,2));  // ['CD', 'EFG']
    console.log(arr1);              // ['AB', '가나다', '나라', '만세', '안녕!', '우리']

	// slice() - 요소의 지정한 부분 반환
    console.log("============> slice()");
    console.log(arr1.toString())    // AB,가나다,나라,만세,안녕!,우리
    console.log(arr1.slice(1, 3))   // ['가나다', '나라']
    console.log(arr1.toString());   // AB,가나다,나라,만세,안녕!,우리

	// concat() - 매개변수로 입력한 배열의 요소를 모두 합쳐서 배열 생성 후 반환
    console.log("================> concat");
    console.log([1, 2, 3].concat(3, "하루", "길동", "AB"))  // [1, 2, 3, 3, '하루', '길동', 'AB']

    let a1 = [1, 2, 3];
    let a2 = ['우리', '나라', '만세']
    let a3 = a1.concat(a2);
    console.log(a3.toString())      // 1,2,3,우리,나라,만세

	// join() - 배열 안의 모든 요소를 문자열로 변환 후 반환
        // 배열 요소 사이에 값을 추가해서 반환
    console.log("=================> join")
    console.log(arr1.join());       // AB,가나다,나라,만세,안녕!,우리
    console.log(arr1.join(" "));    // AB 가나다 나라 만세 안녕! 우리
    console.log(arr1.join("#"));    // AB#가나다#나라#만세#안녕!#우리
    console.log(arr1.join(""));     // AB가나다나라만세안녕!우리

	// indexOf()    배열의 앞쪽부터 특정 요소의 위치 검색
    console.log("=================> indexOf")
    console.log(arr1.indexOf("나라"));  // 2
    console.log(arr1.indexOf("미국"));  // -1(없다)

    // lastIndexOf()    배열 뒤쪽부터 특정 요소의 위치 검색
    console.log("=================> lastIndexOf")
    console.log(arr1.lastIndexOf("나라"));  // 2
    console.log(arr1.lastIndexOf("미국"));  // -1(없다)
</script>

4. Array 반복

- 메소드 안에 변수 대신에 함수를 넣을 수 있다.

- 변수는 메소드에서 변수를 사용한다는 뜻이지만 함수는 이 함수를 호출하겠다라는 뜻이다.

- 매개변수인 index 만큼 반복을 함

forEach() 배열을 for in 반복문처럼 사용 가능 array.forEach((element, index, array) => {
       반복 처리
});
element : 값, index : 인덱스, array : 배열
map() 기존의 배열에 특정 규칙을 적용해서 새로운 배열 생성 const res = array.map((element, index) => {
       return element + 연산
});
filter() 특정 조건을 만족하는 요소를 추출해 배열 생성 const res = array.filter((element, index, array) => {
       return element < 5
});
find() 특정 조건을 만족하는 요소를 1개만 검색 const res = array.find((element, index, array) => {
       return element === 5
});
findIndex 특정 조건을 만족하는 요소 1개의 위치를 검색 const res = array.findIndex((element, index, array) => {
       return element === 5
});
every() 배열의 요소가 조건을 만족하는지 확인
(모든 요소가 조건에 만족해야 true)
const res = array.every((element, index, array) => {
       return element < 10
});
some() 배열의 요소가 특정 조건을 적어도 하나는 만족하는지 확인
(만족시 종료)
const res = array.some((element, index, array) => {
       return element < 10
});
  • forEach() / map()
    - forEach()는 단순한 반복을 할 때 사용하고, map()은 반복과 더불어 배열 안에 값을 바꿀 때 사용한다.
  • filter()
    - return 으로 나타내는 조건에 만족하는 모든 요소들을 첫 인덱스부터 끝 인덱스까지 검사를 해 배열로 반환한다.
  • find() / findIndex()
    - find()는 배열의 첫 인덱스부터 마지막까지 순서대로 조건을 검사하다가 조건에 맞는 값을 반환하고 반복문 종료

    - findIndex()는 find()와 똑같지만 index를 반환한다.