JavaScript|一道“数组去重”案例看破主流浏览器兼容性

本博文源于js基础，主要探讨在不同浏览器中的“数组去重”案例的兼容性

题目重现

问题：编写函数uniq(arr),返回去掉arr重复项的新数组。例如，对于数组[1,2,2,2,3,3,3,3]去重之后的结果是[1,2,3].

实现原理

创建空数组，从首先开始遍历原数组，如果原数组元素不在空数组里，那就加入，否则不做任何操作，最后返回创建的数组

解法1—includes版本

在这里插入图片描述
大家可以从测试效果中清晰看到，去重非常成功，这里用了includes函数，那可能有伙伴问includes干什么用的？
作用：判断数组中是否包括某个值
语法格式：

数组.incldes(值);

数组如果包括这个值，就返回true，否则返回false。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>szqc</title>
		<script>
			function uniq(arr) {
				var resultArr = [];
				for(var i=0;i<arr.length;i++) {
					if(!resultArr.includes(arr[i])) resultArr.push(arr[i]);
				}
				return resultArr;
			}
			
		</script>
	</head>
	<body>
	</body>
</html>

结果报告

解法2—indexOf版本

indexOf的格式

数组.indexOf(数组值)

该函数检测某项在数组中的下标，如果数组中没有这项，将返回-1，如果数组中有多个这项，则返回首次出现的位置下标，附上源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>szqc2</title>
		<script>
			function uniq(arr){
				var resultArr = [];
				
				for(var i =0;i<arr.length;i++) {
					
					if(resultArr.indexOf(arr[i])==-1)
					{					
						resultArr.push(arr[i]);
					}
				}
				return resultArr;
			}
		</script>
	</head>
	<body>
	</body>
</html>

测试效果
在这里插入图片描述

结果报告

在这里插入图片描述
红色不支持，ie6-8不支持。

解法3—自己DIY版本

根据是否存在，判断true和false。用O(N)就可以解决问题，代码如下

function checkExist(arr,item) {
	for(var i=0;i<arr.length;i++) {
		if(arr[i] == item) {
			return false;
		}
	
	}
	return true;
}

测试结果
在这里插入图片描述
判断的完整代码如下：

<script>
	function checkExist(arr,item) {
		for(var i=0;i<arr.length;i++) {
			if(arr[i] == item) {
				return false;
			}
		
		}
		return true;
	}
	function uniq(arr){
		var resultArr = [];
		
		for(var i =0;i<arr.length;i++) {
			
			if(checkExist(resultArr,arr[i]))
			{					
				resultArr.push(arr[i]);
			}
		}
		return resultArr;
	}
</script>

结果报告

这是最经典的，最DIY的手写，任何浏览器都可以兼容

总结

通过一道数组去重，我们看到includes版本的支持力度，也看到indexOf支持力度，虽然自己DIY任何浏览器都能支持，但博主还是希望大家跟随时代的脚步，积极使用库函数，积极关注前沿！也要不断学习总结兼容性问题，很高兴博文能帮助到大家！