✅ Array
1️⃣ 배열 타입 확인 방법
- 불린형으로 반환합니다.
Array.isArray()
2️⃣ 배열 요소 삭제 하기
- index 하나를 삭제합니다.
- 삭제 해도 배열의 길이는 그대로입니다.
delete name[index]
3️⃣ Array 반복문
- 반복문 문법을 통해 객체에 접근이 가능합니다.
- 반복문 문법
for ... length: index접근for ... of: element 접근for ... in: key 접근
//for...length
for (let i = 0; i < array.length; i++) {
}
// for...of
for (variable of iterable) { // variable : 각 반복에 서로 다른 속성값이 variable에 할당
statement // iterable : 반복되는 열거가능(enumerable)한 속성이 있는 객체
}
// for...in
for (let key in array) { // variable : 매번 반복마다 다른 속성이름(Value name)이 변수(variable)로 지정
statement // object : 반복작업을 수행할 객체로 열거형 속성을 가지고 있는 객체
}
4️⃣ Array 탐색
index 탐색(앞 ➡️ 뒤)
Array.indexOf(item, from)index 탐색(뒤 ➡️ 앞)
Array.lastIndexOf(item, from)값 포함 여부 확인
Array.includes(item, from)
배열 변형
// 정렬 반전
Array.reverse()
// 정렬
Array.sort()
배열 값을 문자열로 변환
Array.join()
✅ 고차 함수
- 하나 이상의 함수를 매개변수로 취하거나 함수를 결과로 반환하는 함수
- 매개변수로 전달되는 함수는 콜백 함수(callback function)
1️⃣ 임의 정렬 : sort의 한계와 문제
위 이미지를 보면 10과 12가 더 작은 숫자보다 작게 나오는데, 원인은 배열의 요소가 문자형으로 변경되기 때문에 앞자리만 놓고 순서를 정렬하게 되기 때문입니다.
또한, 문자열로 되어있을 경우에는 대소문자를 구별하여 정렬하기 때문에 이 부분도 처리를 해줘야 합니다.
💡 해결
들어온 인자를 문자열 대신 숫자를 비교하기 위해 x - y를 적어 순차적 정렬을 할 수 있습니다.
반대로 하면 역순 정렬이 가능합니다.
대소문자 구별은
toUpperCase()나toLowerCase()로 인자를 변환한 뒤 x - y를 작성하여 정렬 가능합니다.
2️⃣ 반복 작업
- 배열 요소별 콜백 함수 각각에 실행합니다.
array.forEach(function (item, index, array){})item: 배열 요소index: 배열 위치array: 배열
3️⃣ 누적 결과값 반환
accumulator: 이전 함수의 결과값
Array.reduce(function (accumulator, item, index, array){})
4️⃣ 콜백 함수 결과를 배열로 반환
- 배열 요소별 함수 호출 및 결과를 배열로 반환합니다.
item: 배열 요소index: 배열 위치array: 배열
Array.map(function (item, index, array){})
5️⃣ 조건을 만족하는 하나의 값 반환
- 객체 값 찾기
Array.find()
6️⃣ 조건을 만족하는 값을 배열로 반환
Array.filter()
filter와find의 차이점
filter: 조건을 만족하는 모든 값을 반환find: 조건을 만족하는 최초의 하나의 값만 반환
✅ Collection - Map
Collection이란 ❓
구조 혹은 비구조화 형태로 프로그래밍 언어가 제공하는 값을 담을 수 있는 공간 입니다.
- 다양한 자료형의 key를 허용하고, key-value 형태의 자료형을 저장하고 가능할 수 있는 Collection 입니다.
- Map은 Object 대비 비교하면 다양한 key의 사용을 허용하고, 값의 추가/삭제 시 메서드를 통해 수행이 필요합니다.
1️⃣ 요소 추가/삭제
- 다양한 자료형을 key로 사용 가능하며, map.set 호출 시 map이 반환되므로 체이닝이 가능합니다.
- 요소 추가 :
Map.set(key, value) - 요소 접근 :
Map.get(key) - 요소 전체 삭제 :
Map.clear()
- 요소 추가 :
2️⃣ map 반복문
- Collection 객체인 Map이 가지고 있는 iterator 속성을 이용하여 for…of 구문을 통해 반복문 수행이 가능합니다.
for (let item of name){}
3️⃣ Map ➡️ Object 변환
Object.fromEntries() // 오브젝트로 변환
Object.entries() // key와 value를 한쌍의 배열로 변환
✅ Collection - set
- value만 저장하며 중복을 허용하지 않는 Collection 입니다.
- 생성자 : new Set()
- 개수 확인 : Set.size
- 요소 추가 : Set.add(value)
- 요소 삭제 : Set.delete(value)
- 전체 삭제 : Set.clear()
- 요소 존재 여부 확인 : Set.has(key)
- 그 외 메서드 : Set.keys(), Set.values(), Set.entires()
1️⃣ set 반복문
- Collection 객체인 Set이 가지고 있는 iterator 속성을 이용하여 for…of 구문을 통해 반복문 수행이 가능합니다.
✅ Collection - Math
- 수학적인 연산을 위한 속성값과 메서드를 제공하는 객체입니다.
- 생성자 함수가 아니기 때문에, Math.function()으로 언제든 호출이 가능합니다.
- 오일러 상수(e) : Math.E
- PI : Math.PI
- 절대값 : Math.abs(x)
- 최대값 : Math.max(x)
- 최소값 : Math.min(x)
- 랜덤 난수 값 : Math.random()
- 제곱과 제곱근 : Math.pow(x, y) / Math.sqrt(x)
- 소수점 처리 : Math.round(x) / Math.ceil(x) / Math.floor(x)
✅ Collection - Date
- 날짜와 시간을 위한 속성값과 메서드를 제공하는 객체 입니다.
- Date 객체 생성자 : new Date()
- 생성자 종류 : new Date(), new Date(miniseconds), new Date(datestring), new Date(year, month, date …)
- 현재 시간 기준 문자열 : Date()
- 날짜 정보 얻기 : Date.getFullYear(), Date.getMonth(), Date.getDate()
- 시간 정보 얻기 : Date.getHours(), Date.getMinutes(), Date.getSeconds()
- 날짜 정보 설정 : Date.setFullYear(), Date.setMonth(), Date.setDate()
- 시간 정보 설정 : Date.setHours(), Date.setMinutes(), Date.setSeconds()
- 그 외 날짜 정보 얻기 : Date.getDay(), Date.getTime(), Date.getTimezoneOffset()
- 그 외 날짜 정보 수정 : Date.parse(string)
- Date 객체 생성자 : new Date()
✅ Collection - N차원 배열
- 배열 안에 N개 만큼의 배열이 존재하는 객체입니다.
- 2/3차원 지도 정보나 RGB를 저장하는 2차원 사진 파일 등을 표현할 때 활용이 가능합니다.
- Array[n][m]으로 접근이 가능합니다.
#UXUI #코린이