Js 배열

Hanachoi 2022. 5. 21. 22:06

다양한 자료형을 하나로 묶어 놓은 것.
예를들어, 사과,배,참외, 귤 등 과일들을 정하는데 일일히 변수를 지정하면 갯수가 매우 많아질 때 정리하기가 어려워진다. 그래서 우리는 fruit라는 배열을 만들어 그 안에 과일들을 넣어서 정리를 할 수 있다.
배열을 정할때는 대괄호[]로 사용한다. 사과, 배, 참외, 귤은 배열안에 들어있는 요소(element)라고 부른다.
배열에서 자릿수는 0부터 시작. 인덱스 0,1,2...이렇게 넘어간다.

const fruit = ['사과','배','참외','귤']

배열안에는 또 배열이 들어갈 수도 있음

const arrayOfArray = [[1,2,3],[4,5]];
arrayOfArray[0]; // [1,2,3]

변수들도 배열안에 들어갈 수 있음

const a = 10;
const b = 20;
const variableArray = [a,b,30];
variableArray[1]; //20(b의값)

배열에 들어있는 요소의 갯수를 알고싶으면 .length붙여주면 알수 있음
배열안에는 문자열, 숫자, undefined, boolean,배열,null 다 들어갈 수 있음
빈 값도 유효한 값이기 때문에 요소갯수를 셀 때 포함됨 null , undefined, false, '', NaN
배열은 배열마다 안에 들어있는 요소가 다를 것이기 때문에 길이도 다를 것이다. 그럼 마지막 번째 인덱스 요소는 어떻게 찾을 수 있나? [배열.length - 1 ] 하면 마지막 인덱스값을 찾을 수 있다.
그럼 똑같은 원리로 마지막에서 3번째 인덱스를 찾으려면? [배열.length - 3] 하면 찾을 수 있다.

#배열에 요소 추가하기

기본적으로 원하는 배열의 인덱스에 값을 추가하면 됨

const group = [1,2,3,4,5]
group[5] = 6
console.log(group) // 1,2,3,4,5,6 //

배열의 마지막에 요소를 추가하고 싶을 때, 배열의 길이만큼 잡아서 넣어 줄 수 있다. target.length -1 이 마지막 인덱스 자리니까 +1한다면 그 다음 자리로 들어갈 수 있다.
.push를 사용해서도 넣을 수 있음.
const로 우리가 배열을 만들었는데도 이렇게 요소를 넣을 수 있는건? 배열 자체를 바꿀 수는 없지만 내부의 값은 얼마든지 바꿀 수 있음.

const target = ['가', '나', '다', '라', '바'];
target[target.length] = '마';
console.log(target);

배열 가장 앞에 요소를 추가하고 싶으면? [배열.unshift('가')] unshift를 사용해서 요소를 넣어주면 배열을 하나씩 밀고 맨 앞에 요소를 넣어줄 수 있다.

#배열의 요소 제거하기

마지막 요소를 제거하고 싶을때는 [배열.pop();]
첫번재 요소를 제거하고 싶을때는 [배열.shift();]
가운데 요소를 제거하고 싶을때는 splice 사용. splice에서는 값을 두개 사용함. 첫 번째는 인덱스, 두번째는 제거할 요소의 갯수. 지금 아래에서는 인덱스2번째인 3부터 두개를 삭제한다.
만약 splice()안에 숫자를 하나만 쓰면 그 인덱스 값뒤로 싹 지워버린다.

const target = [1,2,3,4,5]
target splice(2,2);
console.log(target); //1,2,5 출력//

splice로 값을 제거한 자리에 다른 값을 넣을 수도 있다. splice의 세번째 자리부터 바꿀 값을 넣어주면 됨

const target = ['가', '나', '다', '라', '마'];
  target.splice(1, 3, '타', '파');
  console.log(target); // ["가", "타", "파", "마"] 출력

splice를 이용해서 아무것도 안지우고 요소를 넣을 수도 있음.
지우는 값을 0으로 해주면 아무것도 안지우고 그 인덱스 앞에 넣고싶은 요소를 넣어줌.

