JavaScript數(shù)組去重的多種方法(四種)
數(shù)組去重,一般需求是給你一個(gè)數(shù)組,調(diào)用去重方法,返回?cái)?shù)值副本,副本中沒(méi)有重復(fù)元素。一般來(lái)說(shuō),兩個(gè)元素通過(guò) === 比較返回 true 的視為相同元素,需要去重,所以,1 和 "1" 是不同的元素,1 和 new Number(1) 是不同的元素,{} 和 {} 是不同的元素(引用不同)。(當(dāng)然如果需求認(rèn)為 {} 和 {} 算作相同的元素,那么解法就不一樣了)
method 1
使用兩重循環(huán)
function unique(arr) {
var res = [];
for(var i = 0, len = arr.length;i < len; i++) {
var item = arr[i];
for(var j = 0, jLen = res.length; j<jLen; j++) {
if(item == res[j]) break;
}
if(j == jLen) res.push(item);
}
return res;
}
method 2
function unique(arr) {
var ret = []
for (var i = 0; i < arr.length; i++) {
var item = arr[i]
if (ret.indexOf(item) === -1) {
ret.push(item)
}
}
return ret
}
這里判斷可以使用一個(gè)語(yǔ)法糖
function unique(arr) {
var res = [];
for(var i = 0, len = arr.length;i < len; i++) {
var item = arr[i];
(res.indexOf(item) === -1) && res.push(item);
}
return res;
}
但是在低版本瀏覽器并沒(méi)有 indexOf
var indexOf = [].indexOf ?
function(arr, item) {
return arr.indexOf(item)
} :
function indexOf(arr, item) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] === item) {
return i
}
}
return -1
}
function unique(arr) {
var ret = []
for (var i = 0; i < arr.length; i++) {
var item = arr[i]
if (indexOf(ret, item) === -1) {
ret.push(item)
}
}
return ret
}
method3
使用兩重循環(huán)的另外一種比較方式,前面是將原數(shù)組的元素和結(jié)果數(shù)組一一比較,下面我們可以將原數(shù)組的重復(fù)元素的最后一個(gè)元素放入數(shù)組中
function unique(arr) {
var ret = [];
var len = arr.length;
var isRepeat;
for(var i=0; i<len; i++) {
isRepeat = false;
for(var j=i+1; j<len; j++) {
if(arr[i] === arr[j]){
isRepeat = true;
break;
}
}
if(!isRepeat){
ret.push(arr[i]);
}
}
return ret;
}
這里還有一個(gè)優(yōu)化的版本
function unique(a) {
var res = [];
for (var i = 0, len = a.length; i < len; i++) {
for (var j = i + 1; j < len; j++) {
// 這一步十分巧妙
// 如果發(fā)現(xiàn)相同元素
// 則 i 自增進(jìn)入下一個(gè)循環(huán)比較
if (a[i] === a[j])
j = ++i; //j = i = i + 1;
}
res.push(a[i]);
}
return res;
}
method4
用 javascript 中的 object 對(duì)象來(lái)當(dāng)作 哈希表
function dedup(arr) {
var hashTable = {};
return arr.filter(function(value,index,arr){
var key = JSON.stringify(value);
var match = Boolean(hashTable[key]);
return (match ? false : hashTable[key] = true);
});
}
因?yàn)?Object 的 key 值都是 String 類型,所以對(duì)于 1 和 "1" 無(wú)法分別,我們可以稍微改進(jìn)下,將類型也存入 key 中
function dedup(arr) {
var ret = [];
var hash = {};
for(var i = 0; i < arr.length; i++) {
var item = arr[i];
var key = typeof(item) + item;
if(hash[key] !== 1) {
ret.push(item)
hash[key] = 1;
}
}
return ret;
}
總結(jié)
以上所述是小編給大家介紹的JavaScript數(shù)組去重的多種方法(四種),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
使用JS解析excel文件的完整實(shí)現(xiàn)步驟
解析excel文件是我們?nèi)粘i_(kāi)發(fā)中經(jīng)常遇到的一個(gè)需求,下面這篇文章主要給大家介紹了關(guān)于使用JS解析excel文件的完整實(shí)現(xiàn)步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
用js判斷是否為360瀏覽器的實(shí)現(xiàn)代碼
這篇文章主要介紹了用js判斷是否為360瀏覽器的實(shí)現(xiàn)代碼,有時(shí)候我們需要判斷是否為360瀏覽器,包括百度聯(lián)盟后臺(tái)就有這樣的提示需要的朋友可以參考下2015-01-01
詳解javascript實(shí)現(xiàn)瀑布流絕對(duì)式布局
這篇文章主要介紹了javascript實(shí)現(xiàn)瀑布流的兩種布局方式,一是絕對(duì)式布局、二是列式布局,詳細(xì)介紹了這兩種布局方式的原理,感興趣的小伙伴們可以參考一下2016-01-01
mui 打開(kāi)新窗口的方式總結(jié)及注意事項(xiàng)
這篇文章主要介紹了mui 打開(kāi)新窗口的方式總結(jié)及注意事項(xiàng),需要的朋友可以參考下2017-08-08
JS實(shí)現(xiàn)可用滑塊滑動(dòng)的緩動(dòng)圖代碼
這篇文章主要介紹了JS實(shí)現(xiàn)可用滑塊滑動(dòng)的緩動(dòng)圖代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09

