如何使用唯一元素创建数组(即删除重复项)?

DrS*_*ove 31 javascript arrays

我有这个代码:

var ar = [10,7,8,3,4,7,6];

function isin(n,a){
  for (var i=0;i<a.length;i++){
    if (a[i]== n) {
      var b = true;
      return b;
    } else {
      var c = false;
      return c;
   }
  }
}

function unique(a){
  var arr = [];
  for (var i=0;i<a.length;i++){
    if (!isin(a[i],arr)){
      arr.push(a[i]);
    }
  }

 return arr;
}

alert(unique(ar));
Run Code Online (Sandbox Code Playgroud)

在这段代码中,我尝试从原始数组创建新的唯一数组(没有重复).但我仍然得到原始阵列!哪里是我的错?

Jos*_* Mc 70

或者对于那些寻找单线程(简单且功能齐全)的人:

var a = ["1", "1", "2", "3", "3", "1"];
var unique = a.filter(function(item, i, ar){ return ar.indexOf(item) === i; });
Run Code Online (Sandbox Code Playgroud)


Sha*_*ard 49

使用普通数组并返回关联数组的键(仅包含给定数组中的"唯一"值)更有效:

function ArrNoDupe(a) {
    var temp = {};
    for (var i = 0; i < a.length; i++)
        temp[a[i]] = true;
    var r = [];
    for (var k in temp)
        r.push(k);
    return r;
}

$(document).ready(function() {
    var arr = [10, 7, 8, 3, 4, 3, 7, 6];
    var noDupes = ArrNoDupe(arr);
    $("#before").html("Before: " + arr.join(", "));
    $("#after").html("After: " + noDupes.join(", "));
});
Run Code Online (Sandbox Code Playgroud)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="before"></div>
<div id="after"></div>
Run Code Online (Sandbox Code Playgroud)

注意:该函数不保留项的顺序,因此如果这很重要,请使用不同的逻辑.

从IE9和所有其他现代浏览器(例如Chrome,Firefox)开始,使用该Object.keys()方法可以提高效率:

function ArrNoDupe(a) {
    var temp = {};
    for (var i = 0; i < a.length; i++)
        temp[a[i]] = true;
    return Object.keys(temp);
}

$(document).ready(function() {
    var arr = [10, 7, 8, 3, 4, 3, 7, 6];
    var noDupes = ArrNoDupe(arr);
    $("#before").html("Before: " + arr.join(", "));
    $("#after").html("After: " + noDupes.join(", "));
});
Run Code Online (Sandbox Code Playgroud)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="before"></div>
<div id="after"></div>
Run Code Online (Sandbox Code Playgroud)

感谢wateriswet 将此引起我的注意.:)


yzo*_*org 15

您可以new Set(list)在ES6/ES2015中使用新的本机对象.(即Babel,Typescript,或者幸运的是所有目标浏览器都支持ES2015).

// I never use this, because it's an iterator, not an array
let s = new Set(list);
Run Code Online (Sandbox Code Playgroud)

或者,如果要链接到数组助手,请使用...ES6/ES2015中的新扩展运算符将其扩展到数组中:

const unique = (list) => {
  return [...new Set(list)];
}
Run Code Online (Sandbox Code Playgroud)

你需要一个数组链接方法,如sort():

const convertText = (textToConvert) => {
  let list = unique(textToConvert.split(/\r?\n/g))
    .sort() // this will error if using uniqueAsIterator() version...
    .filter(x => x != "NULL");
  return list;
}
Run Code Online (Sandbox Code Playgroud)

  • 正如海报所暗示的,桌面上的 IE 目前不支持 `new Set(iterable)` 所以要小心! (2认同)

Bur*_*kak 9

除了使用Josh Mc的过滤器响应之外,你还可以使用箭头功能实用程序在es6中缩短它的速度;

const a = ["1", "1", "2", "3", "3", "1"];
let unique = a.filter((it, i, ar) => ar.indexOf(it) === i);
// unique = [1, 2, 3]
Run Code Online (Sandbox Code Playgroud)


Jon*_*nik 8

编辑:注意丹尼尔警告.考虑到这一点,以及官方文档的说法(下文),也许使用它毕竟不是一个好主意!


如果你碰巧使用jQuery,它的unique()功能是这样的:

var ar = [1, 2, 1, 2, 2, 3];    
ar = $.unique(ar);
console.log(ar);  // [3, 2, 1] 
Run Code Online (Sandbox Code Playgroud)

文件说:

请注意,这仅适用于DOM元素的数组,而不适用于字符串或数字.

...但是当我用jQuery 1.9.1测试它时,它确实适用于字符串和数字.无论如何,仔细检查它是否有效,特别是如果使用旧的jQuery.

  • 我已经体验到它可以使用一定数量的数字,但在某些时候停止工作没有任何明显的原因.所以要谨慎使用. (2认同)