详解 diff 算法中的 list-diff【字符串的最小编辑距离问题】

已于 2022-03-25 15:28:20 修改
阅读量512 收藏 1
点赞数
分类专栏： React 文章标签： diff
于 2022-03-25 15:03:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AnitaSun/article/details/123730000
版权

内容

list-diff 源码
代码是大佬 livoras 所写，本文对此代码进行详细解释

列表对比算法

问题
  • 如果列表中元素的顺序为 1 2 3 4，现在要把列表中元素的顺序移动为 2 1 3 4，应该怎样做呢？
  • 相信你肯定想到了，应该把 1 和 2 交换位置；咱们现在把交换位置这个操作，可以看成删除第0个位置的元素，和在第1个位置添加元素1的结合。
  • 所以列表中元素的操作就只有增加和删除。
贪心算法

  • 问题：如果列表中元素的顺序为 1 2 3 4，现在要把列表中元素的顺序移动为 4 2 3 1，应该怎样做呢？

  • 这时，我们可以利用贪心算法的思路来进行思考【也就是要尽可能少的进行移动，让新列表和旧列表同一位置的元素相同。根据这个想法，如果想让新列表和旧列表同一位置的元素相同，可以删除旧列表这个位置的元素，再添加正确的元素。上面这个过程需要两步，也就是说，一个位置的元素操作最多两步，使用贪心算法，操作必须为零步或一步】

  • 零步：那就是新旧列表中同一位置元素相同，不需要进行任何操作。

  • 一步：操作可以为增加或删除。这两种操作应该如何选择呢？

    再次回到贪心算法的目的，让新旧列表中同一位置的元素相同，如果在这个位置增加和新列表相同的元素，当然可以使得元素相同。那么什么时候选择删除呢？如果要选择删除，说明了，删除之后，相同位置的元素变得相同。

    例如：
    1 2 3 4 要变成 2 1 3 4
    首先遍历到第一个元素，发现不相同，可以增加2；检查1后面的那个元素2，发现和当前的元素相同，选择删除
    删除之后变为 2 3 4
    继续遍历下一个元素 3，发现和 1 不相同，可以增加1；检查 3 后面的元素是 4，发现和当前元素不相同，所以增加 1
    增加之后变为 2 1 3 4
    继续往后遍历，发现都相同

  • 所以目前咱们的遍历算法就设计好了

注意
  • 上面算法可以提高效率的前提是新旧列表中至少有一部分是相同的，只是位置不同
  • 比如 1 2 3 4 和 3 4 2 1，3 4 这部分是相同的，所以可以利用上述算法来提高效率
  • 如果是 1 2 3 4 和 4 3 2 1 完全没有相同的部分，只能在每一个位置增加新元素，然后删掉多余的部分
    // 例如：
1 2 3 4
4 3 2 1 1 2 3 4
4 3 2 1 		// 删除后面的

key 的作用

key 存在（新旧列表全部都设置 key）
  • 如果有 key 的话，可以很容易定位旧列表的元素在新列表中存不存在，不需要每次都遍历新列表
  • 如果旧列表中的元素在新列表中不存在，那么就将旧列表中的这个元素删除
  • 至此，旧列表中的元素都存在于新列表中，但是新列表中的元素不一定都在旧列表中
  • 问题变成了使用上面的列表对比算法来使新旧列表元素相同。
key 不存在（新旧列表全部都没有设置 key）
  • 因为不知道新旧列表中是否有某些部分是相同的，所以不能使用上述算法提高效率。直接返回 {}。
新旧列表中一部分设置了 key，另一部分没有设置 key
  • 对设置了 key 的使用算法。
  • 没有设置 key 的，直接在旧列表这个位置增加这个元素

代码

删除旧列表多余的元素
根据元素 key 来判断是否需要删除
  • 遍历旧集合，根据 key 判断这个元素是否在新集合中存在。如果不存在，将 children 加入null，说明将来是要删除的。如果存在，将这个元素直接加入 children
删除在旧列表中属性不为key且这个位置不需要的元素
  • 如果新列表中没有添加 key 的元素个数要小于旧列表中没有添加 key 的元素个数，那么要将旧列表中一部分位置删除，直到和新列表中没有添加 key 的元素个数相同。
