JavaScript_배열의 주요 메소드

splice

- 배열에서 지정된 위치에 아이템을 삭제하거나 추가할 수 있다

 

splice 구성

splice(index, howmany, item, item ...)
index : 삭제/추가 발생할 인덱스
howmany : 삭제할 갯수
(0을 입력하면 삭제되지 않는다)
(index 위치부터 갯수만큼 삭제된다)
item : index 위치에 추가할 값
(추가할 값이 없을때는 생략 가능)

 

 

forEach

- 배열의 처음부터 끝까지 배열의 모든 값을 반복처리 한다

(배열의 저장된 모든 값을 소비할 때 사용하는 메소드)

 

forEach 구성

forEach(currentValue, index) {...}
currentValue : 배열의 현재 값을 전달받는다
index : 배열의 현재 인덱스 값을 전달받는다

 

예시
// 배열에 들어있는 값의 총 합계를 계산해서 출력하기
let numbers = [1, 3, 7, 9, 3, 9, 3, 6, 2];
int total = 0;
numbers.forEach(function(num) {
	total += num;
});
console.log(total);
// total : 43

 

 

filter

- 배열의 값 중에서 테스트를 통과한 값만 모아서 새로운 배열로 반환한다

(배열에서 특정 조건을 만족하는 요소들만 선택하고 싶을 때 유용하게 사용할 수 있다)

 

filter 구성요소

filter(function (currentValue, index) {...})
currentValue : 현재 처리 중인 요소의 값
index : 현재 처리 중인 요소의 인덱스

 

예시
// 짝수만 찾아내기
let numbers = [1, 3, 7, 9, 3, 9, 3, 6, 2];
numbers.filter(function(num) {
    if(num %2 == 0) {
    	return true;
    } else {
    	return false;
    }
})
console.log(evenNumbers) --> [2]

 

 

map

- 배열에 모든 값에 대해서 지정된 함수를 한번씩 실행하고 결과를 새로운 배열로 반환한다

(배열에 저장된 값을 다른 형태의 값으로 변환하고 싶을 때 사용하는 메소드)

 

map 구성요소

map(function(currentValue, index) { ... })
currentValue : 현재 처리중인 배열의 요소
index : 처리 중인 요소의 인덱스

 

예시
let numbers = [1, 2, 3, 4];
// 배열의 값에 10을 곱한 값을 획득하기
let arr = numbersmap(function(num) {
	return num*10
})

console.log(arr) ---> [10, 20, 30, 40];

 

 

reduce

배열에 저장된 값을 하나의 값으로 집계하는 메소드

 

예시
let numbers = [10, 20, 30, 40]
let total = 0;
return result = numbers.reduce(function(total, num) {
	return total + num;
})
console.log(result) // 100이 출력된다


function(total, num)은 배열의 값에 대해서 한번씩 실행된다
	function(0, 10)  --> 반환값은 10	---> total도 10이 된다
	function(10, 20) --> 반환값은 30	---> total도 30
	function(30, 30) --> 반환값은 60	---> total도 60

 

 

 

join

배열의 모든 요소를 연결해서 하나의 문자열로 반환한다

예시
let arr = ["홍길동", "김유신", "강감찬"]
let text = arr.join();
// text ---> "홍길동,김유신,강감찬"
console.log(text);

let arr = ["홍길동", "김유신", "강감찬"]
let text = arr.join("-");
// text ---> "홍길동-김유신-강감찬"

 

 

배열에서 요소를 찾아내는 메소드

 

 

indexOf(값)

지정된 값이 배열에서 처음으로 등장하는 인덱스를 반환

존재하지 않으면 -1을 반환한다

 

예시
let arr = [10, 20, 30, 40, 30, 20, 10, 30, 10, 20, 40]
// index값은 2
let index = arr.indexOf(30);
// index 값은 7

 

 

lastIndexOf(값)

지정된 값이 배열에서 마지막으로 등장하는 인덱스를 반환한다

존재하지 않으면 -1을 반환

 

예시
let arr = [10, 20, 30, 40, 30]
// index값은 4
let index = arr.lastIndexOf(30);

 

 

find

함수는 배열의 모든 값에 대해서 한번씩 실행된다

true 또는 false 값을 반환하는데 true를 반환하는 첫번째 값이 find 메소드의 최종결과다

 

find(function(value, index){ ... })

예시

let arr = [40, 35, 69, 50, 80]
// 배열의 값 중에서 60보다 크거나 같은 값 중에서 처음으로 발견되는 값
// 
let result = arr.find(function(num, index) {
	return num >= 60;
}

 

 

findIndex

함수는 배열의 모든 값에 대해서 한번씩 실행된다

true 또는 false 값을 반환하는데 true를 반환하는 첫번째 값이 find 메소드의 최종결과다

 

findIndex(function(value, index){ ... })

예시
let arr = [40, 35, 69, 50, 80]
// 배열의 값 중에서 60보다 크거나 같은 값 중에서 처음으로 발견되는 값의 인덱스
// index 값은 2다
let result = arr.findIndex(function(num, index) {
	return num >= 60;
}

 

 

 

기타

 

push(값)

배열의 끝에 값을 추가한다

 

unshift(값)

배열의 맨 앞에 값을 추가한다

원래 있던 값들을 전부 한칸씩 뒤로 이동한다

 

pop(값)

배열의 맨 마지막값을 삭제하고, 그 값을 반환한다

 

shift

배열의 맨 처음 값을 삭제하고, 그 값을 반환한다

두번째 있던 값들부터 전부 한칸씩 앞으로 이동한다