배열 원소를 검색하여 없애거나 바꾸기

문제

어떤 배열에서 주어진 값을 찾아서 원소를 제거하거나 다른 값으로 치환하고 싶다.

해결

Array의 indexOf와 splice 메서드를 사용하면 배열 원소를 찾아 제거하거나 치환할 수 있다.

var animals = new Array("dog","cat","seal","walrus","lion","cat");

//배열에서 원소 제거
animals.splice(animals.indexOf("walrus"),1);    //dog,cat,seal,lion,cat

//새로운 원소 삽입
animals.splice(animals.lastIndexOf("cat"),1,"monkey");  //dog,cat,seal,lion,monkey

설명

splice 메서드에는 세 개의 인수를 전달한다. 반드시 입력해야 하는 첫번째 인수는 잘라낼 시작 위치이다. 나머지 두개의 인수는 생략할 수 있는데, 두번째 인수는 제거할 원소의 개수이고, 세번째 인수는 치환할 내용이다. 인덱스가 음수면 원소는 배열의 끝 부분부터 잘린다.

var animals = new Array("cat","walrus","lion","cat");

//새로운 원소 삽입
animals.splice(-1,1,"monkey");  //cat,walrus,lion,monkey

잘라내는 원소의 개수가 주어지지 않으면 시작위치부터 배열의 끝까지 모든 원소가 제거된다.

var animals = new Array("cat","walrus","lion","cat");

//두번째부터 끝까지 모든 원소 제거
animals.splice(2);  //cat,walrus

마지막 인수는 바꿀 값인데, 쉼표로 분리하면 값을 여러 개 입력할 수 있다.

var animals = new Array("cat","walrus","lion","cat");

//두번째 인수를 다른 두개의 값으로 치환
animals.splice(2,1,"zebra","elephant"); //cat,walrus,zebra,elephant,cat

특정 원소를 모두 제거하거나 치환할 수도 있다. 아래 예제는 특정 값을 여러 번 포함하고 있다. 반복문에서 splice를 사용해서 특정 값을 모두 다른 값으로 치환하고 다른 반복문에서 다시 splice 메서드를 사용해서 새로 삽입된 원소를 제거한다.

var charSets = new Array("ab","bb","cd","ab","cc","ab","dd","ab");

while(charSets.indexOf("ab") != -1){
  charSets.splice(charSets.indexOf("ab"),1,"**");  
}

document.writeln(charSets); //**,bb,cd,**,cc,**,dd,**

while(charSets.indexOf("**") != -1){
  charSets.splice(charSets.indexOf("**"),1);
}

document.write(charSets);   //bb,cd,cc,dd

indexOf와 splice 메서드는 IE8을 제외한 모든 브라우저와 IE9부터 지원한다.