javascript_javascript 기술로 배열 중복 제거를 달성하는 다양한 방법

더 이상의 헛소리는 그만하고 바로 실용적인 내용으로 넘어가겠습니다!

먼저 이 예시의 요구 사항에 대해 이야기해 보겠습니다. 즉, 어레이의 중복 제거를 달성하는 방법을 작성해 보겠습니다. (요구 사항: 메서드 실행, 배열 전달, 중복 제거 후 새 배열 반환, 원래 배열은 변경되지 않고 유지, 구현 프로세스 중에 루프의 한 레이어만 사용할 수 있음, 참조용으로 이중 레이어 중첩 루프도 작성할 수 있음) ;

먼저 초보자에게 배열 중복 제거가 무엇인지 설명하겠습니다(베테랑은 건너뛰기). 이는 배열에서 중복된 요소를 제거하는 것을 의미합니다. 예를 들어 var arr = [3,2,4,2,1,2]; 그 배열을 중복제거하여 얻은 새로운 배열이 [3,2,4,1]이 바로 그러한 함수이다.

구현 방법은 비교적 간단하고 구현 방법은 다양합니다. 많은 전문가들이 관련 기사를 작성했습니다. 이 블로그를 작성하는 목적은 첫째로 알림을 제공하고 둘째로 초보자에게 더 나은 이해를 제공하는 것입니다. 구현 원리는 맞습니다. 첫 번째 구현 방법을 살펴보겠습니다.

첫 번째 방법은 새 배열을 순회하여 중복을 제거하는 것입니다

var arr = [1,'b','b',4,3,3,4,5,1];
     
    //第一种
    Array.prototype.unique1 = function(){
      var arr1 = []; //定义一个新数组
      for(var i=0;i<this.length;i++){
        if(arr1.indexOf(this[i]) == -1){//判断目标数组中在原数组里是否存在
          arr1.push(this[i]);
        } 
      } 
      return arr1;
    }
    console.log(arr); //[1,'b','b',4,3,3,4,5,1]
    console.log(arr.unique1()); //[1, "b", 4, 3, 5]
    //这种方法的主要思路就是，新建一个数组，然后在原数组中，从第一个开始，看看新数组里面有没有这个元素，如果有，就忽略，然后进行下一个，如果没有，则把这个元素存到新数组里面，
    //也就是说，每一次比较，都会遍历新数组，直到找到相同元素为止，比较耗性能

이 쓰기 방법이 익숙하지 않은 경우 다음 쓰기 방법으로 변경해도 효과는 동일합니다.

var arr = [1,'b','b',4,3,3,4,5,1];

function unique1(arr){
      var arr1 = [];
      for(var i=0;i<arr.length;i++){
        if(arr1.indexOf(arr[i]) == -1){//判断目标数组中在原数组里是否存在
          arr1.push(arr[i]); 
        } 
      } 
      return arr1;
    }
    console.log(arr); //[1,'b','b',4,3,3,4,5,1]
    console.log(unique1(arr)); //[1, "b", 4, 3, 5]

다음 메소드는 위 형식에 따라 다시 작성해 주시면 됩니다. 결과는 동일하므로 코드에 적어두겠습니다.

두 번째 유형은 해시 테이블을 통해 구현됩니다(이 개념은 좀 크므로 구체적인 원리는 여기에서 자세히 설명하지 않습니다. 시간이 나면 별도로 작성하겠습니다. 좋은 점입니다)

var arr = [1,'b','b',4,3,3,4,5,1];

