<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 数组去重 </title>
JavaScript indexOf() 方法 : https://www.runoob.com/jsref/jsref-indexof.html
JavaScript sort() 方法 : https://www.runoob.com/jsref/jsref-sort.html
ES6中的 Map 与 Set : https://www.runoob.com/w3cnote/es6-map-set.html
</head>
<a href="https://www.runoob.com/jsref/jsref-indexof.html"> JavaScript indexOf() 方法</a>
<p>
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置,从0开始计算。<br>
var liang = "Hello liang liang ye se"; <br>
var l = liang.indexOf("liang"); <br>
console.log(l); // 6 <br>
如果没有找到匹配的字符串则返回 -1。<br>
注意： indexOf() 方法区分大小写。<br>
</p>
<a href="https://www.runoob.com/jsref/jsref-sort.html"> JavaScript sort() 方法</a>
<p>
sort() 方法用于对数组的元素进行排序。<br>
排序顺序可以是字母或数字，并按升序或降序。<br>
sort(数字升序)array.sort(function(a,b){return a-b}); <br>
sort(数字降序)array.sort(function(a,b){return b-a}); <br>
默认排序顺序为按字母升序。<br>
sort(字母降序)array.reverse(); <br>
array.reverse() 方法用于颠倒数组中元素的顺序。 <br>
注意：当数字是按字母顺序排列时"40"将排在"5"前面。<br>
使用数字排序，你必须通过一个函数作为参数来调用。<br>
函数指定数字是按照升序还是降序排列。<br>
注意： 这种方法会改变原始数组！。<br>
</p>
<a href="https://www.runoob.com/w3cnote/es6-map-set.html"> ES6中的 Map 与 Set </a>
<p>
Map对象 <br>
Map是ES6 提供的新的数据结构。 <br>
Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。 <br>
Set对象 <br>
Set 对象允许你存储任何类型的 唯一值 ，无论是原始值或者是对象引用。 <br>
Set对象是值的集合，你可以按照插入的顺序迭代它的元素。 <br>
Set中的元素只会出现一次，即 Set 中的元素是唯一的。 <br>
Set对象和Map对象一样，都有一个size属性，他返回Set对象的值的个数。 <br>
filter() 方法创建一个新的数组，新数组中的元素 是 通过检查 指定数组 中 符合条件的所有元素。 <br>
Array.from() 方法从一个类似数组或可迭代的对象(包括 Array，Map，Set，String，TypedArray，arguments 对象等等) 中创建一个新的数组实例 <br>
箭头函数 <br>
1、箭头函数写代码拥有更加简洁的语法； <br>
2、不会绑定this。 <br>
</p>
<body>
<script>
// indexOf() 的使用
var liang = "Hello liang liang ye se";
var l = liang.indexOf("liang");
console.log(l); // 6
// sort(数字升序)
var points = [20, 100, 1, 6, 25, 10, 55];
points.sort()
console.log(points); // 升序前 (7) [1, 10, 100, 20, 25, 55, 6]
points.sort(function (a, b) {
return a - b
});
console.log(points); // 升序后 (7) [1, 6, 10, 20, 25, 55, 100]
// sort(数字降序)
var points = [20, 100, 1, 6, 25, 10, 55];
points.sort()
console.log(points); // 降序前 (7) [1, 10, 100, 20, 25, 55, 6]
points.sort(function (a, b) {
return b - a
});
console.log(points); // 降序后 (7) (7) [100, 55, 25, 20, 10, 6, 1]
// sort(字母降序)
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
console.log(fruits); // 降序前 (4) ["Apple", "Banana", "Mango", "Orange"]
fruits.reverse(); // 颠倒数组中元素的顺序
console.log(fruits); // 降序后 (4) ["Orange", "Mango", "Banana", "Apple"]
// 1.最简单数组去重法
// 新建一新数组，遍历传入数组，值不在新数组就push进该新数组中
// IE8以下不支持数组的indexOf方法
function liang1(array) {
var temp = []; //一个新的临时数组
for (var i = 0; i < array.length; i++) {
if (temp.indexOf(array[i]) == -1) {
temp.push(array[i]);
}
}
return temp;
}
var arr1 = [1, 2, 3, 3, 2, 1];
console.log(arr1); // 去重前 (6) [1, 2, 3, 3, 2, 1]
console.log(liang1(arr1)); // 去重后 (3)[1, 2, 3,]
// 2.数组下标法
// 还是得调用“indexOf”性能跟方法1差不多，
// 实现思路：如果当前数组的第i项在当前数组中第一次出现的位置不是i，
// 那么表示第i项是重复的，忽略掉。否则存入结果数组。
function liang2(array) {
var temp = [];
for (var i = 0; i < array.length; i++) {
//如果当前数组的第i项在当前数组中第一次出现的位置是i，才存入数组；否则代表是重复的
if (array.indexOf(array[i]) == i) {
temp.push(array[i])
}
}
return temp;
}
var arr2 = [1, 2, 3, "A", "B", "C", "C", "B", "A", 3, 2, 1];
console.log(arr2); // 去重前 (12) [1, 2, 3, "A", "B", "C", "C", "B", "A", 3, 2, 1]
console.log(liang2(arr2)); // 去重后 (6) [1, 2, 3, "A", "B", "C"]
// 3.排序后相邻去除法
// 给传入数组排序，排序后相同值相邻，
// 然后遍历时,新数组只加入不与前一值重复的值。
// 会打乱原来数组的顺序
function liang3(array) {
array.sort();
var temp = [array[0]];
for (var i = 1; i < array.length; i++) {
if (array[i] !== temp[temp.length - 1]) {
temp.push(array[i]);
}
}
return temp;
}
var arr3 = [1, 2, 3, "A", "B", "C", "C", "B", "A", 3, 2, 1, 4, "D"];
console.log(arr3); // 去重前 (12) [1, 2, 3, "A", "B", "C", "C", "B", "A", 3, 2, 1 , 4 ,"D"]
console.log(liang3(arr3)); // 去重后 (6) [1, 2, 3, 4,"A", "B", "C" ,"D"]
// 4.优化遍历数组法
// 思路：获取没重复的最右一值放入新数组
// 实现思路：获取没重复的最右一值放入新数组。
// 检测到有重复值时终止当前循环同时进入顶层循环的下一轮判断
function liang4(array) {
var temp = [];
var index = [];
var l = array.length;
for (var i = 0; i < l; i++) {
for (var j = i + 1; j < l; j++) {
if (array[i] === array[j]) {
i++;
j = i;
}
}
temp.push(array[i]);
index.push(i);
}
console.log(temp); // 获取到没重复的值 (8) ["B", "C", "A", 2, 3, 1, 4, "D"]
console.log(index); // 获取到没重复的下标 (8) [6, 7, 8, 9, 10, 11, 12, 13]
return temp;
}
var arr4 = [1, 2, 3, "A", "B", "C", "B", "C", "A", 2, 3, 1, 4, "D"];
console.log(arr4); // 去重前 (14) [1, 2, 3, "A", "B", "C", "B", "C", "A", 2, 3, 1, 4, "D"]
console.log(liang4(arr4)); // 去重后 (8) ["B", "C", "A", 2, 3, 1, 4, "D"]
// 5.对象键值法去重
// 速度最快， 占空间最多（空间换时间）
// 该方法执行的速度比其他任何方法都快， 就是占用的内存大一些。
// 现思路：新建一js对象以及新数组，遍历传入数组时，判断值是否为js对象的键，
// 不是的话给对象新增该键并放入新数组。
// 注意点：判断是否为js对象键时，会自动对传入的键执行“toString()”，
// 不同的键可能会被误认为一样，例如n[val]-- n[1]、n["1"]；
// 解决上述问题还是得调用“indexOf”。
function liang5(array) {
var temp = {},
r = [],
len = array.length,
val, type;
for (var i = 0; i < len; i++) {
val = array[i];
type = typeof val;
if (!temp[val]) {
temp[val] = [type];
r.push(val);
} else if (temp[val].indexOf(type) < 0) {
temp[val].push(type);
r.push(val);
}
}
return r;
}
var arr5 = [1, 2, 3, "A", "B", "C", "B", "C", "A", 2, 3, 1, 4, "D"];
console.log(arr5); // 去重前 (14) [1, 2, 3, "A", "B", "C", "B", "C", "A", 2, 3, 1, 4, "D"]
console.log(liang5(arr5)); // 去重后 (8) [1, 2, 3, "A", "B", "C", 4, "D"]
// 6.1 ES6 数组去重
function liang6(arr6) {
//定义常量 res,值为一个Map对象实例
const res = new Map();
//返回arr数组过滤后的结果，结果为一个数组
//过滤条件是，如果res中没有某个键，就设置这个键的值为1
return arr6.filter((a) => !res.has(a) && res.set(a, 1))
}
var arr6 = [1, 2, 3, "A", "B", "C", "B", "C", "A", 2, 3, 1, 4, "D"];
console.log(arr6); // 去重前 (14) [1, 2, 3, "A", "B", "C", "B", "C", "A", 2, 3, 1, 4, "D"]
console.log(liang6(arr6)); // 去重后 (8) [1, 2, 3, "A", "B", "C", 4, "D"]
// 6.2 ES6 数组去重
function liang7(arr7) {
//通过Set对象，对数组去重，结果又返回一个Set对象
//通过from方法，将Set对象转为数组
return Array.from(new Set(arr7))
}
var arr7 = [1, 2, 3, "A", "B", "C", "B", "C", "A", 2, 3, 1, 4, "D"];
console.log(arr7); // 去重前 (14) [1, 2, 3, "A", "B", "C", "B", "C", "A", 2, 3, 1, 4, "D"]
console.log(liang6(arr7)); // 去重后 (8) [1, 2, 3, "A", "B", "C", 4, "D"]
// 6.3 ES6 数组去重
var arr8 = [1, 2, 3, "A", "B", "C", "B", "C", "A", 2, 3, 1, 4, "D"];
var liang8 = [...new Set(arr8)]
console.log(liang8); // 去重后 (8) [1, 2, 3, "A", "B", "C", 4, "D"]
// ES6 ... 将字符串转为真正的数组
var liang = [...'椋椋夜色']
console.log(liang); // 转换后 (4) ["椋", "椋", "夜", "色"]
</script>
</body>
</html>
