新旧节点对比与更新：differNodes
一、前言
工作中遇到这么一个功能，拖动了一些节点，放置在一个数组 currentNodes 中，然后进行下一步的处理。
当对拖动的那些节点进行删除、复制、撤销、重置等操作时，currentNodes 必然发生一些改变，这些改变可以是：
1. 新节点的添加（新 ID 的加入）
2. 旧节点的更新（版本切换）
3. 旧节点的删除（旧 ID 的删除）
我们需要对比新旧节点列表中的值，当其中的值发生变化时，找出需要删除的节点以及需要添加的节点，由于不变的节点中有我们设置好的配置，因此还要保证这些节点不可发生变动。
- 节点的结构如下：
const node = {
nodeId: 'node_1',
versionId: 'v1'
}
- 节点列表的结构如下：
const nodeList = [
{nodeId: 'node_1', versionId: 'v1'},
{nodeId: 'node_2', versionId: 'v1'},
{nodeId: 'node_3', versionId: 'v1'},
]
根据这个结构，只要节点的 id 或 versionId 变化时，就更新。
二、情况分析
-
怎么处理这个问题？
准备几个数组：
- oldList：上一次拖拽产生的节点列表，由 currentNodes 简化复制而来，避免误触原来的配置。
- updatedList：当前拖拽产生的节点列表，也就是最新的节点列表。
- addList：新节点的添加或旧节点版本更新时，就把对应节点添加到此数组中。
- deleteList：在更新的列表中，原来的节点不见了，因为被删除了，找到这些被删除的节点，放进此数组中。
这个问题的关键在于要把不变的节点信息保留下来，因此不能直接用更新后的节点列表，因为如果直接用更新后的节点列表就会覆盖掉之前配置好的节点。
-
具体步骤是什么？
(1) 利用 JSON.stringify() 方法整体上去对比新旧节点是否一样，如果一样，说明前后一致，没有进行任何操作，currentNodes 没有发生变化。
(2) 如果不一样，说明节点发生变化。此时就要找出需要添加到 currentNodes 中的新的节点或需要从 currentNodes 中删除的旧的节点。
-
遍历旧节点列表，找出当前旧节点在新节点列表中对应的相同 id 的节点，然后根据它们的版本 id 不同，进一步处理。如果版本 id 不同，把新版本的节点加入到 addList 中；再把原来的老版本的节点加入到 deleteList 中。
-
如果在遍历后，没有找到相同 id 的节点，说明这个节点已经被删除了，于是把当前旧节点放进 deleteList 中。
(3) 除了以上的情况，还有一种情况是：之前基于相同 id 来筛选，对于新的 id 的节点是选不出来的。例如，下图的 c、d 节点。
-
此时，遍历旧节点列表将旧节点id放进 oldNodeIdList 中，然后遍历新节点列表，找出不在 oldNodeIdList 中的节点，这些节点就是新增的节点，需要放进 addList 中。
三、算法
function differNodes (newNodes, oldNodes) {
const addList = [] // 待添加的节点
const deleteList = [] // 待删除的节点
const oldNodeIdList = [] // 上一次节点 id 列表
const isSame = JSON.stringify(oldNodes) === JSON.stringify(newNodes)
if (!isSame) {
oldNodes.forEach((oNode) => {
const sameIdNode = newNodes.find((nNode) => nNode.nodeId === oNode.nodeId) // 筛选出id相同的节点
if (sameIdNode) {
if (sameIdNode.versionId !== oNode.versionId) {
// 添加新节点
addList.push(sameIdNode)
// 删除老节点
deleteList.push(oNode)
}
} else {
// 没有在新的节点中找到和自己一样id的节点，说明自己被删了
deleteList.push(oNode)
}
})
// 新节点列表中未检测出的节点放进 addList
oldNodes.forEach(oNode => {
oldNodeIdList.push(oNode.nodeId)
})
newNodes.forEach((nNode) => {
if (!oldNodeIdList.includes(nNode.nodeId)) {
addList.push(nNode)
}
})
}
return {
addList,
deleteList
}
}
四、参考代码
const { log } = console;
let currentNodes = [
{nodeId: 'node_1', versionId: 'v1'},
{nodeId: 'node_2', versionId: 'v1'},
{nodeId: 'node_3', versionId: 'v1'}
];
log('更新前的currentNodes：', currentNodes);
const oldList = [
{nodeId: 'node_1', versionId: 'v1'},
{nodeId: 'node_2', versionId: 'v1'},
{nodeId: 'node_3', versionId: 'v1'}
]
const updatedList = [
{nodeId: 'node_4', versionId: 'v1'},
{nodeId: 'node_5', versionId: 'v1'},
{nodeId: 'node_6', versionId: 'v1'}
]
function differNodes (newNodes, oldNodes) {
const addList = []
const deleteList = []
const oldNodeIdList = []
const isSame = JSON.stringify(oldNodes) === JSON.stringify(newNodes)
if (!isSame) {
oldNodes.forEach((oNode) => {
const sameIdNode = newNodes.find((nNode) => nNode.nodeId === oNode.nodeId)
if (sameIdNode) {
if (sameIdNode.versionId !== oNode.versionId) {
addList.push(sameIdNode)
deleteList.push(oNode)
}
} else {
deleteList.push(oNode)
}
})
oldNodes.forEach(oNode => {
oldNodeIdList.push(oNode.nodeId)
})
newNodes.forEach((nNode) => {
if (!oldNodeIdList.includes(nNode.nodeId)) {
addList.push(nNode)
}
})
}
return {
addList,
deleteList
}
}
const dealState = differNodes(updatedList, oldList);
const needAddList = dealState.addList;
const needDelList = dealState.deleteList;
needDelList.forEach(item => {
const idx = currentNodes.findIndex(node => node.nodeId === item.nodeId);
currentNodes.splice(idx, 1);
})
currentNodes.push(...needAddList)
log('更新前的currentNodes：', currentNodes);
CodePen 地址：codepen.io/knightdocs/…
添加我的微信：enjoy_Mr_cat，共同成长，卷卷群里等你 🤪。
以上，感谢您的阅读～
