首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >获取两个数组之间的变化的算法

获取两个数组之间的变化的算法
EN

Stack Overflow用户
提问于 2010-08-13 12:17:18
回答 8查看 8.5K关注 0票数 17

我需要创建一个算法,它将(有效地)获取一个旧数组和一个新数组,并返回这两个数组之间的更改(添加了哪些项,删除了哪些项)。它碰巧需要在JavaScript中(才能在浏览器中运行),但算法比语言更重要。

这就是我想出来的:http://jsbin.com/osewu3/13。有没有人能看到这方面的问题/提出任何改进建议?

谢谢!

代码清单:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function diff(o, n) {
  // deal with empty lists
  if (o == undefined) o = [];
  if (n == undefined) n = [];

  // sort both arrays (or this won't work)
  o.sort(); n.sort();

  // don't compare if either list is empty
  if (o.length == 0 || n.length == 0) return {added: n, removed: o};

  // declare temporary variables
  var op = 0; var np = 0;
  var a = []; var r = [];

  // compare arrays and add to add or remove lists
  while (op < o.length && np < n.length) {
      if (o[op] < n[np]) {
          // push to diff?
          r.push(o[op]);
          op++;
      }
      else if (o[op] > n[np]) {
          // push to diff?
          a.push(n[np]);
          np++;
      }
      else {
          op++;np++;
      }
  }

  // add remaining items
  if( np < n.length )
    a = a.concat(n.slice(np, n.length));
  if( op < o.length )
    r = r.concat(o.slice(op, o.length));

  return {added: a, removed: r}; 
}

(我也发布了这篇文章,作为另一个SO问题的潜在解决方案,在这里:JavaScript array difference)

EN

回答 8

Stack Overflow用户

回答已采纳

发布于 2010-08-13 12:27:34

下面的页面有一个从一个数组中删除另一个数组的函数,可以用来给你两个值。Remove items from a JavaScript Array with RemoveArrayItems()

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var newItemsAdded=RemoveArrayItems(oldArray,newArray);
var ItemsRemoved =RemoveArrayItems(newArray,oldArray);
票数 0
EN

Stack Overflow用户

发布于 2010-08-13 12:25:28

没有undefined常量。您应该改为检查变量的类型:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
if (typeof o === 'undefined') o = [];

编辑:

正如Tim Down所展示的,该属性实际上是在标准中定义的,但由于标准没有将其定义为常量,因此它是不可靠的,不应该使用。

票数 3
EN

Stack Overflow用户

发布于 2010-08-13 16:04:34

我在两个可能的实现之间创建了一个速度测试。

源代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function diff1 (o, n) { 
  // deal with empty lists 
  if (o == undefined) o = []; 
  if (n == undefined) n = []; 

  // sort both arrays (or this won't work) 
  o.sort(); n.sort(); 

  // don't compare if either list is empty 
  if (o.length == 0 || n.length == 0) return {added: n, removed: o}; 

  // declare temporary variables 
  var op = 0; var np = 0; 
  var a = []; var r = []; 

  // compare arrays and add to add or remove lists 
  while (op < o.length && np < n.length) { 
      if (o[op] < n[np]) { 
          // push to diff? 
          r.push(o[op]); 
          op++; 
      } 
      else if (o[op] > n[np]) { 
          // push to diff? 
          a.push(n[np]); 
          np++; 
      } 
      else { 
          op++;np++; 
      } 
  } 

  // add remaining items 
  if( np < n.length ) 
    a = a.concat(n.slice(np, n.length)); 
  if( op < o.length ) 
    r = r.concat(o.slice(op, o.length)); 

  return {added: a, removed: r};  
}

function diff2 (o, n) {
        // convert array items to object members
    var objO = {}, objN = {};
    for (var i = 0; i < o.length; i++) {
        objO[o[i]] = 1;
    }
    for (var i = 0; i < n.length; i++) {
        objN[n[i]] = 1;
    }

    var a = []; var r = []; 

    for (var i in objO) {
        if (i in objN) {
            delete objN[i];
        }
        else {
            r.push (i);
        }
    }
    for (var i in objN) {
        a.push (i);
    }
    return {added: a, removed: r};
}

