003. 배열의 메소드
Splice
splice(startIndex, deleteCount, item)(삭제하고 싶은인덱스, 삭제할 개수, 추가할 아이템)
- 값을 하나만 전달하게 되면 전달된 인덱스로부터 그 이후에 모든 요소를 삭제
- splice메소드로 요소를 삭제한뒤 추가 가능 (item)
- splice메소드에서 삭제할 개수를 0으로 만들어주면 첫번쨰와 세번쨰 파라미터로 이후의 파라미터로 배열 안에 어느 곳이든 요소 추가 가능
- 세번째 이후에 파라미터를 활용하면 요소를 수정하는 것도 가능
- 삭제할 요소를 두개로 두고 세번째 네번쨰 파라미터를 활용하면 여러 요소를 수정하는것도 가능
let members = ["김경수", "홍준표", "이재명", "추미애", "한소희"];
// 01
members.splice(4); // 삭제하고 싶은 인덱스를 파라미터로 지정
console.log(members); // length 4 [ '김경수', '홍준표', '이재명', '추미애' ]
// 02
members.splice(1, 1, "도도", "삼색이");
console.log(members); // [ '김경수', **'도도', '삼색이'**, '이재명', '추미애' ]
// 03
members.splice(1, 0, "마를린", "야통이");
console.log(members); //[ '김경수', **'마를린', '야통이'**, '홍준표', '이재명', '추미애', '한소희' ]
// 04
members.splice(2, 1, "뚱땅이");
console.log(members); //[ '김경수', '홍준표', **'뚱땅이'**, '추미애', '한소희' ]
// 05
members.splice(2, 1, "동글이", "길쭉이");
console.log(members); // [ '김경수', '홍준표', **'동글이', '길쭉이'**, '추미애', '한소희' ]// splice(startIndex, deleteCount, item)
// 배열의 양 끝부분 요소 하나만을 다루는 경우에 splice를 사용하는 경우
// 배열의 첫 요소를 삭제
members.splice(0, 1);
// 배열의 마지막 요소를 삭제
members.splice(members.length - 1, 1);
//배열의 첫 요소로 값 추가
members.splice(0, 0, "동글이");
// 배열의 마지막 요소로 값 추가
members.splice(members.length, 0, "길쭉이");shift / pop / unshift / push
shift: 배열의 첫 요소를 삭제
(메소드를 호출하면 배열의 가장 첫 요소를 삭제하고 나머지요소는 앞으로 밀어준다)pop: 배열의 마지막 요소를 삭제unshift(value): 배열의 첫 요소로 값 추가push(value): 배열의 마지막 요소로 값 추가
let members = ["김경수", "홍준표", "이재명", "추미애", "한소희"];
console.log(members);
// splice(startIndex, deleteCount, item)
// 배열의 양 끝부분 요소 하나만을 다루는 경우에 splice를 사용하는 경우
// 배열의 첫 요소를 삭제 : shift (파라미터가 없는 메소드)
// member.shift하고 메소드를 호출하면 배열의 가장 첫 요소를 삭제하고 나머지요소는 앞으로 밀어준다
members.shift();
console.log(members);
// 배열의 마지막 요소를 삭제 : pop (파라미터가 없는 메소드)
members.pop();
console.log(members);
//배열의 첫 요소로 값 추가 : unshift(vlaue);
// unshift는 값을 추가하는거니까 메소드를 호출할때 파라미터로 추가할 값을 전달
members.unshift("귀요미");
console.log(members);
// 배열의 마지막 요소로 값 추가 : push(value);
members.push("샤샤");
console.log(members);배열 메소드 tip!
splice, shift, pop, unshift, push 말고도 배열에는 다양한 메서드들이 있습니다.
배열에서 특정 값 찾기 (indexOf / lastIndexOf)
배열에서 특정 값을 찾으려면 indexOf 메소드를 사용하면 됩니다. array.indexOf(item)을 하면 array 배열에 item이 포함되어 있는지 확인할 수 있습니다.
- 만약 포함되어 있다면,
item이 있는 인덱스가 리턴됩니다. - 포함되어 있지 않다면,
1이 리턴됩니다. - 여러 번 포함되어 있으면, 처음 발견된 인덱스가 리턴됩니다.
let brands = ['Google', 'Kakao', 'Naver', 'Kakao'];
console.log(brands.indexOf('Kakao'));
console.log(brands.indexOf('Daum'));1
-1그리고 비슷하게 lastIndexOf라는 메소드가 있는데요. indexOf와는 반대로 탐색을 뒤에서 부터 하게 됩니다. 그러니깐 방금과 같은 경우에 'Kakao'를 lastIndexOf 메소드로 찾게 되면 마지막에 있는 인덱스가 리턴되겠죠?
let brands = ['Google', 'Kakao', 'Naver', 'Kakao'];
console.log(brands.lastIndexOf('Kakao'));
console.log(brands.lastIndexOf('Daum'));3
-1배열에서 특정 값이 있는지 확인하기 (includes)
indexOf/lastIndexOf는 특정 값을 찾아서 해당 값의 index를 알려줍니다.
하지만, 때로는 그냥 그 값이 배열안에 있는지, 그 여부만 확인하고 싶을 수도 있는데요. 그럴때는 includes 라는 메소드를 활용하면 됩니다.
array.includes(item)을 하게되면 array배열에 item이 있을 경우 true를, 없을 경우 false를 리턴합니다.
let brands = ['Google', 'Kakao', 'Naver', 'Kakao'];
console.log(brands.includes('Kakao'));
console.log(brands.includes('Daum'));true
false배열 뒤집기 (reverse)
reverse라는 메소드를 활용하면, 배열의 순서를 뒤집을 수도 있습니다.
let brands = ['Google', 'Kakao', 'Naver', 'Kakao'];
console.log(brands);
brands.reverse();
console.log(brands);(4) ["Google", "Kakao", "Naver", "Kakao"]
(4) ["Kakao", "Naver", "Kakao", "Google"]배열 메소드 링크!!
사실 이 밖에도 배열이 가지고 있는 유용한 메소드들이 다양하게 있는데요.
더 많은 내용을 알고싶다면, 이 링크를 참고해보세요!
004. for...of 반복문
훨씬 더 간결하게 코드작성 가능 ( 배열도 하나의 객체!!! )*
for (변수 of 배열) {
동작부분;
}
let influencer = ["구구", "물티슈", "샐리", "예사", "서울우유", "일리커핔"];
for (let i = 0; i < influencer.length; i++) {*
console.log(influencer[i]);
}
for (let element of influencer) {
console.log(element);
}
// 앞의 변수에 프로퍼티 네임이 들어감 -> 배열의 경우 인덱스가 들어감
// 일반적인 객체에 좀더 최적화 되어잇기때문에 배열에서는 사용 권장 x
for (let index in influencer) {
console.log(influencer[index]);
}- 예제(득표수 확인하기)
// 투표 결과 리스트 let votes = [ "이재식", "이재식", "이규하", "이규하", "이규하", "이재식", "이재식", "이규하", "이규하", "이재식", "이규하", "이규하", "이규하", "이규하", "이재식", "이재식", "이규하", "이재식", "이재식", "이재식", "이재식", "이재식", "이규하", "이규하", "이규하", "이규하", "이규하", "이재식", "이규하", "이규하", "이규하", "이규하", "이재식", "이규하", "이규하", "이규하", "이재식", "이재식", "이재식", "이규하" ]; // 후보별 득표수 객체 // 03. 빈 배열을 만들어주기 let voteCounter = {}; // 01. for of -> votes의 후보이름을 name 변수에 지정 // votes 배열을 이용해서 voteCounter 객체를 정리하기 for (let name of votes) { // 코드를 작성하세요. // 02. name을 votecounter에 반영하기 -> (arr) // 04. voteCounter의 프로퍼티 유무 // 04-1. 있으면 [name] 추가 if (name in voteCounter) { // true voteCounter[name] += 1; } else { // false voteCounter[name] = 1; } } // 후보별 득표수 출력 console.log(voteCounter);
005. 다차원 배열
값들의 위치나 순서에 초점을 맞출때
의미가 중요할때는 객체를 만드는게 좀 더 효과적
let twoDimensional = [[1, 2],[3, 4]];
console.log(twoDimensional[0][1]); // 2
ㅂr람ㄸrㄹr, 水ㄸrㄹr...🌊