JavaScript_배열메소드-1

🙋🏻‍♀️·2022년 4월 9일
0

✔️배열의 메소드 (Array's Method)

let members = ['마크', '해찬', '런쥔', '천러', '지성', '재민', '제노'];
console.log(members)
//

["마크", "해찬", "런쥔", "천러", "지성", "재민", "제노"]

✔️Splice: 배열의 요소를 삭제한다⭐⭐⭐⭐⭐

let members = ['마크', '해찬', '런쥔', '천러', '지성', '재민', '제노'];

members.splice(4); //4번 인덱스 이후 요소들이 삭제됨. 값을 하나만 전달하면 전달된 인덱스로부터
                    //그 이후에 모든 요소들을 삭제해버림.
console.log(members); // [ '마크', '해찬', '런쥔', '천러' ]출력  


members.splice(1,4); //1번 인덱스를 시작으로 4번째까지 요소들이 삭제됨. 
console.log(members); // ["마크", "재민", "제노"]출력    

✍️정리
삭제할 인덱스를 첫번째 파라미터로 넣어주고 삭제할 개수를 입력해주면 깔끔하게 배열의
요소를 삭제할 수가 있다.




📢요소를 삭제한 뒤 새로운 요소 추가하기
: splice 메소드의 세번째 파라미터는 값을 전달하게 되면 삭제한 요소 자리에 그 값이 추가됨.

let members = ['마크', '해찬', '런쥔', '천러', '지성', '재민', '제노'];

members.splice(1, 1, '성찬','쟈니'); //-->'성찬','쟈니' 파라미터 추가
console.log(members); 
//
["마크", "성찬", "쟈니", "런쥔", "천러", "지성", "재민", "제노"]
//해찬 없어진 자리에 성찬,쟈니 추가되고 나머지 부분은 순서가 밀림

📢응용버전

let members = ['마크', '해찬', '런쥔', '천러', '지성', '재민', '제노'];

members.splice(1, 0, '성찬','쟈니'); //--> 두번째 파라미터를 0으로 변경
console.log(members); 
//
["마크", "성찬", "쟈니", "해찬", "런쥔", "천러", "지성", "재민", "제노"]
//아무것도 삭제되지 않고 파라미터 값만 새로 추가됨.

📢요소 수정하기

let members = ['마크', '해찬', '런쥔', '천러', '지성', '재민', '제노'];

members.splice(2,1,'샤오쥔'); //2번째인덱스 1개 삭제, 샤오쥔 추가
console.log(members); 
//["마크", "해찬", "샤오쥔", "천러", "지성", "재민", "제노"]//런쥔 삭제 샤오쥔 추가 완

📢요소 수정하기 2

let members = ['마크', '해찬', '런쥔', '천러', '지성', '재민', '제노'];

members.splice(2, 2, '샤오쥔'); //2번 인덱스부터 2개(런쥔,천러) 삭제, 샤오쥔으로 추가
console.log(members); 

//["마크", "해찬", "샤오쥔", "지성", "재민", "제노"] 출력



✍️실습과제

splice 메소드를 활용하여 아래의 미션들을 수행하세요.

  1. fruits 배열에 '토마토'를 삭제하고 그 자리에 '사과', '청포도'를 추가해 주세요.
  2. fruits 배열의 첫 번째 요소를 삭제해 주세요.
  3. ages 배열에 마지막 요소를 삭제해 주세요.
  4. ages 배열의 2번, 3번 인덱스를 26, 28로 변경해 주세요.
  5. numbers 배열에 1, 2, 3, 5, 8, 9를 순서대로 추가해 주세요.
  6. 반복문을 활용해서 numbers 배열의 요소들 중 홀수를 모두 삭제해 주세요.
    코드를 잘 작성하셨다면 다음과 같은 결과가 출력되어야 합니다.

🔹1. fruits 배열에 '토마토'를 삭제하고 그 자리에 '사과', '청포도'를 추가해 주세요.

let fruits = ['레몬', '토마토', '딸기', '바나나'];
let ages = [20, 24, 25, 29, 30, 33];
let numbers = [];

// 테스트 코드
console.log(fruits[1]);
console.log(fruits[0]);
console.log(ages[ages.length - 1]);
console.log(ages[3]);
console.log(numbers[3]);
console.log(numbers);

1번 미션은 fruits 배열에 '토마토'가 1번 인덱스에 있으니깐
1번 인덱스부터 1개를 삭제하고 그 자리에 '사과', '청포도' 를 추가해 주면 됩니다.
//
fruits.splice(1,1,'사과','청포도')


🔹2. fruits 배열의 첫 번째 요소를 삭제해 주세요.

fruits.splice(0,1)

🔹3. ages 배열에 마지막 요소를 삭제해 주세요.

배열의 마지막 요소의 index를 가지고, 요소 1개를 삭제하면 됩니다.
ages 배열의 마지막 요소 index는 5번입니다.

ages.splice(ages.length -1, 1)//-->배열의 요소 매번 셀 수 없음.
또는 ages.splice(5,1)

ages.splice(ages.length -1)//이건 배열의 마지막 인덱스 찾는거


🔹4. ages 배열의 2번, 3번 인덱스를 26, 28로 변경해 주세요.

ages.splice(2,2,26,28)


🔹5. numbers 배열에 1, 2, 3, 5, 8, 9를 순서대로 추가해 주세요.

numbers.splice(0,0,1,2,3,5,8,9)
//삭제할 개수를 0으로 두면 요소를 추가하기만 하겠죠?


🔹6. 반복문을 활용해서 numbers 배열의 요소들 중 홀수를 모두 삭제해 주세요.

(1)for문

예를 들어 number[0]이 홀수여서 제거되면, 1번 인덱스에 있던 요소가 0번 인덱스로 당겨지고, 2번 인덱스가 1번 인덱스로 당겨집니다.
그런데 for문의 동작부분이 수행될 때마다 i가 증가하기 때문에 삭제될 때 만큼은
이 i가 증가되는 현상을 방지해야 하는데요. 요소가 삭제될 때 i를 미리 한 번 감소시켜주면,
간단하게 문제를 해결할 수 있습니다.

numbers = [1,2,3,5,8,9]

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 !== 0) { //동작부분 true면 다음 동작 실행
    numbers.splice(i, 1);
    i--;
  }
}

(2)while문

let i = 0;
while (i < numbers.length) {
  if (numbers[i] % 2 !== 0) {
    numbers.splice(i, 1);
  } else {
    i++;
  }
}





0개의 댓글