var o = [], n = [];
for (var i = 0; i < 300000; i++) {
    if (i % 2 == 0) {
        o.push (i);
    }
    if (i % 3 == 0) {
        n.push (i);
    }
}

var start = new Date ();
diff1 (o, n);
var end1 = new Date ();
diff2 (o, n);
var end2 = new Date ();

alert ((end1 - start) + ", " + (end2 - end1));

diff2的缺点是返回的数组(添加的、移除的)不排序。

速度测试:

IE7: diff1: 2578ms,diff2: 1906ms

IE8: diff1: 1953ms,diff2: 1152ms

火狐:diff1: 254ms,diff2: 527ms

歌剧:diff1: 143ms,diff2: 253ms

Safari:diff1: 466ms,diff2: 657ms

Chrome: diff1: 734ms,diff2: 581ms

结论: diff1在火狐、Opera和Safari上运行速度较快,diff2在IE和Chrome上运行速度较快。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3476672

复制
相关文章
Div Scroll Bar (用层模拟滚动条)
对Div的盒模型以及Css控制定位都不熟,所以遇到了不少BT问题……好在最终突破了种种困难,基本实现了自己想要的效果。 说明: 最大的突破是通过了 xhtml1-transitional.dtd 验证,可以在xhtml文档里正常使用. 采用相对定位,使用起来更灵活,可以放在页面任何地方而不用改程序. 结构规范,容易扩展. 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR
张善友
2018/01/19
1.4K0
div:给div加滚动条 div的滚动条设置
<div style=” overflow:scroll; width:400px; height:400px;”></div>
全栈程序员站长
2022/09/14
6.1K0
CSS深入理解学习笔记之overflow
1、Overflow基本属性   overflow:visible(默认)/hidden/scroll/auto/inherit;   visible:超出部分可见。   hidden:超出部分隐藏。   scroll:超出可滚动。   auto:若超出才出现滚动条。   inherit:继承。(IE8+)   注:overflow-x与overflow-y值不同,其中一个属性值被赋予visible,而另一个被赋值为hidden/scroll/auto,则visible会被重置为auto。 兼容性:   
就只是小茗
2018/03/07
4.2K0
CSS深入理解学习笔记之overflow
div垂直居中的几种方式_div垂直水平居中
利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法,每一种适用于不同的情况,在实际的使用过程中选择某一种方法即可。
全栈程序员站长
2022/08/03
4.1K0
div垂直居中的几种方式_div垂直水平居中
div在div中垂直居中水平居中(css如何让div水平居中)
最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法
全栈程序员站长
2022/08/01
15K0
div在div中垂直居中水平居中(css如何让div水平居中)
CSS第五天-定位
CSS第五天-定位 静态定位:static 定位的默认值,写边偏移也不会有效果 ---- 相对定位:relative 父元素搭配子绝父相使用 根据自身原来的位置,进行定位 没有脱标,在页面还占有位置 天生就是给绝对定位当爹用 ---- 绝对定位:absolute 根据最近带有定位(非静态)的祖先元素来定位 子绝父相 脱离标准流,在页面不占有位置 绝对定位,固定定位,浮动,可以直接设置宽度和高度,默认宽度是内容宽度 ---- 固定定位:fixed 永远根据浏览器可视区域定位,不会随着滚动条的滚动而滚动 可以
小城故事
2023/02/27
2.7K0
CSS第五天-定位
Day7:html和css
Day7:html和css 如果有浮动,会导致脱标,定位也能脱标,我们没有清除浮动,因为里面有子绝父相. 清除浮动的方法 额外标签法,在最后一个浮动元素后面添加一个空的标签代码: <div style="clear: both"></div> 使用after伪元素进行清除浮动. .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { *
达达前端
2019/07/03
1.9K0
Day7:html和css
CSS杂谈
本文没有什么高深的东西,就是写几个CSS样式经常遇见的东西,可能大部分都已经知道怎么解决了,当做小白文浏览就好。
wade
2020/04/23
8000
div滚动条
overflower:auto(内容溢出的时候出现滚动条;scroll会一直出现滚动条)
全栈程序员站长
2022/09/07
2.5K0
div垂直居中 css div盒子上下垂直居中
div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中。 div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div css让这个登录布局水平和css垂直居中。 这里介绍一种最简单兼容性最好的水平居中与上下垂直居中的方法。 第一种方法:具体实例代码如下
李维亮
2021/07/09
2.8K0
scroll居中元素的 scrollleft 的计算方法
如果需要将某个元素 在可以滚动元素(scroll)中设置为居中计算方法为: 需要的scrollleft + 普通居中时候的offsetLeft = 当前的scrollleft+当前元素的offsetLeft = 固定的当前元素在整个滚动条中距离左边的位置
李维亮
2021/07/08
9250
纯CSS实现拖拽--resize、scale、包裹性
今天看了一篇关于 CSS 的文章,文章用到的几个点,想和大家聊聊。 附「原文地址」大家可自己查阅。
奋飛
2021/12/30
3K0
纯CSS实现拖拽--resize、scale、包裹性
纯CSS实现拖拽--resize、scale、包裹性
今天看了一篇关于 CSS 的文章,文章用到的几个点,想和大家聊聊。 附「原文地址」大家可自己查阅。
奋飛
2021/09/06
3.4K0
纯CSS实现拖拽--resize、scale、包裹性
html5div居中属性,html怎样让div居中
内容 ”标签让div居中;2、在div中加入“margin:0 auto属性;”自动调节居中。
全栈程序员站长
2022/11/15
4.5K0
html5div居中属性,html怎样让div居中
CSS自定义滚动条的样式
本文会介绍CSS滚动条选择器,并在演示中展示如何在Webkit的内核浏览器和IE浏览器中,自定义一个横向以及一个纵向的滚动条。
前端林子
2018/11/24
6.6K3
CSS自定义滚动条的样式
css的div垂直居中的方法,百分比div垂直居中
我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些div如何垂直居中呢?这篇文章,我总结一下。
Dawnzhang
2019/02/27
2.7K0
css让div居中显示_css页面居中
给父级div设置相对定位,子元素div设置绝对定位,left、right、top、bottom都设置为0,然后将margin设置为auto即可实现。
全栈程序员站长
2022/11/17
9.5K0
css让div居中显示_css页面居中
CSS overflow 内容溢出时的显示方式
以前不知道 overflow 的滚动条样式是可以修改的,最近做的一个官网项目中前端提供的静态模板自定义了滚动条样式,才得知还有这么个东西,在此记录一下自定义滚动条的写法,这样可以更好的理解用法,虽然下次使用还要来这里看
很酷的站长
2022/12/16
2.3K0
CSS overflow 内容溢出时的显示方式
移动端导航简单实现
在移动端导航的功能太常见了,很多时候还需要可滑动,点击的时候还需要当前动画到中间。实现的方法很多,今天分享一个本人最近开发所用的方法。
wade
2020/04/24
7670
CSS vw让overflow:auto页面滚动条出现时不跳动
当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽度,然后margin: 0 auto的节奏~
山河木马
2019/03/05
4.4K1
CSS vw让overflow:auto页面滚动条出现时不跳动

相似问题

IE滚动条+ Overflow Scroll + div位于

21

Jquery - Check:如果可以滚动(div with overflow: scroll )

10

可变高度的div可以使用` `overflow: scroll`吗?

30

禁用Scroll on overflow-y: scroll div - Scroll Page

114

overflow y scroll on position fixed div显示双滚动条

367
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文