> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트 배열 중복제거 문제_자바스크립트 기술에 대한 자세한 설명

자바스크립트 배열 중복제거 문제_자바스크립트 기술에 대한 자세한 설명

WBOY
풀어 주다: 2016-05-16 15:33:17
원래의
1198명이 탐색했습니다.

먼저 생각한 것은 원본 배열에 고유한 데이터를 저장하기 위해 또 다른 결과 배열을 만드는 것이었습니다. 원본 배열을 순회하고 결과 배열의 요소와 비교하여 중복 항목을 검색합니다. 그래서 다음과 같은 코드 A를 작성했습니다.

Array.prototype.clearRepetitionA = function(){
   var result = [];
   var isRepetition;
   for(var i=0; i<this.length; i++){
     isRepetition = false;
     for(var j=0; j<result.length; j++){
       if(this[i] === result[j]){
         isRepetition = true;
         break;
       }
     }
     if(!isRepetition){
       result.push(this[i]);
     }
   }
   return result;
 } 
로그인 후 복사

글을 다 쓰고 나니 며칠 전에 읽은 ECMAScript 5의 indexOf 배열 메소드가 배열 요소를 검색할 수 있다는 사실이 문득 생각났습니다. 그래서 indexOf 메서드를 사용하여 두 번째 수준 루프를 교체하고 다음 Code B:
를 작성했습니다.

Array.prototype.clearRepetitionB = function(){
   var result = [];
   for(var i=0; i<this.length; i++){
     if(result.indexOf(this[i]) == -1){
       result.push(this[i]);
     }
   }
   return result;
 } 
로그인 후 복사

코드가 갑자기 17줄에서 9줄로 바뀌어 훨씬 간편해졌습니다. 고등학교 수학에서 큰 문제를 해결하는 방법은 일반적으로 여러 가지가 있으며, 그 후에도 계속해서 다른 방법을 생각합니다. indexOf 메소드는 전체 배열에서 주어진 값을 갖는 요소를 검색하고, 발견된 첫 번째 요소의 인덱스를 반환하는 것을 의미하며, 첫 번째 매개변수는 검색할 값을, 두 번째 매개변수는 반환합니다. 선택사항: 검색을 시작할 배열의 인덱스를 지정합니다. 이 매개변수를 생략하면 처음부터 검색이 시작됩니다. 생각하기 시작하자마자 이전 방법은 값이 반복되는지 감지하는 것이라고 생각했습니다. 이제 indexOf 메소드가 있으므로 감지된 각 요소가 처음 나타나는 인덱스와 인덱스 값을 기반으로 판단할 수 있습니다. 요소 자체가 반복됩니까? 그래서 Code C를 작성했습니다.

 Array.prototype.clearRepetitionC = function(){
   var result = [this[0]];
   for(var i=1; i<this.length; i++){
     if(this.indexOf(this[i]) == i){
       result.push(this[i]);
     }
   }
   return result;
 } 
로그인 후 복사

이 글을 쓰고 계속 고민했는데, 정말 다른 방법이 생각나지 않네요. 이 세 가지 방법은 모두 아주 기본이에요. 그래서 답변을 비교하고 직접 테스트해 보았습니다. 답변을 살펴보니 제가 아직 너무 약하고, 간단한 질문에도 여전히 환상적인 아이디어가 있다는 것을 알았습니다. 다음은 제가 생각하는 것과 다르기 때문에 저의 정신적 여정에 대해서는 너무 많이 이야기하지 않겠습니다. 더 이상 고민하지 않고 바로 고전적인 답변 분석으로 넘어가겠습니다.
먼저 공간을 시간으로 교환하고 형태를 유지하기 위해 알고리즘에서 자주 언급되는 솔루션을 코드 D라고 부르자.

Array.prototype.clearRepetitionD = function(){
   var result = [];
   var obj = {};
   var key,type;
   for(var i=0; i<this.length; i++){
     key = this[i];
     type = typeof key;
     if(!obj[key]){
       obj[key] = [type];
       result.push(key);
     }else if(obj[key].indexOf(type)){
       obj[key].push(type);
       result.push(key);
     }
   }
   return result;
 } 
로그인 후 복사
이 방법에서는 객체 obj의 속성을 사용하여 원본 배열을 순회할 때 원본 배열의 요소 값을 저장합니다. 동시에 이 속성의 값은 이 속성의 유형을 저장하는 데 사용되는 배열입니다. 이를 통해 원래 배열에서 숫자 1과 유사한 요소와 문자열 '1'의 요소를 구분할 수 있습니다. 이 방법은 위의 세 가지 방법 중 indexOf 방법이 추가적인 객체를 생성함으로써 소요되는 시간을 줄여주므로 더욱 효율적이라고 할 수 있다.

위에서 언급한 시간과 공간을 교환하는 효율적인 방법에 만족하고 계속 읽지 않는다면, 당신은 완전히 잘못된 것입니다. 이제 재미가 시작됩니다. 틀림없이
코드 E입니다:

 Array.prototype.clearRepetitionE = function(){
   var result = [];
   for(var i=0; i<this.length; i++){
     for(var j=i+1; j<this.length; j++){
       if(this[i] === this[j]){
         j = ++i;
       }
     }
     result.push(this[i]);
   }
   return result;
 }
로그인 후 복사
코드D는 공간과 시간을 교환하는데, 느낌은 그냥 평범합니다. 코드 E는 어떻습니까? 이 코드가 잘못된 것인가요? 정말 중복된 항목을 제거할 수 있나요? 네, 처음에는 코드를 이해하지 못했습니다. 분석을 읽고 다시 읽어보기 전까지는 이해가 되지 않았습니다. 그런 다음 이해하지 못하는 독자는 분석을 주의 깊게 읽어야 합니다. 첫 번째 수준은 원래 배열을 앞에서 뒤로 순회하고, 두 번째 수준 루프는 각 요소가 그 뒤의 요소와 반복되는지 여부를 감지합니다. , 이 요소 뒤의 모든 요소가 고유한 경우 이를 건너뛰고 결과 배열에 추가합니다. 이 방법을 구현하는 아이디어는 중복 없이 가장 오른쪽의 값을 얻어 결과 배열에 추가하는 것입니다. 첫 번째 방법과 비교하면 이 방법도 두 번째 수준 루프를 최적화하고 결과적으로는 더 효율적입니다. 이 메소드의 배열 요소의 순서는 원래 배열의 요소 순서와 다릅니다.

코드E 분석을 읽고 벌써 엄지손가락을 치켜세우고 감탄의 눈빛을 보내주신 적 있으신가요? (이 꽃과 명예는 나에게 주지 말고, 이 방법을 쓴 스승에게 주어야 합니다.)

마지막 방법에 대해 이야기해 보겠습니다. 먼저 정렬한 다음 중복 항목을 제거하는 것입니다. 이전 규칙에 따라 코드 F라고 합니다.

Array.prototype.clearRepetitionF = function(){
   this.sort();
   var result = [this[0]];
   for(var i=1; i<this.length; i++){
     if(this[i] !== result[result.length-1]){
       result.push(this[i]);
     }
   }
   return result;
 } 
로그인 후 복사
먼저 배열 정렬 방법인 sort를 사용하여 배열 요소를 정렬한 후 복제 작업을 수행합니다.

위 내용은

자바스크립트 배열 중복제거 문제에 대한 단계별 연구입니다. 총 6개의 코드를 공유해서 열심히 공부하시길 바랍니다. 뭔가를 얻습니다.

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