您好,登錄后才能下訂單哦!
小編給大家分享一下JavaScript中數組去重的方法,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
正常情況下,數據去重的工作一般都是由后端同事來完成的,但是前端也要掌握好處理數據的能力,萬一去重的工作交給我們大前端處理,我們也不能慫呀。現在我總結了一些去重的方法,希望對大家有點幫助。
方法一:new Set()實現數組去重
ES6 提供了新的數據結構 Set,它類似于數組,但是成員的值都是唯一的,沒有重復的值。 Set 本身是一個構造函數,用來生成 Set 數據結構。Set函數可以接受一個數組,用于初始化。根據 Set的數據特性,我們可以實現數組去重。
let list = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined]; let list1 = Array.from(new Set(list)); // [ 1, "a", true, false, null, "", undefined ] let list2 = [...new Set(list)]; // [ 1, "a", true, false, null, "", undefined ]
方法二:some()+循環去重
some() 方法用于檢測數組中的元素是否滿足指定條件(函數提供) 。 如果有一個元素滿足條件,則表達式返回true , 剩余的元素不會再執行檢測。 如果沒有滿足條件的元素,則返回false。 我們可以定義一個新數組來承接沒有重復的數據,遍歷原始數組的時候,用新數組來判斷數據是否已經出現過。
function distinct(list) { let result = [list[0]];// 用于承接沒有重復的數據,初始時將原始數組的第一個值賦給它。 for (let i = 1; i < list.length; i++) { // 判斷結果數組中是否存在一樣的值,若果沒有的話則將數據存入結果數組中。 if (!(result.some(val => list[i] === val))) { result.push(list[i]); } } return result; } let arr = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined]; distinct(arr); // [ 1, "a", true, false, null, "", undefined ]
方法三:雙重for循環去重
雙重for循環,第一層循環確保數組中的每一項都能被比較,第二層循環確保被比較項后的每一項都能跟被比較項比較。
function distinct2(list) { for (let i = 0; i < list.length; i++) { for (let j = i + 1; j < list.length; j++) { // 后面數據的若跟前一項數據相同,則重復,需要去除。 if (list[i] === list[j]) { list.splice(j, 1); // 去除后面的相同項 j--; } } } return list; } let arr = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined]; distinct2(arr); // [ 1, "a", true, false, null, "", undefined ]
方法四:hasOwnProperty()方法去重
hasOwnProperty() 方法用來檢測一個屬性是否是對象的自有屬性,而不是從原型鏈繼承的。如果該屬性是自有屬性,那么返回 true,否則返回 false。
function unique(arr) { var obj = {}; // 用來記錄數組中的數據 return arr.filter(function(item, index, arr){ // 如果記錄對象中存在某個數據,則返回false過濾掉;否則obj進行記錄并篩選出來 return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true) }) } let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}]; unique(arr) // [ 1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, 'a', {}]
方法五:利用filter()+indexOf()方法去重
indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。
function unique(arr) { return arr.filter(function(item, index, arr) { // 從數組0位開始查,如果當前元素在原始數組中的第一個索引==當前索引值,說明它是第一次出現。 return arr.indexOf(item, 0) === index; }); } let list = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined]; unique(list); // [ 1, "a", true, false, null, "", undefined ]
此外,數組去重還可以利用filter()、includes()等方法實現,但是思路都跟上面幾種方法類似,這里就不一一列舉了。
看完了這篇文章,相信你對JavaScript中數組去重的方法有了一定的了解,想了解更多相關知識,歡迎關注億速云行業資訊頻道,感謝各位的閱讀!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。