JS一級(jí)數(shù)組和數(shù)組對(duì)象合并去重方法實(shí)例
一級(jí)數(shù)組
方法一 使用 es6 的 Set 和 Array.from 方法
let arr1 = [1, 2, 3, 4, 5, 6, 2, 3] let arr2 = [1, 2, 3, 4, 5, 6, 5, 6] let result = Array.from(new Set([...arr1, ...arr2])) console.log(result) // [1, 2, 3, 4, 5, 6]
方法二 使用 indexOf 方法
let arr1 = [1, 2, 3, 4, 5, 6, 2, 3]
let arr2 = [1, 2, 3, 4, 5, 6, 5, 6]
let arr3 = arr1.concat(arr2)
function uniqueFun(arr) {
const newArr = []
for (let i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) == -1) {
newArr.push(arr[i])
}
}
return newArr
}
console.log(uniqueFun(arr3)) // [1, 2, 3, 4, 5, 6]方法三 使用 includes 方法
let arr1 = [1, 2, 3, 4, 5, 6, 2, 3]
let arr2 = [1, 2, 3, 4, 5, 6, 5, 6]
let arr3 = arr1.concat(arr2)
function uniqueFun(arr) {
const newArr = []
for (let i = 0; i < arr.length; i++) {
if (!newArr.includes(arr[i])) {
newArr.push(arr[i])
}
}
return newArr
}
console.log(uniqueFun(arr3)) // [1, 2, 3, 4, 5, 6]方法四 使用 filter 方法
let arr1 = [1, 2, 3, 4, 5, 6, 2, 3]
let arr2 = [1, 2, 3, 4, 5, 6, 5, 6]
let arr3 = arr1.concat(arr2) // [1, 2, 3, 4, 5, 6, 2, 3, 1, 2, 3, 4, 5, 6, 5, 6]
function uniqueFun(arr) {
return arr.filter((item, index, arr) => {
return arr.indexOf(item) == index // 返回當(dāng)前元素在原始數(shù)組的索引值 == 當(dāng)前索引值的元素
})
}
conosle.log(uniqueFun(arr3)) // [1, 2, 3, 4, 5, 6]方法五 使用 es6 Map
let arr1 = [1, 2, 3, 4, 5, 6, 2, 3]
let arr2 = [1, 2, 3, 4, 5, 6, 5, 6]
let arr3 = arr1.concat(arr2)
function uniqueFun(arr) {
let map = new Map()
return arr.filter(item => {
return !map.has(item) && map.set(item, 1)
})
}
console.log(uniqueFun(arr3)) // [1, 2, 3, 4, 5, 6]數(shù)組對(duì)象
方法一 使用擴(kuò)展運(yùn)算符(...), filter 和 Map
let arr1 = [{id: 1, name: '小明'}, {id: 2, name: '小紅'}, {id: 4, name: '小劉'}]
let arr2 = [{id: 1, name: '小明'}, {id: 2, name: '小紅'}, {id: 3, name: '小王'}]
let arr3 = [...arr1, ...arr2]
function uniqueFun(arr) {
const map = new Map()
return arr.filter(item => {
return !map.has(item.id) && map.set(item.id, 1)
})
}
console.log(uniqueFun(arr3)) // 輸出 [{id: 1, name: '小明}, {id: 2, name: '小紅'}, {id: 4, name: '小劉'}, {id: 3, name: '小王'}]方法二 使用擴(kuò)展運(yùn)算符(...), filter 和對(duì)象字面量 {}
let arr1 = [{id: 1, name: '小明'}, {id: 2, name: '小紅'}, {id: 4, name: '小劉'}]
let arr2 = [{id: 1, name: '小明'}, {id: 2, name: '小紅'}, {id: 3, name: '小王'}]
let arr3 = [...arr1, ...arr2]
function uniqueFun(arr) {
const obj = {}
return arr.filter(item => {
return !obj.hasOwnProperty(item.id) && (obj[item.id] = 1)
})
}
console.log(uniqueFun(arr3)) // 輸出 [{id: 1, name: '小明}, {id: 2, name: '小紅'}, {id: 4, name: '小劉'}, {id: 3, name: '小王'}]方法三 使用concat, reduce 和 find
let arr1 = [{id: 1, name: '小明'}, {id: 2, name: '小紅'}, {id: 4, name: '小劉'}]
let arr2 = [{id: 1, name: '小明'}, {id: 2, name: '小紅'}, {id: 3, name: '小王'}]
let arr3 = arr1.concat(arr2)
function uniqueFun(arr) {
return arr.reduce((pre, cur) => {
if (!pre.find(item => item.id === cur.id)) {
pre.push(cur)
}
return pre
}, [])
}
console.log(uniqueFun(arr3)) // 輸出 [{id: 1, name: '小明}, {id: 2, name: '小紅'}, {id: 4, name: '小劉'}, {id: 3, name: '小王'}]以上就是JS一級(jí)數(shù)組和數(shù)組對(duì)象合并去重方法實(shí)例的詳細(xì)內(nèi)容,更多關(guān)于JS一級(jí)數(shù)組數(shù)組對(duì)象合并去重的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
從表單校驗(yàn)看JavaScript策略模式的使用詳解
這篇文章主要介紹了從表單校驗(yàn)看JavaScript策略模式的使用,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-10-10
JS使用JSON.parse(),JSON.stringify()實(shí)現(xiàn)對(duì)對(duì)象的深拷貝功能分析
這篇文章主要介紹了JS使用JSON.parse(),JSON.stringify()實(shí)現(xiàn)對(duì)對(duì)象的深拷貝功能,結(jié)合實(shí)例形式分析了JSON.parse()與JSON.stringify()方法實(shí)現(xiàn)深拷貝的相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2019-03-03
ionic組件ion-tabs選項(xiàng)卡切換效果實(shí)例
這篇文章主要為大家詳細(xì)介紹了ionic組件ion-tabs選項(xiàng)卡切換效果實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08
如何通過JavaScript來實(shí)現(xiàn)頁面間數(shù)據(jù)傳遞
這篇文章主要給大家介紹了關(guān)于如何通過JavaScript來實(shí)現(xiàn)頁面間數(shù)據(jù)傳遞的相關(guān)資料,在前端開發(fā)中我們常常需要從一個(gè)跳到另一個(gè)頁面,并且將當(dāng)前頁面的數(shù)據(jù)傳遞過去,需要的朋友可以參考下2023-11-11
JS實(shí)現(xiàn)的簡(jiǎn)單圖片切換功能示例【測(cè)試可用】
這篇文章主要介紹了JS實(shí)現(xiàn)的簡(jiǎn)單圖片切換功能,結(jié)合實(shí)例形式分析了javascript結(jié)合時(shí)間函數(shù)定時(shí)觸發(fā)控制圖片的遍歷與切換操作相關(guān)技巧,需要的朋友可以參考下2017-02-02
在javascript中使用com組件的簡(jiǎn)單實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄趈avascript中使用com組件的簡(jiǎn)單實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧,祝大家游戲愉快哦2016-08-08
使用layui的router來進(jìn)行傳參的實(shí)現(xiàn)方法
今天小編就為大家分享一篇使用layui的router來進(jìn)行傳參的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JS中間件設(shè)計(jì)模式的深入探討與實(shí)例分析
這篇文章主要介紹了JS中間件設(shè)計(jì)模式,結(jié)合實(shí)例形式分析了JS中間件設(shè)計(jì)模式功能、原理、應(yīng)用場(chǎng)景及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
基于JQuery+HTML+JavaScript實(shí)現(xiàn)地圖位置選取和地址模糊查詢
本文詳細(xì)講解了如何使用 JQuery+HTML+JavaScript 實(shí)現(xiàn)移動(dòng)端頁面中的地圖位置選取功能,本文逐步展示了如何構(gòu)建基本的地圖頁面,如何通過點(diǎn)擊地圖獲取經(jīng)緯度和地理信息,以及如何實(shí)現(xiàn)模糊查詢地址并在地圖上標(biāo)注,感興趣的小伙伴跟著小編一起來看看吧2024-07-07

