let members = ['마크', '해찬', '런쥔', '천러', '지성', '재민', '제노']; console.log(members) // ["마크", "해찬", "런쥔", "천러", "지성", "재민", "제노"]
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 메소드를 활용하여 아래의 미션들을 수행하세요.
- fruits 배열에 '토마토'를 삭제하고 그 자리에 '사과', '청포도'를 추가해 주세요.
- fruits 배열의 첫 번째 요소를 삭제해 주세요.
- ages 배열에 마지막 요소를 삭제해 주세요.
- ages 배열의 2번, 3번 인덱스를 26, 28로 변경해 주세요.
- numbers 배열에 1, 2, 3, 5, 8, 9를 순서대로 추가해 주세요.
- 반복문을 활용해서 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++; } }