javascript - splice() / 배열 다루기

---

최근 검색어 기능에 필요한 splice() 함수 

배열 삽입,삭제

---

안녕하세요 고코더입니다.

"최근 검색어 기능"을 구현할때 필요없는 검색어는 X 버튼을 눌러 삭제하는 기능은

거의 모든 사이트가 기본적으로 제공 하는 기능입니다.

▼어떤 사이트의 최근 검색어 DIV 모습 입니다.

이 기능은 배열을 다루어

필요한 검색어를 보여주는 방법으로 대표적인 배열 다루기 입니다.

이때 splice() 기능을 

사용하면 개발시에 복잡한 함수를 만들지 않고 손쉽게 개발이 가능합니다.

▼splice() 예제를 코딩 해보았습니다. 

gocoder_splice.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<script type="text/javascript">          var arrayData = [1, 2, 3, 4 ];         var spliceResult        // 1, 2를 저장한다.         = arrayData.splice(0, 2);    // 3, 4가 남았다       alert(arrayData);     // 1,2를 뺀 나머지 배열을 가지고 있다     alert(spliceResult); // 위에서 제거된 1,2를 변수로 받음       arrayData.splice(0, 1,"a","b","c");    // 3를 빼고 그 자리로 부터 "a","b","c"로 채운다          alert(arrayData);    </script> Colored by Color Scripter

cs

코드를 처음보면 복잡할 수 있지만 조금만 유심히 보면 아주 쉽고 

최근 검색어 기능을 어떻게 만들 수 있을지 느낌을 잡을 수 있습니다.

코드를 충분히 보셨다면 복습 차원에서 다시 결과 값을 보고 설명드리겠습니다.

▼처음 값 부터 2개의 배열 값을 제거 합니다.

arrayData에 1,2가 제거되고 남은 값 3,4가 있습니다.

1

arrayData.splice(0, 2);

cs

▼해당 함수를 실행 후에 변수르 결과 값을 받으면 제거 된 값을 반환 받을수 있습니다.

그러므로 spliceResult에 1,2가 있겠네요

1

spliceResult = arrayData.splice(0, 2)

cs

▼특정 위치로 부터 값을 제거하면 그 값부터 새로운 값을 입력할 수 있습니다.

3를 제거하고 그자리에 a,b,c를 입력 했습니다.

arrayData 에는 a,b,c,4가 남게 됩니다.

1

arrayData.splice(0, 1,"a","b","c");

cs

---

마무리

---

 splice를 잘쓰면 배열 다루기 쉽습니다.