11種JavaScript前端數(shù)據(jù)去重方式總結(jié)

更新時(shí)間：2023年06月12日 11:42:48 作者：jenemy

這篇文章主要為大家總結(jié)了JavaScript去重的11種方式，各有優(yōu)缺點(diǎn)，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價(jià)值，需要的可以根據(jù)需求合理使用

1.使用 for 循環(huán)和 indexOf 方法，復(fù)雜度 O(n^2)

function uniqueArray(arr) {
  const result = []
  for (let i = 0; i &lt; arr.length; i++) {
    if (result.indexOf(arr[i]) === -1) {
      result.push(arr[i])
    }
  }
  return result
}

2.使用 for 循環(huán)和對(duì)象，復(fù)雜度 O(n^2)

function uniqueArray(arr) {
  const result = []
  const obj = {}
  for (let i = 0; i < arr.length; i++) {
    if (!obj[arr[i]]) {
      result.push(arr[i])
      obj[arr[i]] = true
    }
  }
  return result
}

3.使用 filter 方法和 indexOf 方法，復(fù)雜度 O(n^2)

function uniqueArray(arr) {
  return arr.filter((item, index, arr) => arr.indexOf(item) === index)
}

4.使用 filter 方法和對(duì)象，復(fù)雜度 O(n)

function uniqueArray(arr) {
  const obj = {}
  return arr.filter((item) => obj.hasOwnProperty(item) ? false : (obj[item] = true))
}

5.使用 Set 數(shù)據(jù)結(jié)構(gòu)，復(fù)雜度 O(n)

function uniqueArray(arr) {
  return Array.from(new Set(arr))
}

// 使用解構(gòu) + Set
function uniqueArray(arr) {
  return [...new Set(arr)]
}

6.使用 Map 數(shù)據(jù)結(jié)構(gòu)，復(fù)雜度 O(n)

function uniqueArray(arr) {
  const map = new Map();
  const result = [];
  for (let i = 0; i &lt; arr.length; i++) {
    if (!map.has(arr[i])) {
      map.set(arr[i], true);
      result.push(arr[i]);
    }
  }
  return result;
}

// or
function uniqueArray(arr) {
  const map = new Map();
  return arr.filter(function(item) {
    return !map.has(item) &amp;&amp; map.set(item, true);
  });
}

7.使用雙重循環(huán)和 splice 方法，復(fù)雜度 O(n^2)

function uniqueArray(arr) {
  for (var i = 0; i &lt; arr.length; i++) {
    for (var j = i + 1; j &lt; arr.length; j++) {
      if (arr[i] === arr[j]) {
        arr.splice(j, 1);
        j--;
      }
    }
  }
  return arr;
}

8.使用排序和雙指針

使用排序和雙指針可以實(shí)現(xiàn) O(nlogn) 的時(shí)間復(fù)雜度。先對(duì)數(shù)組進(jìn)行排序，然后使用雙指針遍歷數(shù)組，如果左指針和右指針指向的值相同，就把右指針向右移動(dòng)，直到找到不同的值，然后把左指針向右移動(dòng)，繼續(xù)遍歷。

function uniqueArray(arr) {
  arr.sort();
  var left = 0, right = 1;
  var result = [];
  while (right &lt;= arr.length) {
    if (arr[left] === arr[right]) {
      right++;
    } else {
      result.push(arr[left]);
      left = right;
      right++;
    }
  }
  return result;
}

9.使用 reduce 方法和 includes，復(fù)雜度 O(n^2)

function uniqueArray(arr) {
  return arr.reduce(function(prev, cur) {
    if (!prev.includes(cur)) {
      prev.push(cur);
    }
    return prev;
  }, []);
}

10.使用遞歸和 includes，復(fù)雜度 O(n^2)

function uniqueArray(arr) {
  if (arr.length === 1) {
    return arr;
  } else {
    const first = arr[0];
    const rest = uniqueArray(arr.slice(1));
    if (rest.includes(first)) {
      return rest;
    } else {
      return [first].concat(rest);
    }
  }
}

11.雙層循環(huán)，復(fù)雜度 O(n^2)

function uniqueArray(arr) {
  var result = [];
  for (var i = 0; i &lt; arr.length; i++) {
    for (var j = 0; j &lt; result.length; j++) {
      if (arr[i] === result[j]) {
        break;
      }
    }
    if (j === result.length) {
      result.push(arr[i]);
    }
  }
  return result;
}

到此這篇關(guān)于11種JavaScript前端數(shù)據(jù)去重方式總結(jié)的文章就介紹到這了,更多相關(guān)JavaScript數(shù)據(jù)去重內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: