자바스크립트 배열 메서드

김익현·2022년 6월 7일
0

자바스크립트 배열 메서드

자바스크립트에는 배열이라는 종류가있는데 여기에 접근하는 방법이 매우 많습니다.

접근하려면 반복문을 쓰는 방법도 있는데 반복문을 길게 작성하는것보다 메서드를 쓰면 더욱 쉽게 작성할수있다.

메서드의 기본 문법은 배열.메서드() 이렇게 쓴다.

메서드를 쓰는이유

일단 예를 들어보자.

배열을 역순을 보고 싶을때

for문

array = [1,2,3,4,5] //이 배열을 역순으로 바꾸고싶을때
function reverseArray (array) { //reverseArray = 함수명 array = 매개변수
	let newArray = []; // newArray = 배열변수
	for(let i=0; i<array.length; i++) { //배열 한바퀴를 도는 반복문
		newArray.unshift(array[i]) //newArray배열 맨앞에 한숫자씩 추가 1추가 2추가 ~ 5추가까지.
	} return newArray; // 함수의 결과는 newArray의 배열
}
console.log(reverseArray(array)); // [5,4,3,2,1]

메서드 문

array = [1,2,3,4,5]
array.reverse(); //배열을 역순으로 하는 메서드
console.log(array) = [5,4,3,2,1] 

이렇게 간단해진다…

배열 요소 추가 및 제거 메서드

배열에 요소를 추가하는경우 .push .unshift

array = [1,2,3]
array.push(7);
console.log(array) = [1,2,3,7];

array.unshift(9);
console.log(array) = [9,1,2,3,7];

.push는 배열의 맨마지막에 값을 추가시켜주는 메서드이고,
.unshift는 배열의 맨앞에 값을 추가시켜주는 메서드이다.

배열에 맨앞요소나 맨뒤요소를 제거하는경우 .pop .shift

array = [1,2,3,4,5]
array.pop();
console.log(array) = [1,2,3,4]

array.shift();
console.log(array) = [2,3,4]

.pop은 배열의 맨뒤에 있는 값을 제거해주는 메서드이고
.shift 는 배열의 맨앞에 있는 값을 추가해주는 메서드이다.
제거해주는 메서드이므로 뒤에 따로 숫자가 들어가지는 않는다.

slice (새로운 배열을 만들지만 제거는 불가) 와 splice (배열의 원하는부분 제거 가능)

.slice(start,end)

start는 원하는배열의 시작부분 end는 원하는배열의 마지막부분을 정할수있다.

시작값에 음수가 들어가면 배열 끝부터 거꾸로 감.

end부분을 안적으면

하지만 slice는 기존 배열은 절대 건들지 않으며 원하는값만 가져올수있다.

array = [1,2,3,4,5,6,7]
array.slice(2,4);
array = [1,2,3,4,5,6,7] //이렇게 써도 배열은 그대로 유지된다
// slice를 사용하려면 새로운 변수를 만들어주어야한다.
let newArray1 = array.slice(2,4); // 아래를 참고하면 각 값에 사이값을 넣어주면 
//그사이 값이 나온다 ,에 숫자를 넣으면 쉬움.
console.log(newArray1) = [3,4] 
let newArray2 = array.slice(-2);
console.log(newArray2) = [6,7]

스크린샷 2022-06-06 오후 11.41.29.png

.splice(start,deletecount,item1,item2 …)

start 값은 slice와 마찬가지로 시작인덱스를 정하는부분이다
ㄴstart 값이 배열길이보다 클때는 0으로 바뀜.(-도 절댓값으로 길면 바뀜)
deletecount 는 내가 지우고싶은 배열의 수를 정하는부분이다. 1은 시작부분만 2는 시작부분과 한개더
ㄴ값이 0이면 아무것도 안지움.
item1,item2… 는 추가하고싶은 아이템을 넣을수있다.

splice는 기존배열을 건들며 기존배열에 그부분이 삭제된다.

array = [1,2,3,4,5,6,7]
array.splice(2,4); //3부터 시작하여 4개를지움 [3,4,5,6]
console.log(array) = [1,2,7]

array1 = [1,2,3,4,5,6,7]
array1.splice(-2,2,3,4); // 거꾸로 6부터 시작하여 2개를지움 [6,7] 그자리에 3,4가 들어감
console.log(array1) = [1,2,3,4,5,3,4]

array2 = [1,2,3]
array2.splice(7,1); //7이 배열의 길이보다 크기때문에 0으로 바뀜
console.log(array2) = [2,3]

array3 = [1,2,3,4]
array3.splice(2,0) // 두번째 숫자가 0이기 때문 아무것도 안지움
console.log(array3) = [1,2,3,4]

배열을 합쳐주는 concat()

concat 메서드는 두배열을 합쳐주는 역할을 한다

slice와 마찬가지로 두배열을 합쳐는 주지만 기존 배열은 건들지않음.

중복은 아쉽게도 한배열에 통합됨.

array1 = [1,2,3]
array2 = [3,4,5]
array3 = [[7,8],[9]] //이렇게 배열안에 배열이 있는경우는 어떻게될까?

array1.concat(array2);
console.log(array1) = [1,2,3] //위에 합쳤지만 기존배열은 그대로임

let array4 = array1.concat(array2)
console.log(array4) = [1,2,3,3,4,5] // 이런식으로 새로운 변수를 지정해줘하고 중복은 포함됨.

let array5 = array2.concat(array3)
console.log(array5) = [3,4,5,7,8,9] // 이런식으로 배열안에 배열도 하나로 통합시켜줌

배열을 뒤집어주는 reverse()

위에 예시에 나왔듯이 배열을 뒤집어줌.

이거말고도 forEach,map,reduce,filter,reduce,sort 등등 많지만 공통발표기때문에 다음에 알아보자…

궁금하신분들은 목요일날 저한테 물어보세요~

profile
놀땐 화끈하게 놀고, 할땐 부끄럽지않게 확실하게 하자!!

0개의 댓글