JS - 배열
- 3 minsJavascript - 배열
배열 (Array)
- 순서가 있는 데이터의 목록
- 객체와 더불어 실제로 웹 애플리케이션을 구현할 때 가장 많이 쓰이는 변수 타입
- 선언 방식은 객체와 유사
[]: 배열 리터럴이라고 하며 배열을 정의할 때 사용- 배열은 index 라고하는 순서가 존재, 0부터 시작함.
var arr = [];
arr[0] = 10;
arr
// [10] 출력 됨
arr[1] = 20;
arr
// (2) [10. 20] 출력
배열의 요소
-
객체는
속성/값조합으로 데이터를 저장하지만 배열은인덱스/값조합으로 데이터 저장 -
배열의 길이 알아 낼 때 :
length사용
자주 사용하는 배열 API
배열을 조작할 때 주로 사용하는 API는 다음과 같음.
- push(): 배열에 데이터 추가 (맨 끝 인덱스부터 추가됨)
- slice(): 배열의 특정 인덱스에 있는 값을 반환 (배열의 내용이 변환되지 - 않음)
- splice(): 배열의 특정 인덱스에 있는 값을 변경 또는 삭제 (배열의 내용이 변경됨)
- pop(): 배열의 마지막 인덱스의 값을 꺼냄 (배열의 내용이 변경됨)
- shift(): 배열의 첫번째 인덱스의 값을 꺼냄 (배열의 내용이 변경됨)
var arr = ['a' , 'b'];
arr
// (2) ['a' , 'b'] 출력
arr.length
// 2 출력
var arr = [];
arr.push(10);
arr
// [10] 출력
arr.splice(0, 1) // 0번째 인덱스 1개 삭제
arr
// [] 출력
배열 반복문
- forEach()
var arr = ['a', 'b', 'c'];
arr.forEach(function(value) {
console.log(value)
})
배열 주요 API (map, filter)
- 배열의 데이터를 조작하거나 변경할 때 사용
- map: 배열에 대해 각각 어떤 데이터를 변형한 다음에 이 배열의 길이를 유지한 상태로 조작 (맵을 사용한다고 해서 기존의 값이 바뀌진 않음. 새로운 값 출력)
- filter: 배열 안에 있는 특정 아이템에 대해서 꺼내올 때 사용. (배열의 길이가 조작됨)
// [10, 20, 30]
// map -> [100, 200, 300]
// filter -> [10]
var arr = [10, 20, 30];
arr.map(function(item) {
return item * 10;
})
// (3) [100, 200, 300] 출력
arr
// (3) [10, 20, 30]
arr.filter(function(item) {
if (item ==10) {
return true;
}
})
// [10] 출력
반복문으로 map, filter 코드 대체하기
var arr = [10, 20, 30];
var newArr = [];
arr.forEach(finction(item) {
newArr.push(item);
});
newArr
// (3) [100, 200, 300] 출력
var newArr = [];
arr.forEach(function(item) {
if (item == 10) {
newArr.push(item);
}
});
newArr
// [10] 출력