js數(shù)組去重九種方式以及詳解
以下共有九種數(shù)組去重的方式和詳解(包含對(duì)象數(shù)組去重):
1.利用Array.from(new Set)去重:
// 1.利用set去重 // Set是es6新增的數(shù)據(jù)結(jié)構(gòu),似于數(shù)組,但它的一大特性就是所有元素都是唯一的,沒有重復(fù)的值,我們一般稱為集合 // Array.from()就是將一個(gè)類數(shù)組對(duì)象或者可遍歷對(duì)象轉(zhuǎn)換成一個(gè)真正的數(shù)組,也是ES6的新增方法 let list = ['你是最棒的', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, '你是最棒的',] let newList = Array.from(new Set(list)) console.log('newList', newList);
效果:
2.利用includes去重
//2.利用Array.includes 去重 //includes() 方法用來判斷一個(gè)數(shù)組是否包含一個(gè)指定的值,如果是返回 true,否則false。 let list = ['你是最棒的1', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, '你是最棒的1',] let newList2 = [] list.forEach((item) => { // 空數(shù)組newList2 不包含item為false ,取反為true 執(zhí)行數(shù)組添加操作 // 如果數(shù)組包含了 item為true 取反為false 不執(zhí)行數(shù)組添加操作 if (!newList2.includes(item)) { newList2.push(item) } }) console.log('newList2', newList2);
效果
3.利用map去重
//3.利用map去重 //map數(shù)據(jù)結(jié)構(gòu)是es6中新出的語法,其本質(zhì)也是鍵值對(duì),只是其鍵不局限于普通對(duì)象的字符串 let list = ['你是最棒的2', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, '你是最棒的2',] let newList3 = []; let map = new Map() list.forEach((item) => { // 如果map.has指定的item不存在,那么就設(shè)置key和value 這個(gè)item就是當(dāng)前map里面不存在的key,把這個(gè)item添加到新數(shù)組 // 如果下次出現(xiàn)重復(fù)的item,那么map.has(item等于ture 取反 !map.has(item) 不執(zhí)行 if (!map.has(item)) { map.set(item,ture) newList3.push(item) } }) console.log('newList3', newList3);
效果:
4.利用indexOf去重
//4.利用indexOf去重 //indexOf() 方法可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置。如果沒有找到匹配的字符串則返回 -1 let list = ['你是最棒的3', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, '你是最棒的3',] let newList4 = []; list.forEach((item) => { // 空數(shù)組newList4第一次循環(huán)沒有找到匹配的item 返回-1 執(zhí)行數(shù)組添加操作 // 如果數(shù)組在第n次循環(huán)中找到了newList4數(shù)組中item 例如:item等于6 而在newList4數(shù)組中已經(jīng)有9 所以indexOf就不等于-1 不執(zhí)行數(shù)組添加操作 if (newList4.indexOf(item) === -1) { newList4.push(item) } }) console.log('newList4', newList4);
效果:
5. 利用單層for循環(huán)去重
// 5.單層for循環(huán)去重 // Array.splice() 方法用于添加或刪除數(shù)組中的元素。會(huì)改變原數(shù)組 let list = ['你是最棒的4', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, '你是最棒的4',] let newlist5 = []; for (let i = 0; i < list.sort().length; i++) { if (list[i] == list[i + 1]) { list.splice(i, 1) i-- } } console.log('newlist5', list);
效果:
6.利用雙層for循環(huán)去重
// 6.雙層for循環(huán)去重 // Array.splice() 方法用于添加或刪除數(shù)組中的元素。會(huì)改變原數(shù)組 let list = ['你是最棒的5', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, '你是最棒的5',] for (let i = 0; i < list.sort().length; i++) { for (let j = i + 1; j < list.sort().length; j++) { if (list[i] == list[j]) { list.splice(i, 1) j-- } } } console.log('newlist6', list);
效果:
7.利用遞歸去重
// 7.遞歸去重 let list = ['你是最棒的6', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, '你是最棒的6',] function callBack(index) { // 數(shù)組的長度不能等于0 if (index >= 1) { // 第一次如果數(shù)組最后一個(gè)索引和最后第二個(gè)索引相等 if (list[index] === list[index - 1]) { // 那么就刪除這個(gè)索引的元素 list.splice(index, 1) } // 繼續(xù)調(diào)用這個(gè)函數(shù) 第一次傳入的參數(shù)是數(shù)組末尾第一個(gè) 第二次傳入的參數(shù)是數(shù)組末尾第二個(gè) 層層遞減 callBack(index - 1) } } //傳入排序好的數(shù)組的最大索引index callBack(list.sort().length - 1) console.log('newList7', list);
效果:
8.利用Array.filter和map對(duì)象數(shù)組去重 (性能較高)
//8.利用Array.filter和map去重 let map = new Map() let list3 = [{ name: '好先森1', id: 1 }, { name: '好先森1', id: 2 }, { name: '好先森2', id: 3 }, { name: '好先森3', id: 3 } ] // 對(duì)象數(shù)組去重 function xxx(list3, key) { return list3.filter((item) => !map.has(item[key].toString()) && map.set(item[key].toString())) } console.log('newList8', xxx(list3, 'id'));
效果:
9.利用Array.filter和Array.includes 對(duì)象數(shù)組去重
// 9.利用Array.filter和Array.includes去重 let list4 = [{ name: '好先森1', id: 1 }, { name: '好先森1', id: 2 }, { name: '好先森2', id: 3 }, { name: '好先森3', id: 3 } ] function xxx(arr) { let list = []; return arr.filter((item) => !list.includes(item.name) && list.push(item.name)) } console.log('newList9', xxx(list4));
效果:
總結(jié)
到此這篇關(guān)于js數(shù)組去重九種方式的文章就介紹到這了,更多相關(guān)js數(shù)組去重方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
找到一點(diǎn)可憐的關(guān)于dojo資料,謝謝作者!
找到一點(diǎn)可憐的關(guān)于dojo資料,謝謝作者!...2006-12-12js對(duì)table的td進(jìn)行相同內(nèi)容合并示例詳解
正如標(biāo)題所言如何對(duì)table的td進(jìn)行相同內(nèi)容合并,下面為大家詳細(xì)介紹下使用js是如何做到的,感興趣的朋友不要錯(cuò)過2013-12-12純Javascript實(shí)現(xiàn)Windows 8 Metro風(fēng)格實(shí)現(xiàn)
Windows 8 Metro風(fēng)格設(shè)計(jì),實(shí)現(xiàn)網(wǎng)站或系統(tǒng)功能的導(dǎo)航,在本文將為大家介紹下如何用純Javascript實(shí)現(xiàn)Windows 8 Metro風(fēng)格,感興趣的朋友可以參考下2013-10-10在IE8上JS實(shí)現(xiàn)combobox支持拼音檢索功能
這篇文章主要介紹了在IE8上JS實(shí)現(xiàn)combobox支持拼音檢索功能的相關(guān)資料,本文介紹的非常詳細(xì),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05