const target = [1,2,3,4,5]
target.splice(1,0,8)

target; //[1,8,2,3,4,5]  출력

#배열에서 요소찾기

배열에서 특정요소가 있는지 찾는 일종의 검색기능이 있음. [배열.includes()]

const target = [1,2,3,4,5]
const result = target.includes(2);
const result2 = target.includes(7);

console.log(result,result2); // true, false나옴//

검색하고 싶은 값이 몇 번째 인덱스에 위치하는지도 알 수 있음

target.indexof() // 앞에서부터
target.lastIndexOf() //뒤에서부터

만약에 해당하는 값이 배열안에 들어있지 않다면 값으로 그냥 -1이 출력됨.

#배열 반복하기

보통 배열,문자열 처럼 '열'자가 들어간 애들은 반복되는 경우가 많고 반복을 위해서 쓰는 경우가 많다. 그래서 반복문이랑 함께 쓰인다.
while, for 문과 모두 같이 사용가능하다.

const target = [1,2,3,4,5]

let i = 0; 
while (i<target.length){
    console.log(target[i])
    i++;
}
/*1
2
3
4
5
*/

문자열의 길이를 알고 싶으면 문자열의 길이도 찾아낼 수 있다.

'가나다라'.length // 4 출력

const target = '가나다라마바사'
let i = 0; 
while (i<target.length){
    console.log(target[i])
    i++;
}

#배열 메소드(수정,조회)

Q. 다음 배열에서 '라'를 모두 제거하려면? (hint : 이렇게 '모두'라는 말이 들어있으면 반복문을 사용!)

const arr = ['가','라','가','라','가','라'];

arr.indexOf('라') // 1
arr.splice(1,1) // 첫번째 '라'삭제

arr.indexOf('라') // 2 (1번째 '라'는 사라진 상태니까 현재 이 배열의'라'는 인덱스2)
arr.splice(2,1) // 두번째 '라'삭제

arr.indexOf('라') // 3
arr.splice(3,1)

arr.indexOf('라') // 마지막으로 혹시나 '라'가 더 있나 확인해봄 //
//-1출력. 배열안에 해당하는 값이 없다는 뜻 //

//라 모두 삭제됨

지금 여기서 반복되는 코드를 반복문으로 만들어보자.
반복문의 핵심은 반복문의 조건이 내가 반복하고 싶은 동안은 true, 멈추고 싶을때는 false가 되도록 만들어야 함.
반복문이 언제까지 반복되어야 할지도 생각해야함.
반복문을 만들기가 너무 어렵다면 먼저 절차를 쭉 써본담에 공통점을 찾는게 좋다.

const arr = ['가','라','나','라','다','라']

while(arr.indexOf('라') !== -1){
	arr.splice(arr.indexOf('라'),1)
}


while(arr.indexOf('라') > -1){ // 위에서 절차를 생각해봤을때 -1값이 나오기전까지는 index숫자가 다 -1 이상의 숫자였으니까 이렇게 설정. 
	arr.splice(arr.indexOf('라'),1)
}

//['가','다','마']

const arr = [1,2,3,4,5]

arr.indexOf(1) // 0

if(arr.indexOf(1)){
	console.log('1찾음')
}else{
	console.log('못찾음')
}

//'못찾음' 출력

지금 위의 코드에서는 분명 배열안에 1이 있어서 if의 조건식이 참인데도 else문의 값이 나왔다. 왜그럴까? 우리가 공부할때 false가 되는 값 6가지가 있었다. : false, NaN, 0, '' , null, undefined 얘네가 if문에 들어가면 무조건 false가 된다. 그래서 지금 위의 코드는 else문이 실행된 것

if(arr.indexOf(1) > -1){
	console.log('1찾음')
}else{
	console.log('못찾음')
}

조건식을 위처럼 바꿔주면 됨. arr.indexOf(1) > -1 이면 1이 존재하냐, 안하냐를 판단하게 됨