JavaScript實現數組去重的十種方法分享
方法1
利用 ES6的set 方法和解構賦值——最常用、最簡單。
這個方法是es6之后加入的，是最簡單的一種方法。
Set是一種結構，是一種不重復值的集合，如：{1,2,3}。它的特性之一就是里面的每一個值都是不重復的；
[...new Set(arr)] 意思是將Set結構解構賦值為數組。
function Unrepeated1(arr) {
return [...new Set(arr)]
}
console.log(Unrepeated1([1,1,2,2,3,3]));
// 結果是[1, 2, 3]
方法2
利用數組原型對象上的 lastIndexOf 方法——以前常用，逐漸被include代替
思路： 定義一個空數組，遍歷這個原數組，如果空數組沒有這個數就往空數組里加入，有的話就不操作。
lastIndeOf():返回指定字符串值最后出現的位置，從后向前搜索,找不到返回-1
function Unrepeated2(arr) {
var res = [];
for (var i = 0; i < arr.length; i++) {
res.lastIndexOf(arr[i]) !== -1 ? '' : res.push(arr[i]);
}
return res;
}
console.log(Unrepeated2([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
// 結果是[1, 2, 3, 5, 6, 7, 4]
方法3
利用數組原型對象上的 splice 方法。
思路是：雙層遍歷數組，舉例：如果第一項是數字1，那么第二層遍歷從第二項開始，如果后面也找到1，就把1刪除。
splice（）：用于刪除數組元素，splice（j，1）j代表數組索引是j,1代表刪除1個
function Unrepeated3(arr) {
var i,j,len = arr.length;
for (i = 0; i < len; i++) {
for (j = i + 1; j < len; j++) {
if (arr[i] == arr[j]) {
arr.splice(j, 1);
len--;
j--;
}
}
}
return arr;
}
console.log(Unrepeated3([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
方法4
利用數組原型對象上的 forEach 和 includes方法——includes很強大
思路：定義一個空數組，遍歷原數組，再遍歷空數組，如果空數組里面含有原數組的項就添加進空數組，如果空數組已經有了，就不再操作。
includes：表示是否含有，返回布爾值，說的也是它以后會替代indexof。是es6新增的很強大的一個api，不止數組可以用，對象，字符串都可以用。
function Unrepeated4(arr) {
let newArr = [];
arr.forEach(item => {
return newArr.includes(item) ? '' : newArr.push(item);
});
return newArr;
}
console.log(Unrepeated4([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
// 結果是[1, 2, 3, 4, 5, 6, 7]
方法5
利用數組原型對象上的 filter 和 includes方法。
和方法4類似的思路，只不過foreach+includes換成了filter+includes
function Unrepeated5(arr) {
var newArr = []
newArr = arr.filter(function (item) {
return newArr.includes(item) ? '' : newArr.push(item)
})
return newArr
}
console.log(Unrepeated5([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
// 結果是[1, 2, 3, 5, 6, 7, 4]
方法6
利用數組原型對象上的includes方法。
這個方法可以作為一般性解法，代碼可以進一步簡化。
function Unrepeated6(arr) {
var newArr = []
for (var i = 0; i < arr.length; i++) {
if (!newArr.includes(arr[i])) {
newArr.push(arr[i])
}
}
return newArr
}
console.log(Unrepeated6([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
// 結果是[1, 2, 3, 5, 6, 7, 4]
方法7
利用數組的indexOf下標屬性來查詢。
思路和上面的類似
function Unrepeated7(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(Unrepeated7([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
// 結果是[1, 2, 3, 5, 6, 7, 4]
方法8
利用對象屬性存在的特性，如果沒有該屬性則存入新數組。
這個方法兼容性比較好。思路是用一個空對象來標記，通過遍歷，動態(tài)的設置對象的屬性，以此來區(qū)分是否重復。
function Unrepeated8(arr) {
var obj={}
var newArr=[]
for (let i = 0; i < arr.length; i++) {
if (!obj[arr[i]]) {
obj[arr[i]] = 1
newArr.push(arr[i])
}
}
return newArr
}
console.log(Unrepeated8([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
// 結果是[1, 2, 3, 5, 6, 7, 4]
方法9
思路：先將原數組排序，在與相鄰的進行比較，如果不同則存入新數組。
function Unrepeated9(arr) {
var formArr = arr.sort()
var newArr=[formArr[0]]
for (let i = 1; i < formArr.length; i++) {
if (formArr[i]!==formArr[i-1]) {
newArr.push(formArr[i])
}
}
return newArr
}
console.log(Unrepeated9([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
// 結果是[1, 2, 3, 4,5, 6, 7]
方法10
思路：定義一個新數組，并存放原數組的第一個元素，然后將元素組一一和新數組的元素對比，若不同則存放在新數組中。
function Unrepeated10(arr) {
let newArr = [arr[0]];
for (let i = 1; i < arr.length; i++) {
let repeat = false;
for (let j = 0; j < newArr.length; j++) {
if (arr[i] === newArr[j]) {
repeat = true;
break;
}else{
}
}
if (!repeat) {
newArr.push(arr[i]);
}
}
return newArr;
}
console.log(Unrepeated10([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
// 結果是[1, 2, 3, 5, 6, 7, 4]到此這篇關于JavaScript實現數組去重的十種方法分享的文章就介紹到這了,更多相關JavaScript數組去重內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文主要介紹了js實現抽獎效果的方法實例。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
JS生態(tài)系統(tǒng)加速一次一庫PostCSS SVGO的重構源碼和性能優(yōu)化探索
這篇文章主要介紹了JS生態(tài)系統(tǒng)加速一次一庫PostCSS SVGO的重構源碼和性能優(yōu)化探索,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2024-01-01
這篇文章主要介紹了微信小程序實現可拖動懸浮圖標的示例代碼,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
這篇文章主要介紹了基于JavaScript獲取鼠標位置的各種方法 ,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了小程序跨頁面交互的作用與方法詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
select每選擇一個option選項減少對應的option實現方法
這篇文章主要為大家介紹了select每選擇一個option選項減少對應的option實現方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-12-12
JavaScript優(yōu)化專題之Loading and Execution加載和運行
這篇文章主要介紹了JavaScript優(yōu)化專題中Loading and Execution加載和運行的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了JS實現數組的增刪改查操作,結合實例形式分析了javascript針對數組的追加、獲取、刪除、添加、修改等常見操作技巧與相關注意事項,需要的朋友可以參考下2018-08-08
網上找的一個超簡單的JS拖拽，喜歡拖拽效果的朋友可以參考下。2010-04-04
這篇文章主要介紹了Javascript操作表單實例講解（下）的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06