JavaScript中的原始值是不可改变的值,除了对象。原始值包括Null, Undefined, Boolean,Number, Symbol和String。本教程还给出了如何获得数组中唯一值列表的答案。
脚本数组的唯一性
要想在JavaScript中找到一个唯一的 数组,并从数组中删除所有的重复值,可以使用新的Set() 构造函数,并传递数组,将返回具有唯一值的数组。
还有其他的方法,比如。
- 使用ES6的新功能。[...new Set([1, 1, 2] )]。
- 使用对象{ }来防止重复
- 使用一个辅助数组[]。
- 使用过滤器+indexOf
- 定义我们独特的数组原型
如果你有一个 日期 数组 ,你需要一些更自定义的方法。
如果你正在寻找一个精确的解决方案来获得一个独特的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。
它也适用于混合值类型的数组。
请看输出
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转化回数组。
输出结果如下。
从一个方法中使用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函数来形成一个具有唯一值的数组。
请看下面的输出。
定义我们自己的数组唯一原型
我们也可以定义可以给我们数组唯一值的原型。 我们的原型函数将是以下内容。
// 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)
请看输出。
结论
最后,如果你想在Javascript数组中获得一个独特的值,并提高性能,请使用array = [...new Set(array)] 方法。它不会使过程变慢。
如果你使用filter()+indexOf()方法,那么在大量的数据中性能可能会变慢。
本教程就到此为止。
另见
The postJavaScript array unique: How to use Array filter() methodappeared first onAppDividend.