1. 利用シーン
1. 新旧の配列を比較して、増加要素データと減少要素データを抽出します。
2. 実際のプロジェクトでは、フロントが配列形式のデータをバックグラウンドに送信する際、まず新旧データを比較し、変更された追加データと削除データのみを毎回バックグラウンドに送信することで送信効率を高めることができます。 ;
次に、早速、コードを直接見てみましょう。
1. 複数条件抽出による配列の増加と変更
ここでは、マップのキーと値のペアの関係は主に時間の複雑さを軽減するために使用されます。2 つのフィールド属性を主キーとして使用して、古いデータと新しいデータが同じかどうかを判断します。主キーを使用して、使用しているかどうかを判断することもできます。それに応じてコードを変更し、**JSON.stringify()* を使用できます。 * 文字列を唯一の主キーとして変換します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr1 = [{
sysDocKindId: 1,
attachType: 2,
str: 'del的'
},
{
sysDocKindId: 3,
attachType: 2,
},
{
bid: 1,
attachType: 1,
},
{
bid: 8,
attachType: 1,
str: 'del的'
},
{
sysDocKindId: 5,
attachType: 2,
},
{
bid: 6,
attachType: 1,
},
{
sysDocKindId: 6,
attachType: 2,
},
]
let arr2 = [{
sysDocKindId: 3,
attachType: 2,
},
{
bid: 1,
attachType: 1,
},
{
sysDocKindId: 5,
attachType: 2,
},
{
bid: 6,
attachType: 1,
},
{
sysDocKindId: 6,
attachType: 2,
},
{
sysDocKindId: 9,
attachType: 2,
str: 'add的'
},
{
bid: 9,
attachType: 1,
str: 'add的'
},
]
/**
* 方法名：
* 功能介绍：返回一个对象里面包含后一个数组比第一个数组增加、减少的数据（适用于去重过后的数组）
* 参数：
* beforeArr：前一个数组
* afterArr：后一个数组
*/
const compare = (beforeArr, afterArr) => {
let resObj = {
add: [],
del: []
}
let cenMab = new Map();
//把beforeArr数组去重放入cenObj
for (let i = 0; i < beforeArr.length; i++) {
if (beforeArr[i].attachType === 2) {
cenMab.set(JSON.stringify({
sysDocKindId: beforeArr[i].sysDocKindId,
attachType: beforeArr[i].attachType,
}), beforeArr[i])
} else {
cenMab.set(JSON.stringify({
bid: beforeArr[i].bid,
attachType: beforeArr[i].attachType,
}), beforeArr[i])
}
}
//遍历afterArr，查看其元素是否在cenObj中
for (let j = 0; j < afterArr.length; j++) {
let typeOne = JSON.stringify({
sysDocKindId: afterArr[j].sysDocKindId,
attachType: afterArr[j].attachType,
})
let typeTwo = JSON.stringify({
bid: afterArr[j].bid,
attachType: afterArr[j].attachType,
})
if (cenMab.has(typeOne) || cenMab.has(typeTwo)) {
let r1 = cenMab.delete(typeOne)
let r2 = cenMab.delete(typeTwo)
} else {
resObj.add.push(afterArr[j]);
}
}
for (let item of cenMab.values()) {
resObj.del.push(item);
}
return resObj
}
console.log(compare(arr1, arr2));;
</script>
</body>
</html>
2. 配列の抽出、追加、変更、削除
let arr1 = [{
id: 1,
sysAuthObjTypeId: 1,
sysAuthDefId: 2,
actionTag: 17,
str: '删除的'
},
{
id: 2,
sysAuthObjTypeId: 3,
sysAuthDefId: 2,
actionTag: 17,
},
{
id: 3,
sysAuthObjTypeId: 1,
sysAuthDefId: 1,
actionTag: 17,
str: '没变的'
},
{
id: 4,
sysAuthObjTypeId: 8,
sysAuthDefId: 1,
actionTag: 17,
str: '删除的'
},
{
id: 5,
sysAuthObjTypeId: 5,
sysAuthDefId: 2,
actionTag: 17,
},
{
id: 6,
sysAuthObjTypeId: 6,
sysAuthDefId: 1,
actionTag: 17,
str: '没变的'
},
{
id: 7,
sysAuthObjTypeId: 6,
sysAuthDefId: 2,
actionTag: 17,
},
]
let arr2 = [{
sysAuthObjTypeId: 3,
sysAuthDefId: 2,
actionTag: 17,
str: '删除后又添加权限值 没变的'
},
{
id: 3,
sysAuthObjTypeId: 1,
sysAuthDefId: 1,
actionTag: 17,
str: '没变的'
},
{
id: 5,
sysAuthObjTypeId: 5,
sysAuthDefId: 2,
actionTag: 1,
str: '变的'
},
{
sysAuthObjTypeId: 6,
sysAuthDefId: 1,
actionTag: 17,
str: '删除后又添加权限值 没变的'
},
{
sysAuthObjTypeId: 6,
sysAuthDefId: 2,
actionTag: 16,
str: '删除后又添加权限值 变的'
},
{
sysAuthObjTypeId: 9,
sysAuthDefId: 2,
actionTag: 3,
str: 'add的'
},
{
sysAuthObjTypeId: 9,
sysAuthDefId: 1,
actionTag: 3,
str: 'add的'
},
]
/**
* 方法名：
* 功能介绍：返回一个对象里面包含后一个数组比第一个数组增加、减少的数据（适用于去重过后的数组）
* 参数：
* beforeArr：前一个数组
* afterArr：后一个数组
*/
const compare = (beforeArr, afterArr) => {
let resObj = {
insertList: [],
deleteList: [],
updateList: [],
isChange: false,
};
let cenMab = new Map();
//把beforeArr数组去重放入cenObj
for (let i = 0; i < beforeArr.length; i++) {
cenMab.set(JSON.stringify({
sysAuthObjTypeId: beforeArr[i].sysAuthObjTypeId,
sysAuthDefId: beforeArr[i].sysAuthDefId,
}), beforeArr[i])
}
//遍历afterArr，查看其元素是否在cenObj中
for (let j = 0; j < afterArr.length; j++) {
let typeOne = JSON.stringify({
sysAuthObjTypeId: afterArr[j].sysAuthObjTypeId,
sysAuthDefId: afterArr[j].sysAuthDefId,
})
if (cenMab.has(typeOne)) {
console.log(afterArr[j].actionTag );
if (cenMab.get(typeOne).actionTag != afterArr[j].actionTag) {
resObj.isChange = true;
resObj.updateList.push({
...afterArr[j],
id: cenMab.get(typeOne).id
});
}
let r1 = cenMab.delete(typeOne)
} else {
resObj.isChange = true;
resObj.insertList.push(afterArr[j]);
}
}
// 遍历push剩余删除的数据
for (let item of cenMab.values()) {
resObj.isChange = true;
resObj.deleteList.push(item);
}
return resObj
}
console.log(compare(arr1, arr2));
3. 実行結果:
追加および追加する必要があるデータがそれぞれ add 配列と del 配列に抽出され、使用時に関数呼び出しを自分でカプセル化できることがわかります。
