javascript中關(guān)于去重操作的使用
前言:
前端開(kāi)發(fā)里面,在JS中關(guān)于數(shù)據(jù)去重操作的使用是非常常用,也是非常重要的點(diǎn),一般情況下關(guān)于對(duì)數(shù)組去重點(diǎn)操作是最常用的,其次是具體的關(guān)于某一數(shù)據(jù)類型的去重操作,如字符串去重、數(shù)字去重等。那么本篇博文就來(lái)分享一下去重操作的使用,方便后期查閱使用。
核心的基本算法
遍歷拿到的數(shù)據(jù)數(shù)組,然后把該數(shù)組中的元素存放到新的數(shù)組中,在存放到新數(shù)組之前要檢查數(shù)組的元素是否已經(jīng)存在,如果存在(相同元素,即重復(fù)元素)就不再放入新的數(shù)組中。
數(shù)據(jù)去重的基本用法
在JS中關(guān)于去重操作的使用一般是關(guān)于數(shù)組去重、字符串去重、數(shù)字去重,具體的使用示例如下所示。
1、數(shù)組去重
數(shù)組去重有三種方法:
- 方法一:indexOf循環(huán)去重;
- 方法二:ES6的Set去重;Array.from(new Set(arr));
- 方法三:Object 鍵值對(duì)去重;把數(shù)組的值存成 Object 的 key 值,比如 Object[valuea] = true, 在判斷另一個(gè)值的時(shí)候,如果 Object[valueb]存在的話,就說(shuō)明該值是重復(fù)的。
這里只拿indexOf 循環(huán)去重來(lái)做示例,??
示例數(shù)組:
var array = [1, 2, 3, 4, 5, 5, 4, 3, 2,1];
處理方法:
function repeat(array){
var array1 = []; // 新建數(shù)組用來(lái)存array的值
for(var i=0,leng=array.length;i<leng;i++){
if(array1.indexOf(array[i]) === -1){
array1.push(array[i]);
}
}
return array1;
}
console.log(unique(array)); // 數(shù)組輸出結(jié)果: [ 1, 2, 3, 4, 5]注意:indexOf是ES5新增加的函數(shù),用來(lái)獲取數(shù)組中元素的位置(下標(biāo)),兼容性IE8+。
2、字符串去重
示例字符串:
var str = "12345678987654321”;
處理方法:
function repeat(str){
var str1 = ""; //用來(lái)接收去重后的字符串
for(var i in str){
if(str1.indexOf(str.charAt(i)) == -1){
str1+=str.charAt(i);
}
}
return str1; // 返回去重后的字符串
}
// 輸出結(jié)果repeat("123456789");
// 字符串轉(zhuǎn)換成數(shù)組
function repeat1(str){
var array = str.slice("");
var str1 = uniqueArray(array);
return str1.join("");
}
console.log(repeat1(str)); //輸出結(jié)果repeat1("123456789");3、數(shù)字去重
接著上面字符串去重的思路就比較簡(jiǎn)單許多,首先把數(shù)字轉(zhuǎn)換成字符串,然后再做處理。12345678987654321去重之后結(jié)果為123456789。
示例字符串:
var str = "12345678987654321”;
處理方法:
function repeat(num){
var str = num + "";
var num1 = repeat(str);
return parseInt(num1);
}
console.log(repeat(num)); // 輸出結(jié)果repeat(123456789);最后
通過(guò)上面介紹的JS中關(guān)于去重操作的使用匯總,常用的去重算法通過(guò)本文內(nèi)容就可涵蓋,在Vue.js開(kāi)發(fā)中的使用就游刃有余了,這也是在開(kāi)發(fā)過(guò)程中必用的功能,尤其是對(duì)于初中級(jí)開(kāi)發(fā)者來(lái)說(shuō),更應(yīng)該掌握這些情況的使用,這里不再贅述。
到此這篇關(guān)于javascript中關(guān)于去重操作的使用的文章就介紹到這了,更多相關(guān)JS去重操作內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript onclick與addEventListener使用的區(qū)別介紹
addEventListener()方法用于向指定元素添加事件句柄,使用 removeEventListener()方法來(lái)移除,onclick和addEventListener事件區(qū)別是:onclick事件會(huì)被覆蓋,而addEventListener可以先后運(yùn)行不會(huì)被覆蓋,addEventListener可以監(jiān)聽(tīng)多個(gè)事件2022-09-09
手寫Spirit防抖函數(shù)underscore和節(jié)流函數(shù)lodash
這篇文章主要介紹了手寫Spirit防抖函數(shù)underscore和節(jié)流函數(shù)lodash,接下來(lái)將會(huì)帶你們了解下這兩者的區(qū)別,以及我們?cè)撊绾问謱憣?shí)現(xiàn)這兩個(gè)函數(shù)2022-03-03
javascript實(shí)現(xiàn)一個(gè)數(shù)值加法函數(shù)
這篇文章主要介紹了javascript實(shí)現(xiàn)一個(gè)數(shù)值加法函數(shù),十分的簡(jiǎn)單實(shí)用,方便大家理解javascript,有需要的小伙伴可以參考下。2015-06-06
javascript實(shí)現(xiàn)鼠標(biāo)選取拖動(dòng)或Ctrl選取拖動(dòng)
javascript實(shí)現(xiàn)鼠標(biāo)選取拖動(dòng)或Ctrl選取拖動(dòng)...2007-06-06
javascript實(shí)現(xiàn)智能手環(huán)時(shí)間顯示
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)智能手環(huán)時(shí)間顯示,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09
網(wǎng)站內(nèi)容禁止復(fù)制和粘貼、另存為的js代碼
這篇文章主要介紹了JS如何實(shí)現(xiàn)網(wǎng)站內(nèi)容如何實(shí)現(xiàn)禁止復(fù)制和粘貼、另存為,需要的朋友可以參考下2014-02-02
js與jquery實(shí)時(shí)監(jiān)聽(tīng)輸入框值的oninput與onpropertychange方法
這篇文章主要介紹了js與jquery實(shí)時(shí)監(jiān)聽(tīng)輸入框值的oninput與onpropertychange方法,實(shí)例分析了oninput與onpropertychange實(shí)現(xiàn)下拉框里自動(dòng)匹配關(guān)鍵字實(shí)時(shí)監(jiān)聽(tīng)文本框value值變化的功能,需要的朋友可以參考下2015-02-02
JavaScript獲取網(wǎng)頁(yè)表單提交方式的方法
這篇文章主要介紹了JavaScript獲取網(wǎng)頁(yè)表單提交方式的方法,可判斷表單提交方式是get還是post,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04

