做聊天項目的時候遇要實現(xiàn)這樣的一個功能: 邀請新的好友入群;點擊邀請好友會彈出一個好友列表,顯示你除了在群里面的好友外剩下的所有好友;
我的思路是取到你所有的好友,然后所有好友中過濾掉已經(jīng)是群成員的好友
const users = [
{
_id: 1,
name: '好友1'
},
{
_id: 2,
name: '好友1'
},
{
_id: 3,
name: '好友1'
},
];
const groupMembers = [
{
_id: 1,
name: '好友1'
},
{
_id: 2,
name: '好友1'
},
]
現(xiàn)在一步一步來看數(shù)組的操作
一,兩個數(shù)組里的每一項分別為元素時
const arr1 = ['', '100', '120', '125', '125', '130', '130'];
const arr2 = ['', '120', '125', '125', '130'];
請問如何求得兩個數(shù)組之差？使得新數(shù)組為 arr3 = ['100','130']
方法一:
思路:用for循環(huán)比較arr1和arr2的每一項,如果相等,就刪除
const arr1 = ['', '120', '125', '125', '130', '130', '130', '130', '130'];
const arr2 = ['', '120', '125', '130'];
for (let i = arr1.length - 1; i >= 0; i--) {
a = arr1[i];
for (let j = arr2.length - 1; j >= 0; j--) {
b = arr2[j];
if (a == b) {
arr1.splice(i, 1);
arr2.splice(j, 1);
break;
}
}
}
console.log(arr1); // ['125','130','130','130','130']
方法二:
思路:將第一個數(shù)組存入一個對象尔破，這樣就已經(jīng)去重了懒构；再把第二個數(shù)組中的元素當作key從對象中刪除耘擂。
const m = {};
arr1.forEach(function(al){m[al]=al;})
arr2.forEach(function(bl){delete m[bl];})
console.dir(Object.keys(m))
方法三:
思路:聲明一個新的數(shù)組arr3,比較arr1和arr2,如果arr1中有和arr2不相等的就放入arr3中,用到了es6中關于數(shù)組的新方法findIndex(),稍后會詳細的介紹;
const arr1 = ['', '100', '120', '125', '125', '130', '130'];
const arr2 = ['', '120', '125', '125', '130'];
const arr3 = [];
arr1.forEach((a)=>{
let c = arr2.findIndex(b =>a === b);
if (c > -1) delete arr2[c];
else arr3.push(a);
});
console.log(arr3) //['100', '130']
二, arr1中的每一項都是對象,arr2中的每一項都是元素
const a = [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }];
const b = [15, 3];
方法一
a.filter(item => { return !b.includes(item.id); });
或
a.filter(item => { return b.indexOf(item.id) === -1; });
方法二:
a=a.filter((x)=>b.every((y)=>y!=x.id))
方法三:
const a = [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }];
const b = [15, 3];
for(index in a){
if(b.indexOf(a[index]['id'])>=0)
a.splice(index,1);
}
console.log(a);
或
const result = a.filter(function (item) {
return b.indexOf(item.id) < 0;
})
三,arr1中的每一項都是對象,arr2中的每一項也都是對象,現(xiàn)在回到主題
const a = [
{_id: 1},
{_id: 2},
{_id: 3},
];
const b = [
{_id: 2},
{_id: 4},
]
解決方法一:
const c = a.filter(x => !b.find(y => y._id === x._id)); // [ { _id: 1 }, { _id: 3} ]
解決方法二:
const c = a.filter(x => b.every(y => y._id !== x._id));
四,介紹一下上面用到的數(shù)組實例中的find(), findIndex(), includes()
find()
find()用于找出第一個符合條件的數(shù)組成員,它的參數(shù)是一個回調函數(shù),所有的數(shù)組成員依次執(zhí)行該回調函數(shù),直到找到第一個返回值為true的成員,然后返回該成員,如果沒有的話,返回undefined
[0, 4, -5, -10].find((n) => n < 0);
// -5
上面代碼找出數(shù)組中第一個小于0的成員
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
})
// 10
find方法的回調函數(shù)可以接受三個參數(shù),當前的值,當前的位置和原數(shù)組
findIndex()
findIndex()方法的用法與find()方法類似,返回第一個符合條件的數(shù)組成員的位置,如果所有成員都不符合,則返回-1.
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
})
// 2
兩個方法都可以發(fā)現(xiàn)NAN,彌補了數(shù)組的indexOf方法的不足
[NaN].indexOf(NaN)
// -1
[NaN].findIndex(y => Object.is(NaN, y))
// 0
indexOf方法無法識別數(shù)組的NaN成員,但是findIndex方法可以借助Object.is方法做到
includes()
Array.prototype.includes方法返回一個布爾值,表達某個數(shù)組是否包含給定的值,與字符串的includes方法類似
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
[1, 2, NaN].includes(NaN) // true
該方法的第二個參數(shù)表示搜索的起始位置,默認為0,如果第二個參數(shù)為負數(shù),表示倒數(shù)的位置;如果這是它大于數(shù)組長度(比如第二個參數(shù)為-4.但是數(shù)組長度為3),則會重置為從0開始
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
沒有該方法之前,我們通常使用數(shù)組的indexOf方法,檢查是否包含某個值
if (arr.indexOf(el) !== -1) {
// ...
}
indexOf方法有兩個缺點,一是不夠語義化.它的含義是找到參數(shù)值的第一個出現(xiàn)位置.所以要去比較是否不等于-1,而是,它內部使用嚴格相等運算符(===)進行判斷,這會導致對NaN的誤判
[NaN].indexOf(NaN)
// -1
includes使用的是不一樣的判斷算法秩霍，就沒有這個問題蚁阳。
[NaN].includes(NaN)
// true
