前端去重方法有多種,只說三種常用的(新老方法都有)
1-使用常規(guī)雙for循環(huán)(暴力算法)遍歷比較的方式對(duì)值進(jìn)行比較
2-使用js方法sort排序（只針對(duì)數(shù)組），但是經(jīng)常在vue等新框架中提示TypeError: arr.sort is not a function
3-使用reduce方法(>_<)推薦
前端js各種操作合集備忘
業(yè)務(wù)場(chǎng)景
點(diǎn)擊路線后后面車道框只顯示當(dāng)前路線的車道數(shù)選項(xiàng),Excel導(dǎo)入測(cè)試數(shù)據(jù)，發(fā)現(xiàn)有重復(fù)的，而且后期路上的數(shù)據(jù)導(dǎo)進(jìn)來(lái)會(huì)導(dǎo)致下拉框很長(zhǎng)！所以在不影響業(yè)務(wù)場(chǎng)景的要求下選擇去重展示！
常規(guī)去重
使用reduce
這里同時(shí)使用了三元運(yùn)算符，看不懂自行百度文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-510357.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-510357.html
代碼
HTML || vue中的template
<el-select v-model="queryParams.cdNum" placeholder="車道數(shù)" clearable>
<el-option
v-for="lx in lxcdNum"
:key="lx.lxId+lx.beginZh"
:label="lx.cdNum"
:value="lx.cdNum"
/>
</el-select>
js
(response => {
// todo 關(guān)于前端 去重 新老方法的使用
var arr = [];
var laneArr = []
var hash = [];
/* 刪除下拉框中的重復(fù)項(xiàng) */
// for(let i = 0; i < response.rows.length; i++){
// arr = response.rows[i].cdNum;
arr = response.rows
laneArr = arr.reduce(function (item,next){
hash[next.cdNum] ? '' : hash[next.cdNum] = item.push(next);
return item;
}, []);
// for(let j = i + 1; j < response.rows.length; j++){
// if(response.rows[i].cdNum == response.rows[j].cdNum){
// j = ++i;
// }
// }
// if (arr[i] != arr[i-1]){
// laneArr = arr.push(arr[i])
// }
// }
this.lxcdNum = laneArr
})
到了這里，關(guān)于vue中v-for重復(fù)數(shù)據(jù)處理||element下拉框去除重復(fù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
