javascript arrays_javascript 기술에서 중복을 제거하는 6가지 방법 요약

프런트엔드 면접관이 준비해야 할 질문: Javascript Array에서 중복을 제거하는 방법. 제가 아는 한, 바이두(Baidu), 텐센트(Tencent), 샨다(Shanda) 등이 인터뷰에서 이런 질문을 한 적이 있습니다. 이 질문은 간단해 보이지만 실제로는 숨겨진 위험이 있습니다. 이 테스트는 이 기능을 구현하는 것뿐만 아니라 컴퓨터 프로그램 실행에 대한 심층적인 이해에 관한 것입니다.

저는 이 목적을 달성하기 위해 총 3가지 알고리즘을 생각해냈습니다.

Array.prototype.unique1 = function()
{
 var n = []; //一个新的临时数组
 for(var i = 0; i < this.length; i++) //遍历当前数组
 {
 //如果当前数组的第i已经保存进了临时数组，那么跳过，
 //否则把当前项push到临时数组里面
 if (n.indexOf(this[i]) == -1) n.push(this[i]);
 }
 return n;
}
Array.prototype.unique2 = function()
{
 var n = {},r=[]; //n为hash表，r为临时数组
 for(var i = 0; i < this.length; i++) //遍历当前数组
 {
 if (!n[this[i]]) //如果hash表中没有当前项
 {
  n[this[i]] = true; //存入hash表
  r.push(this[i]); //把当前数组的当前项push到临时数组里面
 }
 }
 return r;
}
Array.prototype.unique3 = function()
{
 var n = [this[0]]; //结果数组
 for(var i = 1; i < this.length; i++) //从第二项开始遍历
 {
 //如果当前数组的第i项在当前数组中第一次出现的位置不是i，
 //那么表示第i项是重复的，忽略掉。否则存入结果数组
 if (this.indexOf(this[i]) == i) n.push(this[i]);
 }
 return n;
}

첫 번째와 세 번째 메서드는 모두 배열의 indexOf 메서드를 사용합니다. 이 방법의 목적은 배열에서 저장된 매개변수가 처음으로 나타나는 것을 찾는 것입니다. 분명히, js 엔진은 이 메소드를 구현할 때 대상을 찾을 때까지 배열을 탐색합니다. 그래서 이 기능은 시간을 많이 낭비하게 됩니다. 두 번째 방법은 해시 테이블을 사용합니다. 개체의 발생을 아래 첨자 형식으로 저장합니다. 첨자 참조는 indexOf를 사용하여 배열을 검색하는 것보다 훨씬 빠릅니다.

이 세 가지 방법의 효율성을 판단하기 위해 길이가 10,000인 난수 배열을 생성하는 테스트 프로그램을 만든 후 여러 가지 방법을 사용하여 실행 시간을 테스트했습니다. 결과는 두 번째 방법이 다른 두 가지 방법보다 훨씬 빠르다는 것을 보여줍니다. 하지만 메모리 사용량 측면에서는 추가적인 해시 테이블이 있기 때문에 두 번째 방법을 사용할 가능성이 더 높습니다. 이것이 바로 시간을 위한 공간이라고 불리는 것입니다. 이것은 테스트 페이지이며, 확인해 볼 수도 있습니다.

hpl 전문가의 의견에 따라 네 번째 방법을 작성했습니다.

Array.prototype.unique4 = function()
{
 this.sort();
 var re=[this[0]];
 for(var i = 1; i < this.length; i++)
 {
 if( this[i] !== re[re.length-1])
 {
  re.push(this[i]);
 }
 }
 return re;
}

이 방법의 아이디어는 배열을 먼저 정렬한 다음 인접한 두 값을 비교하는 것입니다. 정렬 시에는 JS 기본 정렬 방법을 사용합니다. JS 엔진은 내부적으로 빠른 정렬을 사용해야 합니다. 최종 테스트 결과, 이 방법의 실행 시간은 두 번째 방법에 비해 평균 3배 가량 길지만, 첫 번째와 세 번째 방법에 비해 훨씬 빠른 것으로 나타났다.

다섯 번째 방법

최근 [검색 기록] 기능을 사용하다가 indexOf 메소드를 사용하기 시작했습니다. 이 방법은 ECMA5에서만 지원되고 IE8-에서는 지원되지 않습니다.

다음과 같이 함수를 직접 작성할 수 있습니다(Array 객체의 메서드는 모두 프로토타입 객체에 정의되어 있습니다).

Array.prototype.unique = function(){
  var length = this.length;
  if(length <= 1){
    return this;
  }
  if(!Array.prototype.indexOf){    
    Array.prototype.indexOf = function(item){
      var l = this.length, i = 0, r = -1;
      if(l <= 0){
　　　　　　 　　return -1;
　　　　　　　}
      for(; i < l; i++){
        if(this[i] === item){
          r = i;
        }
      }
      return r;
    }
  }
  
  var result = []; //去重数组
  for(var i = 0; i < length; i++){
    if(result.indexOf(this[i]) === -1){
      result.push(this[i]);
    }
  }
  return result;
}

여섯 번째 방법

Array 유형은 중복 제거 방법을 제공하지 않습니다. 배열에서 중복된 요소를 제거하려면 직접 방법을 찾아야 합니다.

function unique(arr) {
  var result = [], isRepeated;
  for (var i = 0, len = arr.length; i < len; i++) {
    isRepeated = false;
    for (var j = 0, len = result.length; j < len; j++) {
      if (arr[i] == result[j]) {  
        isRepeated = true;
        break;
      }
    }
    if (!isRepeated) {
      result.push(arr[i]);
    }
  }
  return result;
}

일반적인 아이디어는 배열 요소를 다른 배열로 하나씩 전송하는 것입니다. 전송 과정에서 요소가 중복되는지 확인하고, 그렇다면 바로 폐기합니다. 중첩 루프에서 볼 수 있듯이 이 방법은 매우 비효율적입니다. 해시테이블 구조를 사용하여 기존 요소를 기록하면 내부 루프를 피할 수 있습니다.