代码
// oldList = [{id: "a"}, {id: "b"}, {id: "c"}, {id: "d"}, {id: "e"}]
// newList = [{id: "c"}, {id: "a"}, {id: "b"}, {id: "e"}, {id: "f"}]
// key = 'id'
function diff (oldList, newList, key) {
  var oldMap = makeKeyIndexAndFree(oldList, key)
  var newMap = makeKeyIndexAndFree(newList, key)

  var newFree = newMap.free

  var oldKeyIndex = oldMap.keyIndex
  var newKeyIndex = newMap.keyIndex

  var moves = []

  var children = []
  var i = 0
  var item
  var itemKey
  var freeIndex = 0

  // oldList = [{id: "a"}, {id: "b"}, {id: "c"}, {id: "d"}, {id: "e"}]
  while (i < oldList.length) {
    // item {id: "a"}
    item = oldList[i]
    // itemKey a
    itemKey = getItemKey(item, key)  
    
    if (itemKey) {
      // newList = [{id: "c"}, {id: "a"}, {id: "b"}, {id: "e"}, {id: "f"}]
      // newKeyIndex: [c:0, a:1, b:2, e: 3, f: 4]
      if (!newKeyIndex.hasOwnProperty(itemKey)) {
        children.push(null)
      } else {
        var newItemIndex = newKeyIndex[itemKey]
        children.push(newList[newItemIndex])
      }
    } else {
      // 删除在旧列表中属性不为key且这个位置不需要的元素
      var freeItem = newFree[freeIndex++]
      children.push(freeItem || null)
    }
    i++
  }

  // 执行删除操作
  // oldList = [{id: "a"}, {id: "b"}, {id: "c"}, {id: "d"}, {id: "e"}]
  // newList = [{id: "c"}, {id: "a"}, {id: "b"}, {id: "e"}, {id: "f"}]
  // children [{id:"a"},{id:"b"},{id:"c"},null,{id:"e"}]
  var simulateList = children.slice(0)

  i = 0
  while (i < simulateList.length) {
    if (simulateList[i] === null) {
      remove(i)               // 加入操作数组
      removeSimulate(i)       // 从 simulateList 中移除
    } else {
      i++
    }
  }

  // 操作函数
  function remove (index) {
    var move = {index: index, type: 0}
    moves.push(move)
  }

  function insert (index, item) {
    var move = {index: index, item: item, type: 1}
    moves.push(move)
  }

  function removeSimulate (index) {
    simulateList.splice(index, 1)
  }
}

/**
 * Convert list to key-item keyIndex object.
 * 将列表转换为 key-item 的键值对象
 * [{id: "a"}, {id: "b"}, {id: "c"}, {id: "d"}, {id: "e"}] -> [a:0,b:1,c:2...]
 * @param {Array} list
 * @param {String|Function} key
 */
function makeKeyIndexAndFree (list, key) {
  var keyIndex = {}
  var free = []
  for (var i = 0, len = list.length; i < len; i++) {
    var item = list[i]
    var itemKey = getItemKey(item, key)
    if (itemKey) {
      keyIndex[itemKey] = i
    } else {
      free.push(item)
    }
  }
  return {
    keyIndex: keyIndex,
    free: free
  }
}

// 获取置顶key的value
function getItemKey (item, key) {
  if (!item || !key) return void 666
  return typeof key === 'string'
    ? item[key]
    : key(item)       // 如果传来的 key 是一个函数，例如function(item){ return item }
}
使用列表对比算法对新旧列表进行操作
  // 遍历 newList 和 simulateList     
  // oldList = [{id: "a"}, {id: "b"}, {id: "c"}, {id: "d"}, {id: "e"}]
  // newList = [{id: "c"}, {id: "a"}, {id: "b"}, {id: "e"}, {id: "f"}]            i
  // simulateList [{id:"a"},{id:"b"},{id:"c"},{id:"e"}]                           j        
  var j = i = 0
  while (i < newList.length) {
    item = newList[i]
    itemKey = getItemKey(item, key)                       // c

    var simulateItem = simulateList[j]                    // {id:"a"}
    var simulateItemKey = getItemKey(simulateItem, key)   // a

    // newList 不为空或者 oldList 不为空
    if (simulateItem) {
      // 新旧集合中 key-value 相等，而且位置相同 ———————— 列表对比算法相同的那一种情况
      // 或者是  
      // undefined === undefined 说明新旧集合中都没有设置 key，不做任何操作
      if (itemKey === simulateItemKey) {
        j++
      } else {
        // 旧集合中没有设置 key
        // 列表对比算法是针对设置了 key 的算法，没有设置就直接插入
        if (!oldKeyIndex.hasOwnProperty(itemKey)) {
          insert(i, item)
        } else {
          // 列表对比算法不相同的那一种情况【列表对比算法是针对设置了 key 的算法】
          // 获取下一个位置的元素
          var nextItemKey = getItemKey(simulateList[j + 1], key)
          // 如果设置了 key 且和当前元素【itemKey】相同，删除这个位置的元素
          if (nextItemKey === itemKey) {
            remove(i)
            removeSimulate(j)
            j++ 
          } else {
            // 增加
            insert(i, item)
          }
        }
      }
    } else {
      // 这个语句可以执行的条件是：oldList为空，而newList不为空
      insert(i, item)   
    }
    i++
  }

  // 移除掉多余的元素
  var k = simulateList.length - j
  while (j++ < simulateList.length) {
    k--
    remove(k + i)
  }

