[JS] arr.splice() - 배열 데이터 추가/제거/교체/추출

구문정리:

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

1.배열 요소 추가

const mine=[0,1,"이",3,"사",5,"육"]

mine.splice(2,0,"오렌지")
//배열 2번째 위치한 곳에 문자열"오렌지"를 추가한다

mine // [ 0, 1, '오렌지', '이', 3, '사', 5, '육' ]

start 값에 해당하는 index에 item값을 추가한다

배열의 마지막에 추가하고자 하면

mine.splice(mine.length,0,"오렌지")

이렇게 해당배열의 길이값을 start값으로 넣어주면 된다
Push()와 같은 효과

2. 배열 요소 제거

const mine=[0,1,"이",3,"사",5,"육"]

mine.splice(1,1) // 1번째 인덱스[1]부터 1개를 제거한다

mine //[ 0, '이', 3, '사', 5, '육' ]

mine.splice(1,2) // 1번쨰 인덱스[1]부터 2개를 제거한다

mine //[ 0, 3, '사', 5, '육' ]

start값 다음으로 오는 deleteCount값은 start값에 해당하는 index부터 삭제할 갯수를 의미한다
deleteCount값이 arr.length-start값보다 크면 제거가 멈춘다

ex)

const mine=[0,1,"이",3,"사",5,"육"]

mine.splice(1,8)

mine //[0]

3.배열요소 교체하기

const mine=[0,1,"이",3,"사",5,"육"]

// 배열 2번째부터 1개를 제거하고 숫자 2로 추가한다. 
mine.splice(2,1,2) 
mine // [ 0, 1, 2, 3, '사', 5, '육' ]

// 배열 1번째부터 2개를 제거하고 숫자 5로 추가한다. mine.splice(2,2,2) 
mine // [ 0, 1, 2, '사', 5, '육' ]

4.배열 요소 추출하기

array.splice() 자체도 리턴값을 가진다
잘라낸 값을 리턴값으로 가진다
ex)

const mine=[0,1,"이",3,"사",5,"육"]

mine.splice(2,2,2) // [ '이', 3 ]
const abc=mine.splice(2,2,2) // [ '이', 3 ]
abc // ['이',3]

mine // [ 0, 1, 2, '사', 5, '육' ]

이렇게 splice 함수의 리턴값을 배열로 선언해도 mine의 값은 변경되며 새로운 변수 abc에 저장된다

splice 활용

let email = "[email protected]"

function pwlize(email){
    let ID=email.split("@")[0].split("") 
    let dot=email.split("@")[1].split("")
//split을 통해 @를 기준으로 나눈후 다시 split으로 문자열을 배열 형태로 변경

    let IDresult =ID.splice(-2,2,"*","*")
//splice로 뒤에서 두번째 인덱스를 삭제 후 "*","*"로 교체

    let result = ID.join("")+"@"+dot.join("")
    return result 
    }
console.log(pwlize(email)) //codeca**@gmail.com

따라서 제거후 값을 변경하고자 한다면
1. index값으로 시작점으로 설정한뒤
2. 몇개 삭제할것인지를 두번째값으로
3. 삭제할 갯수만큼의 값을 이후값으로 넣어주면 된다

splice() 메서드에 대해 다시한번 말해보자면

splice(startNum, deleteCount, insertValue) 라고 볼 수 있으며

startNum(시작 순서) 부터, deleteCount(제거개수) 몇개를 제거하고 , insertValue(넣을 값) 값을 몇개 넣어라

라는 의미를 가지고 있다고 볼 수 있다.