<!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> 數(shù)組去重 </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 > JavaScript indexOf() 方法</a>
<p>
indexOf() 方法可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置,從0開(kāi)始計(jì)算是复。<br>
var liang = "Hello liang liang ye se"; <br>
var l = liang.indexOf("liang"); <br>
console.log(l); // 6 <br>
如果沒(méi)有找到匹配的字符串則返回 -1。<br>
注意： indexOf() 方法區(qū)分大小寫画机。<br>
</p>
<a > JavaScript sort() 方法</a>
<p>
sort() 方法用于對(duì)數(shù)組的元素進(jìn)行排序。<br>
排序順序可以是字母或數(shù)字，并按升序或降序。<br>
sort(數(shù)字升序)array.sort(function(a,b){return a-b}); <br>
sort(數(shù)字降序)array.sort(function(a,b){return b-a}); <br>
默認(rèn)排序順序?yàn)榘醋帜干颉?lt;br>
sort(字母降序)array.reverse(); <br>
array.reverse() 方法用于顛倒數(shù)組中元素的順序绣的。 <br>
注意：當(dāng)數(shù)字是按字母順序排列時(shí)"40"將排在"5"前面。<br>
使用數(shù)字排序欲账，你必須通過(guò)一個(gè)函數(shù)作為參數(shù)來(lái)調(diào)用屡江。<br>
函數(shù)指定數(shù)字是按照升序還是降序排列。<br>
注意： 這種方法會(huì)改變?cè)紨?shù)組赛不！惩嘉。<br>
</p>
<a > ES6中的 Map 與 Set </a>
<p>
Map對(duì)象 <br>
Map是ES6 提供的新的數(shù)據(jù)結(jié)構(gòu)。 <br>
Map 對(duì)象保存鍵值對(duì)踢故。任何值(對(duì)象或者原始值) 都可以作為一個(gè)鍵或一個(gè)值文黎。 <br>
Set對(duì)象 <br>
Set 對(duì)象允許你存儲(chǔ)任何類型的 唯一值 惹苗，無(wú)論是原始值或者是對(duì)象引用。 <br>
Set對(duì)象是值的集合耸峭，你可以按照插入的順序迭代它的元素桩蓉。 <br>
Set中的元素只會(huì)出現(xiàn)一次，即 Set 中的元素是唯一的劳闹。 <br>
Set對(duì)象和Map對(duì)象一樣触机，都有一個(gè)size屬性，他返回Set對(duì)象的值的個(gè)數(shù)玷或。 <br>
filter() 方法創(chuàng)建一個(gè)新的數(shù)組儡首，新數(shù)組中的元素 是 通過(guò)檢查 指定數(shù)組 中 符合條件的所有元素。 <br>
Array.from() 方法從一個(gè)類似數(shù)組或可迭代的對(duì)象(包括 Array偏友，Map蔬胯，Set，String位他，TypedArray氛濒，arguments 對(duì)象等等) 中創(chuàng)建一個(gè)新的數(shù)組實(shí)例 <br>
箭頭函數(shù) <br>
1、箭頭函數(shù)寫代碼擁有更加簡(jiǎn)潔的語(yǔ)法鹅髓； <br>
2舞竿、不會(huì)綁定this。 <br>
</p>
<body>
<script>
// indexOf() 的使用
var liang = "Hello liang liang ye se";
var l = liang.indexOf("liang");
console.log(l); // 6
// sort(數(shù)字升序)
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(數(shù)字降序)
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(); // 顛倒數(shù)組中元素的順序
console.log(fruits); // 降序后 (4) ["Orange", "Mango", "Banana", "Apple"]
// 1.最簡(jiǎn)單數(shù)組去重法
// 新建一新數(shù)組窿冯，遍歷傳入數(shù)組骗奖，值不在新數(shù)組就push進(jìn)該新數(shù)組中
// IE8以下不支持?jǐn)?shù)組的indexOf方法
function liang1(array) {
var temp = []; //一個(gè)新的臨時(shí)數(shù)組
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.數(shù)組下標(biāo)法
// 還是得調(diào)用“indexOf”性能跟方法1差不多，
// 實(shí)現(xiàn)思路：如果當(dāng)前數(shù)組的第i項(xiàng)在當(dāng)前數(shù)組中第一次出現(xiàn)的位置不是i醒串，
// 那么表示第i項(xiàng)是重復(fù)的执桌，忽略掉。否則存入結(jié)果數(shù)組芜赌。
function liang2(array) {
var temp = [];
for (var i = 0; i < array.length; i++) {
//如果當(dāng)前數(shù)組的第i項(xiàng)在當(dāng)前數(shù)組中第一次出現(xiàn)的位置是i仰挣，才存入數(shù)組；否則代表是重復(fù)的
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.排序后相鄰去除法
// 給傳入數(shù)組排序缠沈，排序后相同值相鄰膘壶，
// 然后遍歷時(shí),新數(shù)組只加入不與前一值重復(fù)的值。
// 會(huì)打亂原來(lái)數(shù)組的順序
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.優(yōu)化遍歷數(shù)組法
// 思路：獲取沒(méi)重復(fù)的最右一值放入新數(shù)組
// 實(shí)現(xiàn)思路：獲取沒(méi)重復(fù)的最右一值放入新數(shù)組洲愤。
// 檢測(cè)到有重復(fù)值時(shí)終止當(dāng)前循環(huán)同時(shí)進(jìn)入頂層循環(huán)的下一輪判斷
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); // 獲取到?jīng)]重復(fù)的值 (8) ["B", "C", "A", 2, 3, 1, 4, "D"]
console.log(index); // 獲取到?jīng)]重復(fù)的下標(biāo) (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.對(duì)象鍵值法去重
// 速度最快颓芭， 占空間最多（空間換時(shí)間）
// 該方法執(zhí)行的速度比其他任何方法都快， 就是占用的內(nèi)存大一些禽篱。
// 現(xiàn)思路：新建一js對(duì)象以及新數(shù)組畜伐，遍歷傳入數(shù)組時(shí)，判斷值是否為js對(duì)象的鍵躺率，
// 不是的話給對(duì)象新增該鍵并放入新數(shù)組玛界。
// 注意點(diǎn)：判斷是否為js對(duì)象鍵時(shí)万矾，會(huì)自動(dòng)對(duì)傳入的鍵執(zhí)行“toString()”，
// 不同的鍵可能會(huì)被誤認(rèn)為一樣慎框，例如n[val]-- n[1]良狈、n["1"]；
// 解決上述問(wèn)題還是得調(diào)用“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 數(shù)組去重
function liang6(arr6) {
//定義常量 res,值為一個(gè)Map對(duì)象實(shí)例
const res = new Map();
//返回arr數(shù)組過(guò)濾后的結(jié)果薪丁，結(jié)果為一個(gè)數(shù)組
//過(guò)濾條件是，如果res中沒(méi)有某個(gè)鍵馅精，就設(shè)置這個(gè)鍵的值為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 數(shù)組去重
function liang7(arr7) {
//通過(guò)Set對(duì)象严嗜，對(duì)數(shù)組去重洲敢，結(jié)果又返回一個(gè)Set對(duì)象
//通過(guò)from方法漫玄，將Set對(duì)象轉(zhuǎn)為數(shù)組
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 數(shù)組去重
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 ... 將字符串轉(zhuǎn)為真正的數(shù)組
var liang = [...'椋椋夜色']
console.log(liang); // 轉(zhuǎn)換后 (4) ["椋", "椋", "夜", "色"]
</script>
</body>
</html>
