반응형
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를 반환한다.
반응형
'FrontEnd > JavaScript' 카테고리의 다른 글
[JavaScript] DOM 노드 읽기, 탐색, 추가, 삭제 (0) | 2022.10.06 |
---|---|
[JavaScript] 문서 객체 모델(DOM) (0) | 2022.10.05 |
[JavaScript] typeof / instanceof, String 객체 (1) | 2022.09.30 |
[JavaScript] JavaScript 내장 객체, Object 객체, Number 객체 (0) | 2022.09.27 |
[JavaScript] JavaScript 객체 (0) | 2022.09.27 |