js数组的去重多种方案-前端开发

依稀记得年初找前端工作时候,有一次面试中对于html,css提问基本回答来了,然而碰到数组的去重问题了,由于这块没做足功课,没回答上来。具体对话如下:

  • 面试官:讲一下一般前端js数组去重的方法,
  • 我:一般js数组去重,有js提供的方法来去重,直接使用
  • 面试官:那你讲一下具体怎么去重,
  • 我:使用for循环和数组方法配合去重吧
  • 面试官:那你讲一下具体实现步骤
  • 我:额,这个回答我还是重复了上一句话,因为当时没思路,回答有点尴尬了…….
js数组的去重多种方案-前端开发插图

所以回去查了一下具体方法,一直到现在工作了一段时间了,在平常实际使用中,数组去重的使用概率还是蛮高都的,有时候经常需要对一些后台数据进行去重处理,所以我也记录一下去多种js数组去重方案,做个笔记,以后面试,防止忘记。

1,for + indexOf()判断法

这个是一开始面试后找到的一个方法,也是相对简单数组去重了,关键点使用了indexOf()搜索数组中的元素,并返回它所在的位置。代码已做解释了如下:

//原数组 
var arr1 = [599, 22, 22, 22, 22, 599, 95, 884, 56, 599, 22];
//一个新的临时数组 
var oarr1 = [];
//遍历当前数组 
for(var i = 0; i < arr1.length; i++) {
   //关键点indexOf() 判断数组中有没有字符串值,如果没有则返回 -1 
   // 如果当前数组的第i已经保存进了临时数组,那么跳过,否则把当前项push到临时数组里面 
	if(oarr1.indexOf(arr1[i]) == -1) {
	   oarr1.push(arr1[i])
	}
}
document.write(oarr1+"<br />")

2,filter()过滤

关键点: indexOf总是返回找到的第一个元素的位置,后续的重复元素位置与indexOf返回的位置不相等,因此被filter滤掉了。

var arr2 = [599, 22, 22, 22, 22, 599, 95, 884, 56, 599, 22];
var oarr2 = arr2.filter(function(v, i) {
	return arr2.indexOf(v) == i
});
document.write(oarr2+"<br />")

3,map()

Map是一组键值对的结构,具有极快的查找速度。通过指定函数处理数组每个元素,并返回处理后的数组(push)

var arr3 = [599, 22, 22, 22, 22, 599, 95, 884, 56, 599, 22];
var newarr3 = [];
   arr3.map(function(v,i){
	if(arr3.indexOf(arr3[i])==i){
          newarr3.push(v);
	}
});
document.write(newarr3+"<br />");

4,Set 和 Array.from 去重法

var arr4 = [599, 22, 22, 22, 22, 599, 95, 884, 56, 599, 22];
function dedupe(array) {
	// Array.from方法可以将 Set 结构转为数组。
	return Array.from(new Set(array));
}
document.write(dedupe(arr4)+"<br />");

5,splice()

splice(数组去重一个数与多个数字比)对数组进行删除、插入、替换,是最强大的数组方法。

var arr5 = [599, 22, 22, 22, 22, 599, 95, 884, 56, 599, 22];
for(var i=0;i<arr5.length;i++){
	for(var j=i+1;j<arr5.length;j++){//一个数与多个数相比
		if(arr5[i]==arr5[j]){
			arr5.splice(j,1);
			j--;
		}
	}
}
document.write(arr5+"<br />")

6,push()

数组去重一一对比添加到数组末尾。

var arr = [599, 22, 22, 22, 22, 599, 95, 884, 56, 599, 22];
function abc(arr6){
	var oarr6=[];
	for(var i=0;i<arr6.length;i++){
		for(var j=0;j<arr6.length;j++){
				if(arr6[i]==oarr6[j]){
					break;}
			}
		if(arr[i]!=oarr6[j]){
				oarr6.push(arr6[i])
		}

	}return oarr6
}document.write(abc(arr)+"<br />")
© 版权声明
THE END
喜欢点个赞支持一下吧
点赞0赏币
分享
评论交流 抢沙发

请登录后发表评论