최근 검색어 기능에 필요한 splice() 함수 
배열 삽입,삭제


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





"최근 검색어 기능"을 구현할때 필요없는 검색어는 X 버튼을 눌러 삭제하는 기능은
거의 모든 사이트가 기본적으로 제공 하는 기능입니다.

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


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

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

▼splice() 예제를 코딩 해보았습니다. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
    
    var arrayData = [1234 ];    
    var spliceResult        // 1, 2를 저장한다.
        = arrayData.splice(02);    // 3, 4가 남았다
 
    alert(arrayData);     // 1,2를 뺀 나머지 배열을 가지고 있다
    alert(spliceResult); // 위에서 제거된 1,2를 변수로 받음
 
    arrayData.splice(01,"a","b","c");    // 3를 빼고 그 자리로 부터 "a","b","c"로 채운다
    
    alert(arrayData); 
 
</script>
cs

코드를 처음보면 복잡할 수 있지만 조금만 유심히 보면 아주 쉽고 
최근 검색어 기능을 어떻게 만들 수 있을지 느낌을 잡을 수 있습니다.

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

▼처음 값 부터 2개의 배열 값을 제거 합니다.
arrayData에 1,2가 제거되고 남은 값 3,4가 있습니다.
1
arrayData.splice(02); 


▼해당 함수를 실행 후에 변수르 결과 값을 받으면 제거 된 값을 반환 받을수 있습니다.
그러므로 spliceResult에 1,2가 있겠네요
1
spliceResult = arrayData.splice(02)
cs


▼특정 위치로 부터 값을 제거하면 그 값부터 새로운 값을 입력할 수 있습니다.
3를 제거하고 그자리에 a,b,c를 입력 했습니다.
arrayData 에는 a,b,c,4가 남게 됩니다.
1
 arrayData.splice(01,"a","b","c");
cs





마무리


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



댓글을 달아 주세요