完整代码


// oldList = [{id: "a"}, {id: "b"}, {id: "c"}, {id: "d"}, {id: "e"}]
// newList = [{id: "c"}, {id: "a"}, {id: "b"}, {id: "e"}, {id: "f"}]
function diff (oldList, newList, key) {
  // oldMap: [a:0,b:1,c:2...]
  var oldMap = makeKeyIndexAndFree(oldList, key)
  var newMap = makeKeyIndexAndFree(newList, key)

  var newFree = newMap.free

  var oldKeyIndex = oldMap.keyIndex
  var newKeyIndex = newMap.keyIndex

  var moves = []

  // a simulate list to manipulate
  var children = []
  var i = 0
  var item
  var itemKey
  var freeIndex = 0

  // oldList = [{id: "a"}, {id: "b"}, {id: "c"}, {id: "d"}, {id: "e"}]
  while (i < oldList.length) {
    // item {id: "a"}
    item = oldList[i]
    // itemKey a
    itemKey = getItemKey(item, key)  
    
    if (itemKey) {
      // newList = [{id: "c"}, {id: "a"}, {id: "b"}, {id: "e"}, {id: "f"}]
      // newKeyIndex: [c:0, a:1, b:2, e: 3, f: 4]
      if (!newKeyIndex.hasOwnProperty(itemKey)) {
        children.push(null)
      } else {
        var newItemIndex = newKeyIndex[itemKey]
        children.push(newList[newItemIndex])
      }
    } else {
      // 删除在旧列表中属性不为key且这个位置不需要的元素
      var freeItem = newFree[freeIndex++]
      children.push(freeItem || null)
    }
    i++
  }

  // 执行删除操作
  // oldList = [{id: "a"}, {id: "b"}, {id: "c"}, {id: "d"}, {id: "e"}]
  // newList = [{id: "c"}, {id: "a"}, {id: "b"}, {id: "e"}, {id: "f"}]
  // children [{id:"a"},{id:"b"},{id:"c"},null,{id:"e"}]
  var simulateList = children.slice(0)

  i = 0
  while (i < simulateList.length) {
    if (simulateList[i] === null) {
      remove(i)               // 加入操作数组
      removeSimulate(i)       // 从 simulateList 中移除
    } else {
      i++
    }
  }

 
  // 遍历 newList 和 simulateList     
  // oldList = [{id: "a"}, {id: "b"}, {id: "c"}, {id: "d"}, {id: "e"}]
  // newList = [{id: "c"}, {id: "a"}, {id: "b"}, {id: "e"}, {id: "f"}]            i
  // simulateList [{id:"a"},{id:"b"},{id:"c"},{id:"e"}]                           j        
  var j = i = 0
  while (i < newList.length) {
    item = newList[i]
    itemKey = getItemKey(item, key)                       // c

    var simulateItem = simulateList[j]                    // {id:"a"}
    var simulateItemKey = getItemKey(simulateItem, key)   // a

    // newList 不为空或者 oldList 不为空
    if (simulateItem) {
      // 新旧集合中 key-value 相等，而且位置相同 ———————— 列表对比算法相同的那一种情况
      // 或者是  
      // undefined === undefined 说明新旧集合中都没有设置 key，不做任何操作
      if (itemKey === simulateItemKey) {
        j++
      } else {
        // 旧集合中没有设置 key
        // 列表对比算法是针对设置了 key 的算法，没有设置就直接插入
        if (!oldKeyIndex.hasOwnProperty(itemKey)) {
          insert(i, item)
        } else {
          // 列表对比算法不相同的那一种情况【列表对比算法是针对设置了 key 的算法】
          // 获取下一个位置的元素
          var nextItemKey = getItemKey(simulateList[j + 1], key)
          // 如果设置了 key 且和当前元素【itemKey】相同，删除这个位置的元素
          if (nextItemKey === itemKey) {
            remove(i)
            removeSimulate(j)
            j++ 
          } else {
            // 增加
            insert(i, item)
          }
        }
      }
    } else {
      // 这个语句可以执行的条件是：oldList为空，而newList不为空
      insert(i, item)   
    }
    i++
  }

  // 移除掉多余的元素
  var k = simulateList.length - j
  while (j++ < simulateList.length) {
    k--
    remove(k + i)
  }


  function remove (index) {
    var move = {index: index, type: 0}
    moves.push(move)
  }

  function insert (index, item) {
    var move = {index: index, item: item, type: 1}
    moves.push(move)
  }

  function removeSimulate (index) {
    simulateList.splice(index, 1)
  }

  return {
    moves: moves,
    children: children
  }
}