Array.prototype.unique2 = function(){
      var hash = {}; //定义一个hash表
      var arr1 = []; //定义一个新数组
      for(var i=0;i<this.length;i++){
        /*
          这里比较难理解，我们一步一步来看：
          hash是一个对象，则存在键值对（key：value），只不过现在是为空的,所以hash[key] = value;
          第一步：i=0;this[i]=this[0]=1; hash[this[0]] = hash[1] , 因为hash初始为空，没有找到key=1的值，所以然后undefined，
          执行下一步：hash[1] = true(此时hash对象就有了第一组键值对)，将原数组的第一个数添加到新数组中，重复第一步
          因为不重复的判断hash的值都是undefined，而重复的都为true了,所以不重复都被添加到新数组中
          因为hash表存的值是存的地址，放在堆内存中，所以有多少个不重复的元素，就要分多少个内存来存放，所以这种方法比较占内存，但是相比之下，这种的运算运动是最快的，
          这也就是用空间来换取时间了，数据量比较小，推荐用此方法
        */
        if(! hash[this[i]]){
          hash[this[i]] = true;
          arr1.push(this[i]);
        }
      }
      return arr1;  
    }
    console.log(arr);
    console.log(arr.unique2());

세 번째 방법은 자신의 위치가 일치하는지 순회하여 달성됩니다

var arr = [1,'b','b',4,3,3,4,5,1];

Array.prototype.unique3 = function(){
      var arr1 = []; //定义一个新数组
      for(var i=0;i<this.length;i++){
        if(this.indexOf(this[i])==i){
        //这里也是indexOf遍历，看从第一个元素在原数组中的位置，如果第一次出现的位置和下标相等，说明当前元素的不重复的，如果不等，说明该元素前面已经出现过
          arr1.push(this[i]);
        }
      }
      return arr1;  
    }
    console.log(arr);
    console.log(arr.unique3());

조금 흥미로운 네 번째 방법은 특별한 경우에만 사용할 수 있습니다. 배열을 먼저 정렬한 다음 22개를 비교하고 새로 정렬된 배열을 출력하는 것입니다

.

Array.prototype.unique4 = function(){
      /*
        这里是思路是，先排序（默认从小到大），然后将原数组的第一个给新数组，
        因为是经过排序的，所以重复的只会存在在相邻位置
        这里就相当于是做22比较，如果相等，则进行下一组，如果不相等，则把这个数存到新数组中，用这个数再进行比较
      */
      this.sort();
      var arr1 = [this[0]];
      for(var i=1;i<this.length;i++){
        if(this[i] !== arr1[arr1.length-1]){
          arr1.push(this[i]);
        } 
      }
      return arr1;  
    }
    console.log(arr);
    console.log(arr.unique4());

와, 이제 그만하자!

또한 요구 사항에 따르면 이중 계층 중첩 루프를 사용하여 구현할 수 있다고 나와 있습니다. 다른 방법은 2계층 for 루프를 사용하고 각각을 원래 배열과 비교하는 것입니다.

Array.prototype.unique5 = function(){
      //双层循环，一一比较
      for(var i=0;i<this.length;i++){ //从0开始
        for(j= i+1;j<this.length;j++){ //从1开始，逐个比较
          if(this[i] === this[j]){ //如果恒定
            this.splice(j,1);  //就将这个元素删掉
          } 
        } 
      }
      return this;  
    }
    console.log(arr);
    console.log(arr.unique5());

이 작성 ​​방법은 너무 많은 루프가 필요하므로 권장하지 않습니다. 첫 번째와 세 번째 방법도 매번 순회해야 하는 것이 아닌가? 다섯 번째 방법과 비슷합니까? 네, 이렇게 이해할 수 있다는 것은 이해한다는 뜻이지만 특별한 이해는 아닙니다. 거의 같다고 하면 너무 다르다는 뜻입니다. 그럴 거예요

탐색을 중지하면 유형 5는 검색 여부에 관계없이 전체 배열을 탐색합니다. 데이터 양이 많으면 어떤 것이 더 성능이 좋다고 생각하시나요?

특별 참고 사항: 합동이거나 동일하지 않은 두 값을 비교할 때는 상수(===) 및 비상수(!==)를 사용해야 합니다. 이는 유형 측면에서 요소를 포함하기 때문입니다. 예를 들어 1과 '1'은 동일하지 않습니다!

위 내용은 정말 건조한 정보입니다. 수분이 전혀 없습니다. 모든 사람이 이해해 주실 수 밖에 없습니다!