JavaScrip數(shù)組去重操作實(shí)例小結(jié)
本文實(shí)例講述了JavaScrip數(shù)組去重操作。分享給大家供大家參考,具體如下:
內(nèi)置的for-of方法
<script>
var arr=[2,1,1,3,'','','e','e',true,'true',true,false,false,'false',undefined,'undefined',undefined,null,'null',null];
function uniqueUseForOf(array) {
const temp = []; //一個(gè)臨時(shí)數(shù)組
// 傳入值必須存在,且長度小于等于1的時(shí)候直接返回?cái)?shù)組
if (array && array.length <= 1) {
return array;
} else {
//遍歷當(dāng)前數(shù)組
for (let x of array) {
temp.indexOf(x) === -1 ? temp.push(x) : '';
}
}
return temp;
}
uniqueUseForOf(arr);
console.log(uniqueUseForOf(arr))
</script>
運(yùn)行結(jié)果:

內(nèi)置的forEach方法
<script>
var arr=[3,1,1,3,'','','e','e',true,'true',true,false,false,'false',undefined,'undefined',undefined,null,'null',null];
function uniqueUseForEach(array) {
// 傳入值必須存在,且長度小于等于1的時(shí)候直接返回?cái)?shù)組
if (array && array.length <= 1) {
return array;
} else {
var temp = []; //一個(gè)臨時(shí)數(shù)組
//遍歷當(dāng)前數(shù)組
array.forEach(function (value, index) {
temp.indexOf(value) == -1 ? temp.push(value) : '';
})
return temp;
}
}
uniqueUseForEach(arr);
console.log(uniqueUseForEach(arr))
</script>
運(yùn)行結(jié)果:

萬能的for方法
<script>
var arr=[1,1,'','','e','e',true,'true',true,false,false,'false',undefined,'undefined',undefined,null,'null',null];
function uniqueUseFor(array) {
var temp = []; //一個(gè)臨時(shí)數(shù)組
//遍歷當(dāng)前數(shù)組
for (var i = 0, j = array.length; i < j; i++) {
//很直白,新數(shù)組內(nèi)判斷是否有這個(gè)值,沒有的情況下,就推入該新數(shù)組
temp.indexOf(array[i]) === -1 ? temp.push(array[i]) : '';
}
return temp;
}
uniqueUseFor(arr);
console.log(uniqueUseFor(arr))
</script>
運(yùn)行結(jié)果:

第一種方法:
<script>
var arr = [1, 2, 3, 4, 1, 2, 4, 5, 6];
console.log(arr);
Array.prototype.unique = function() {
var n = [this[0]]; //結(jié)果數(shù)組
for(var i = 1; i < this.length; i++) //從第二項(xiàng)開始遍歷
{
//如果當(dāng)前數(shù)組的第i項(xiàng)在當(dāng)前數(shù)組中第一次出現(xiàn)的位置不是i,
//那么表示第i項(xiàng)是重復(fù)的,忽略掉。否則存入結(jié)果數(shù)組
if(this.indexOf(this[i]) == i) n.push(this[i]);
}
return n;
};
console.log(arr.unique());
</script>
第二種方法:
<script>
var arr = [1,2,3,4,1,2,4,5,6];
console.log(arr);
Array.prototype.unique = function()
{
var n = {},
r = []; //n為hash表,r為臨時(shí)數(shù)組
for (var i = 0; i < this.length; i++) { //遍歷當(dāng)前數(shù)組
if (!n[this[i]]) { //如果hash表中沒有當(dāng)前項(xiàng)
n[this[i]] = true; //存入hash表
r.push(this[i]); //把當(dāng)前數(shù)組的當(dāng)前項(xiàng)push到臨時(shí)數(shù)組里面
}
}
return r;
};
console.log(arr.unique());
</script>
第三種方法:
<script>
var arr = [1,2,3,4,1,2,4,5,6];
console.log(arr);
Array.prototype.unique = function() {
var n = []; //一個(gè)新的臨時(shí)數(shù)組
for (var i = 0; i < this.length; i++) //遍歷當(dāng)前數(shù)組
{
//如果當(dāng)前數(shù)組的第i已經(jīng)保存進(jìn)了臨時(shí)數(shù)組,那么跳過,
//否則把當(dāng)前項(xiàng)push到臨時(shí)數(shù)組里面
if (n.indexOf(this[i]) == -1) n.push(this[i]);
}
return n;
};
console.log(arr.unique());
</script>
上述三種方法運(yùn)行結(jié)果為:

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。
PS:這里再為大家提供幾款相關(guān)工具供大家參考使用:
在線去除重復(fù)項(xiàng)工具:
http://tools.jb51.net/code/quchong
在線文本去重復(fù)工具:
http://tools.jb51.net/aideddesign/txt_quchong
更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專題:《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript字符與字符串操作技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JavaScript 驗(yàn)證瀏覽器是否支持javascript的方法小結(jié)
一些網(wǎng)站只有客戶端js的驗(yàn)證,這樣就給一些hacher一些可趁之機(jī)了,不信大家測試一些網(wǎng)站的注冊功能看看,有部分網(wǎng)站只有客戶端驗(yàn)證,我為了達(dá)到客戶端驗(yàn)證,先是判斷瀏覽器是否支持js,如果不支持,提示信息,然后屏蔽掉發(fā)送按鈕2009-05-05
JS Promise axios 請(qǐng)求結(jié)果后面的.then() 是什么意思
本文主要介紹了JS Promise axios 請(qǐng)求結(jié)果后面的 .then() 是什么意思,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01
微信小程序使用map組件實(shí)現(xiàn)獲取定位城市天氣或者指定城市天氣數(shù)據(jù)功能
這篇文章主要介紹了微信小程序使用map組件實(shí)現(xiàn)獲取定位城市天氣或者指定城市天氣數(shù)據(jù)功能,涉及微信小程序map組件結(jié)合微信API獲取天氣信息相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
js控制的回到頁面頂端goTop的代碼實(shí)現(xiàn)
在瀏覽網(wǎng)頁的時(shí)候應(yīng)該會(huì)經(jīng)常見到右下角有個(gè)【回到頂端】的懸浮東東,本文也要使用js實(shí)現(xiàn)一下,感興趣的朋友可以參考下哈,希望可以幫助到你2013-03-03
ES6知識(shí)點(diǎn)整理之函數(shù)對(duì)象參數(shù)默認(rèn)值及其解構(gòu)應(yīng)用示例
這篇文章主要介紹了ES6知識(shí)點(diǎn)整理之函數(shù)對(duì)象參數(shù)默認(rèn)值及其解構(gòu)應(yīng)用,結(jié)合實(shí)例形式分析了ES6函數(shù)對(duì)象參數(shù)相關(guān)使用技巧,需要的朋友可以參考下2019-04-04

