一、利用indexOf()方法去重
| 方法名 | 功能描述 |
|---|---|
| indexOf() | 返回在陣列中可以找到給定值的第一個索引，如果不存在，則返回-1 |
| lastIndexOf() | 返回指定元素在陣列中的最後一個的索引,如果不存在則返回-1 |
| 檢索方法 |
接下來我們通過一個案例來演示陣列索引的使用。要求在一組資料中，去除重複的元素。其中陣列為[‘blue’, ‘reen’, ‘blue’]。示例程式碼如下。
<script>
arr = ['blue', 'green', 'blue', 'yellow', 'black', 'yellow', 'blue', 'green', 'blue', 'blue', 'blue'];
function unique(arr) {
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) === -1) {
newArr.push(arr[i]);
}
}
return newArr;
}
console.log(unique(arr)); // 輸出結果: (4) ["blue", "green", "yellow", "black"]
</script>上述程式碼中，第2行程式碼定義了新陣列newArr，用來存放陣列中不重複的元素。第3~7行程式碼遍歷了舊陣列arr，然後拿著舊陣列元素去查詢新陣列，如果該元素在新陣列中沒有出現過，那麼就新增到新陣列中，否則不新增。其中第4行程式碼利用新陣列的indexOf()方法，判斷如果返回值為-1就說明新陣列裡面沒有該元素。
二、利用splice()方法去重
splice()方法可以刪除陣列內容，用法為：
splice(元素下標, 刪除元素個數(可以為0), 要新增的元素(可以不寫))<script>
arr = ['blue', 'green', 'blue', 'yellow', 'black', 'yellow', 'blue', 'green', 'blue', 'blue', 'blue'];
function unique(arr) {
for (let i = 0; i < arr.length; i++) {
for (let j = i + 1; j < arr.length; j++) {
if (arr[i] == arr[j]) {
arr.splice(j, 1);
j--;
}
}
}
return arr;
}
console.log(unique(arr)); // 輸出結果: (4) ["blue", "green", "yellow", "black"]
</script>三、利用ES6 Set去重
ES6提供了新的資料結構Set。它類似於陣列，但是成員的值都是唯一的，沒有重複的值。
<script>
arr = ['blue', 'green', 'blue', 'yellow', 'black', 'yellow', 'blue', 'green', 'blue', 'blue', 'blue'];
function unique (arr) {
return Array.from(new Set(arr));
}
console.log(unique(arr)); //輸出：(4) ["blue", "green", "yellow", "black"]
</script>四、利用sort()方法排序，然後對比前後元素
<script>
arr = ['blue', 'green', 'blue', 'yellow', 'black', 'yellow', 'blue', 'green', 'blue', 'blue', 'blue'];
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('type error!')
return;
}
arr = arr.sort()
var arrry= [arr[0]];
for (var i = 1; i < arr.length; i++) {
if (arr[i] !== arr[i-1]) {
arrry.push(arr[i]);
}
}
return arrry;
}
console.log(unique(arr)); //輸出: (4) ["blue", "green", "yellow", "black"]
</script>五、利用includes()方法檢測陣列是否有某個元素
<script>
arr = ['blue', 'green', 'blue', 'yellow', 'black', 'yellow', 'blue', 'green', 'blue', 'blue', 'blue'];
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('type error!')
return;
}
var array =[];
for(var i = 0; i < arr.length; i++) {
if(!array.includes(arr[i])) { //includes檢測陣列是否有某個值
array.push(arr[i]);
}
}
return array;
}
console.log(unique(arr)); // 輸出：(4) ["blue", "green", "yellow", "black"]
</script>六、利用filter去重
<script>
var arr = ['blue', 'green', 'blue', 'yellow', 'black', 'yellow', 'blue', 'green', 'blue', 'blue', 'blue'];
function unique(arr) {
return arr.filter(function(item, index, arr) {
//當前元素，在原始陣列中的第一個索引==當前索引值，否則返回當前元素
return arr.indexOf(item, 0) === index;});
}
console.log(unique(arr)); // 輸出：(4) ["blue", "green", "yellow", "black"]
</script>七、利用Map資料結構去重
<script>
let arr = ['blue', 'green', 'blue', 'yellow', 'black', 'yellow', 'blue', 'green', 'blue', 'blue', 'blue'];
let unique = (arr)=> {
let seen = new Map();
return arr.filter((item) => {
return !seen.has(item) && seen.set(item,1);
});
};
console.log(unique(arr)); //輸出： (4) ["blue", "green", "yellow", "black"]
</script>猜你喜歡：
本作品採用《CC 協議》，轉載必須註明作者和本文連結