/**
 * Convert list to key-item keyIndex object.
 * 将列表转换为 key-item 的键值对象
 * [{id: "a"}, {id: "b"}, {id: "c"}, {id: "d"}, {id: "e"}] -> [a:0,b:1,c:2...]
 * @param {Array} list
 * @param {String|Function} key
 */
function makeKeyIndexAndFree (list, key) {
  var keyIndex = {}
  var free = []
  for (var i = 0, len = list.length; i < len; i++) {
    var item = list[i]
    var itemKey = getItemKey(item, key)
    if (itemKey) {
      keyIndex[itemKey] = i
    } else {
      free.push(item)
    }
  }
  return {
    keyIndex: keyIndex,
    free: free
  }
}

// 获取置顶key的value
function getItemKey (item, key) {
  if (!item || !key) return void 666
  return typeof key === 'string'
    ? item[key]
    : key(item)       // 如果传来的 key 是一个函数，例如function(item){ return item }
}


exports.makeKeyIndexAndFree = makeKeyIndexAndFree // exports for test
exports.diff = diff
Anita-Sun
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
差分工具difflist.exe
02-13
差分工具difflist.exe
List 的 Diff 功能
pdw_jsp的专栏
03-21 531
可以自行扩展ListCompareData的比较项，这里是使用了id 和 一个整形比较。
推荐开源项目：ListDiff - 数据同步的高效工具
最新发布
gitblog_00027的博客
06-26 328
推荐开源项目：ListDiff - 数据同步的高效工具 项目地址:https://gitcode.com/praeclarum/ListDiff 在这个数据驱动的时代，高效地处理列表差异并实时更新界面成为了开发者们常常面临的挑战。正是为了应对这一需求，我们向您推荐一个强大的C#库——ListDiff，它提供了一种优雅的方式来计算任意两个列表之间的差异，并能轻松合并它们，帮助您的应用实现数据同步。 ...
面试过程中一些动态规划类的算法题（持续更新）
lotus
03-30 1625
动态规划思想是用空间换时间，核心是找到动态方程。 1.在面试字节跳动的时候问到“最小编辑距离问题” 下边是最小编辑距离思路及python代码 最小编辑距离或莱文斯坦距离（Levenshtein），指由字符串A转化为字符串B的最小编辑次数。允许的编辑操作有：删除，插入，替换。具体内容可参见：维基百科—莱文斯坦距离。 一般代码实现的方式都是通过动态规划算法，找出从A转化为B的每一步的最小步骤。 ...
diff.js 列表对比算法 源码分析
weixin_33955681的博客
09-11 305
diff.js列表对比算法 源码分析 npm上的代码可以查看 （https://www.npmjs.com/package/list-diff2) 源码如下： 1 /** 2 * 3 * @param {Array} oldList 原始列表 4 * @param {Array} newList 新列表 5 * @param {Strin...
利用最小编辑距离算法实现文本diff
weixin_30920091的博客
03-29 187
最近在公司一直在做diff的事情，对于文本的diff。因为一开始维基百科实现文字的diff做得比较不错，所以就调研了下mediawiki的diff实现，但发现mediawiki默认只能diff到行的级别，如果要diff到汉字的级别，是需要更改代码的。所以我就改了该mediawiki的代码，发现可以得到相应的效果。 但待我继续追踪代码发现，其实mediawiki的diff实现并不是...
详解vue的diff算法原理
08-27
Vue的diff算法原理详解 在本文中，我们将详细介绍 Vue 的 diff 算法原理，diff 算法是 Vue 框架中的一种关键技术，用于高效地更新虚拟 DOM 和真实 DOM。本文将从以下几个方面来介绍 diff 算法的原理： 1. 何时更新...
C#字符串自增自减算法详解
12-31
C#实现字符串自增和自减运算，供大家参考，具体内容如下 1.数字从 0-9 变化； 2.字母从 A-Z、a-z 变化； 3.其它字符跳过； 4.以上变化依据其Ascii码值； /// /// 字符串运算 /// public class StringOperation...
详解为什么Vue中不要用index作为key(diff算法)
11-20
Vue 中的 key 是用来做什么的？为什么不推荐使用 index 作为 key？常常听说这样的问题，本篇文章带你从原理来一探究竟。 另外本文的结论对于性能的毁灭是针对列表子元素顺序会交换、或者子元素被删除的特殊情况，...
字符串的模式匹配详解--BF算法与KMP算法
09-04
字符串的模式匹配是一种重要的计算机科学领域中的算法，用于在给定的文本字符串中查找是否存在一个特定的模式字符串。本文主要探讨两种经典的模式匹配算法：BF（Brute Force，暴力匹配）算法和KMP（Knuth-Morris-...
Vue的diff算法详解和key作用(较详细)
01-20
Vue的diff算法详解和key作用 在前端开发中，Vue.js是一个非常流行的MVVM框架，它的核心特性之一是使用虚拟DOM（Virtual DOM）来优化页面更新。为了理解Vue的diff算法，首先需要了解DOM（Document Object Model）的...
python list diff_PythonList交集，并集，差集的应用
weixin_39598472的博客
02-09 257
生成了两个List:A = ['apple','apple','banana']B = ['banana','apple','banana']交集，并集，差集概念这里不说，python代码如下：#! /usr/bin/env python# coding:utf-8listA = [1, 2, 3, 4, 5, 6]listB = [4, 5, 6, 7]# Intersectioninte = ...
python list diff_python3从零学习-5.1.4、对比模块Difflib
weixin_39531834的博客
12-08 307
此模块提供用于比较序列的类和函数。 例如，它可以用于比较文件，并可以产生各种格式的不同信息，包括 HTML 和上下文以及统一格式的差异点。 有关目录和文件的比较，请参见 filecmp 模块。classdifflib.SequenceMatcher这是一个灵活的类，可用于比较任何类型的序列对，只要序列元素为 hashable 对象。 其基本算法要早于由 Ratcliff 和 Obershelp 于...
python list diff_Python List交集，并集，差集的应用
weixin_39787594的博客
12-08 1048
生成了两个List:A = ['apple','apple','banana']B = ['banana','apple','banana']交集，并集，差集概念这里不说，python代码如下：#! /usr/bin/env python# coding:utf-8listA = [1, 2, 3, 4, 5, 6]listB = [4, 5, 6, 7]# Intersectioninte = ...
python 对比list diff_13个Python代码技巧，你知道几个？
weixin_42524610的博客
01-27 356
今天分享13个Python代码技巧。来，数一数你知道几个。最后大家比一比！1，2，3，开始！1. 衡量代码执行时间。作为程序员，一定离不开两个字：性能。工作中经常要去解决性能的问题：为什么程序执行的这么慢？set的执行速度真的比list快吗？用time模块可以计算代码执行时间：import time startTime = time.time() # 要衡量的代码 for i in range...
virtual-dom内对children进行比较的list-diff的详解
weixin_34130389的博客
10-25 319
不清楚virtual-dom的可以查看此文章 list-diff的源代码 前言： 在vue或者react内，每一个VNode都有一个唯一key来标识，通常是框架自动处理，但是在循环内必须由开发者指定。所以以下解读我就是用这个key来代表list内的对象。 我们并不需要真的达到最小的操作，我们只需要优化一些比较常见的移动情况，牺牲一定DOM...
list之间的运算，交集，差集，并集
weixin_44056331的博客
03-28 1103
list_a=["a","b","c"] list_b=["a","d","e","b"] list_intersection=list(set(list_a).intersection(set(list_b))) list_union=list(set(list_a).union(set(list_b))) list_diff=list(set(list_a).difference(set(l...
python list diff,比较python中两个列表的最佳算法
weixin_34727107的博客
12-12 730
I have two lists (list1 and list2) in python filled with an own datatype.I want to compare these to lists and give all elements of these lists to stdout(or somewhere else), but in a specific order(wit...
LeetCode算法总结：数据结构与字符串常见题目详解
LeetCode解题总结涵盖了广泛的算法和数据结构题目，包括但不限于数组、单链表、字符串、栈、树和排序等多种核心数据结构与问题解决方法。以下是各部分的详细知识点： 1. **数组**： - **删除重复元素**：涉及到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值