JavaScript数组的唯一性:如何使用数组过滤器()方法

1,178 阅读4分钟

How To Remove Duplicate Values From Array in Javascript Tutorial

JavaScript中的原始值是不可改变的值,除了对象。原始值包括Null, Undefined, Boolean,Number, Symbol和String。本教程还给出了如何获得数组中唯一值列表的答案。

脚本数组的唯一性

要想在JavaScript找到一个唯一的 数组,并从数组删除所有的重复值,可以使用新的Set() 构造函数,并传递数组,将返回具有唯一值的数组。

还有其他的方法,比如。

  1. 使用ES6的新功能。[...new Set([1, 1, 2] )]。
  2. 使用对象{ }来防止重复
  3. 使用一个辅助数组[]。
  4. 使用过滤器+indexOf
  5. 定义我们独特的数组原型

如果你有一个 日期 数组 ,你需要一些更自定义的方法。

如果你正在寻找一个精确的解决方案来获得一个独特的javascript数组,你的答案是[...new Set(arr)]方法。三点(...)是扩散运算符

使用过滤器+indexOf获得唯一的数组值

filter()是一个内置的JavaScript 数组方法,它创建了一个新的数组,其中所有的元素都通过了所提供函数的测试。indexOf()是一个内置的数组方法,它返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。

app.js 文件中写下以下代码。

// app.js

const unique = (value, index, self) => {
  return self.indexOf(value) === index
}

const ages = [26, 27, 26, 26, 28, 28, 29, 29, 30]
const uniqueAges = ages.filter(unique)

console.log(uniqueAges)

在上面的函数中,我们使用了两个内置的javascript函数。Javascript数组filter()Javascript数组indexOf()。我们还使用了一个箭头函数,这也是ES6的特点。

所以,实际上,在上面的代码中,我们使用过滤器函数过滤掉了每个重复的值,并将唯一的回调 传递给每个数组项目。

数组indexOf()方法返回一个在数组中可以找到给定元素的第一个索引,如果不存在则返回-1。这样,我们就从一个数组中过滤掉了值和剩余的值,而且这个结果数组有唯一的值。

本机方法过滤器将循环浏览数组,只留下那些通过给定回调函数的唯一条目。

唯一函数检查给定的值是否是第一次出现的。如果不是,它一定是一个重复的,不会被复制。

这个解决方案不需要任何额外的库,如jQuery或prototype.js。

它也适用于混合值类型的数组。

请看输出

How To Get Distinct Values From Array In Javascript

ES6 Javascript filter()方法

我们可以将上述代码减少到只有三行代码,实际的逻辑只有一行。请看下面的代码。

// app.js

const ages = [26, 27, 26, 26, 28, 28, 29, 29, 30]
const uniqueAges = ages.filter((x, i, a) => a.indexOf(x) == i)
console.log(uniqueAges)

它将给出同样的输出。

使用一个集合获得独特的数组值。

在ES6中,代码要简单得多。下面的代码片段利用Set对象来存储唯一值的集合,然后我们用spread操作符来构造新的数组。请看下面的例子。

// app.js

const ages = [26, 27, 26, 26, 28, 28, 29, 29, 30]
const uniqueAges = [...new Set(ages)]

console.log(uniqueAges)

Set的构造函数需要一个可迭代的对象,就像一个数组,而传播操作符......将set转化回数组。

输出结果如下。

Get Unique Values using Javascript Set

从一个方法中使用Set和Array来区分数组的值

我们还可以使用Javascript的Set和Javascript的array from()方法来获得唯一的值。它将从一个数组中消除重复的值。

请看下面的代码。

// app.js

const ages = [26, 27, 26, 26, 28, 28, 29, 29, 30]
const result = Array.from(new Set(ages));
console.log(result)

它将给我们同样的输出。

使用array[] helper获得唯一的数组值

让我们从一个对象的数组中获得唯一的值。请看下面的代码。

// app.js

const students = [
  {
    name: 'Krunal',
    age: 26
  },
  {
    name: 'Ankit',
    age: 25
  },
  {
    name: 'Krunal',
    age: 26
  }
]
const uniqueArr = [... new Set(students.map(data => data.name))]
console.log(uniqueArr)

在上面的代码中,我们定义了一个具有重复属性的对象,然后我们使用set和Javascript Array Map函数来形成一个具有唯一值的数组。

请看下面的输出。

Distinct property values of an array of objects

定义我们自己的数组唯一原型

我们也可以定义可以给我们数组唯一值的原型。 我们的原型函数将是以下内容。

// app.js

Array.prototype.unique = function() {
  var arr = [];
  for(var i = 0; i < this.length; i++) {
      if(!arr.includes(this[i])) {
          arr.push(this[i]);
      }
  }
  return arr; 
}

现在,在一个数组上调用Javascript Array Unique函数 ,看看输出。

看最后的代码。

// app.js

Array.prototype.unique = function() {
  let arr = [];
  for(let i = 0; i < this.length; i++) {
      if(!arr.includes(this[i])) {
          arr.push(this[i]);
      }
  }
  return arr; 
}

const ages = [26, 27, 26, 26, 28, 28, 29, 29, 30]
const uniqueAges = ages.unique()
console.log(uniqueAges)

请看输出。

Define our own Array Unique Prototype

结论

最后,如果你想在Javascript数组中获得一个独特的值,并提高性能,请使用array = [...new Set(array)] 方法。它不会使过程变慢。

如果你使用filter()+indexOf()方法,那么在大量的数据中性能可能会变慢。

本教程就到此为止。

另见

Javascript数组map()

Javascript数组foreach()

含有的Javascript数组

The postJavaScript array unique: How to use Array filter() methodappeared first onAppDividend.