js中数组去重的几种实现方式(区别)
1. 利用ES6的 set 方法(常用)
说明:
- set:Set是ES6的新数据结构,类似于数组,但本身没有重复值
- 展开运算符(…): 展开set,转化为数组
- Array.from:Array.from可以用于将两类对象转为真正的数组:类似数组对象;可遍历对象
缺点:无法去除数组中的空对象
let ary = [12, 23, 12, 15, 25, 23, 25, 14, 16];
ary = [...new Set(ary)];
console.log(ary);
let ary = [12, 23, 12, 15, 25, 23, 25, 14, 16];
ary = Array.from(new Set(ary));
console.log(ary);
2. 其余方法
// 1,2,3,'a','2',null,NaN,undefined,{a:1},true 10项
var arr = [3,'a', 1, 2, 2, 3, '2', 3, null, NaN, null, NaN, undefined, {size:1}, undefined, true, {size:1}, true];
// 方法一:利用splice方法去重
// 说明:用双层for循环嵌套,用每一项与另外得其他项一一对比,若相同则删除后面的相同项
function newArr(arr) {
for(var i=0; i<arr.length; i++) {
for(var j=i+1; j<arr.length; j++) {
if(arr[i] == arr[j]) {
arr.splice(j,1);
j--;
}
}
}
return arr;
}
console.log(newArr(arr));
// 0: 3
// 1: "a"
// 2: 1
// 3: 2
// 4: null
// 5: NaN
// 6: NaN
// 7: {size: 1}
// 8: {size: 1}
// length: 9
// 缺少:underfined ,true
// 无法处理: NaN, {size:1} ,2 与 '2'
// 方法二:indexOf
// 说明:创建一个新数组,在新数组中利用indexOf方法判断数组中是否有相同值,无则返回-1,然后将该项push进去新数组
function newArr2(arr) {
var result =[];
for(var i=0; i<arr.length; i++) {
if(result.indexOf(arr[i]) == -1) {
result.push(arr[i])
}
}
return result;
}
console.log(newArr2(arr))
// 0: 3
// 1: "a"
// 2: 1
// 3: 2
// 4: "2"
// 5: null
// 6: NaN
// 7: NaN
// 8: undefined
// 9: {size: 1}
// 10: true
// 11: {size: 1}
// length: 12
// 缺少: 无
// 无法处理: NaN, {size:1}
// 方法三:Set 与 Array.from
// 说明:Set是ES6的新数据结构,类似于数组,但本身没有重复值,Array.from可以用于将两类对象转为真正的数组:类似数组对象,可遍历对象
function newArr3(arr) {
return Array.from(new Set(arr));
}
console.log(newArr3(arr))
// 0: 3
// 1: "a"
// 2: 1
// 3: 2
// 4: "2"
// 5: null
// 6: NaN
// 7: undefined
// 8: {size: 1}
// 9: true
// 10: {size: 1}
// 11: {}
// 12: {}
// length: 13
// 缺少:无
// 无法处理: {size:1} ,{}
// 方法四:扩展运算符与Set
// 说明:使用...简化了方法三的代码
var newArr4 = [...new Set(arr)];
console.log(newArr4);
// 0: 3
// 1: "a"
// 2: 1
// 3: 2
// 4: "2"
// 5: null
// 6: NaN
// 7: undefined
// 8: {size: 1}
// 9: true
// 10: {size: 1}
// length: 11
// 缺少: 无
// 无法处理: {a:1}
// 方法五:利用对象属性去重
// 说明:每次去原数组的元素,然后再对象中访问这个属性,在进行对比、
Array.prototype.unique = function(){
var temp = {};
var newArr = [];
for(var i=0; i < this.length; i++) {
if(!temp.hasOwnProperty(this[i])) {
temp[this[i]] = this[i];
newArr.push(this[i])
}
}
return newArr;
}
console.log(arr.unique());
// 0: 3
// 1: "a"
// 2: 1
// 3: 2
// 4: null
// 5: NaN
// 6: undefined
// 7: {size: 1}
// 8: true
// length: 9
// 无法识别:无
// 无法处理: '2' 与 2
// 推荐使用
// 方法六: sort排序
// 说明:先判断是否为数组;
// 通过sort方法将排序后的数组保存在临时变量temp中,保存temp的第0项即为1,再通过for循环对比前后两项的值,不同则存入数组
function newArr5(arr) {
if(!Array.isArray(arr)) {
console.log('type error!')
return;
}
temp = arr.sort();
var result = [temp[0]];
for(var i =1; i<arr.length; i++) {
if(temp[i] !== temp[i-1]) {
result.push(temp[i]);
}
}
return result;
}
console.log(newArr5(arr));
// 0: 1
// 1: 2
// 2: "2"
// 3: 3
// 4: NaN
// 5: NaN
// 6: {size: 1}
// 7: {size: 1}
// 8: "a"
// 9: null
// 10: true
// 11: undefined
// length: 12
// 无法识别:无
// 无法处理: NaN , {size:1}