使用不同的方法结合/合并两个JS数组

2014-08-28  来源:本站原创  分类:javascript技巧  人气:4 

这是一篇关于JavaScript数组使用的一些技巧,我们将使用不同的方法结合/合并两个JS数组,以及讨论每个方法的优点/缺点

这是一篇简单的文章,关于JavaScript数组使用的一些技巧。我们将使用不同的方法结合/合并两个JS数组,以及讨论每个方法的优点/缺点。

让我们先考虑下面这情况:

var a = [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ];

var b = [ "foo", "bar", "baz", "bam", "bun", "fun" ];

很显然最简单的结合结果应该是:

复制代码 代码如下:

[

1, 2, 3, 4, 5, 6, 7, 8, 9,

"foo", "bar", "baz", "bam" "bun", "fun"

]

concat(..)

这是最常见的做法:

复制代码 代码如下:

var c = a.concat( b );

a; // [1,2,3,4,5,6,7,8,9]

b; // ["foo","bar","baz","bam","bun","fun"]

c; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

正如你所看到的,C是一个全新的数组,表示a和b两个数组的组合,并让A和B不变。简单吧?

但如果a有10,000个元素,而b也有一万个元素? C就会有2万个元素,所以a和b的内内存使用就会翻倍。

“没问题!”,你说。让它们被垃圾回收,把A和B设置为null,问题解决了!

a = b = null; // 'a'和'b'就被回收了

呵呵。对于只有几个元素的小数组,这没啥问题。但对于大数组,或者在内存有限的系统中需要经常重复这个过程,它其实还有很多改进的地方。
循环插入

好吧,让我们将一个数组的内容复制到另一个,使用: Array#push(..)

复制代码 代码如下:

// `b` onto `a`

for (var i=0; i < b.length; i++) {

a.push( b[i] );

}

a; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

b = null;

现在,数组a有了数组b的内容。

似乎有更好的内存占用。

但如果a数组比较小?出于内存和速度的原因,你可能要把更小的a放到b的前面,。没问题,只需将push(..)换成unshift(..)即可:

复制代码 代码如下:

// `a` into `b`:

for (var i=a.length-1; i >= 0; i--) {

b.unshift( a[i] );

}

b; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

功能技巧

不过for循环确实比较丑,而且不好维护。我们可以做的更好吗?

这是我们的第一次尝试,使用Array#reduce:

复制代码 代码如下:

// `b` onto `a`:

a = b.reduce( function(coll,item){

coll.push( item );

return coll;

}, a );

a; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

// or `a` into `b`:

b = a.reduceRight( function(coll,item){

coll.unshift( item );

return coll;

}, b );

b; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

Array#reduce(..) 和 Array#reduceRight(..)是不错的,但他们是一点点笨拙。 ES6=>的箭头函数将减少一些代码量,但它仍然需要一个函数,每个元素都需要调用一次,不是很完美。

那这个怎么样:

复制代码 代码如下:

// `b` onto `a`:

a.push.apply( a, b );

a; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

// or `a` into `b`:

b.unshift.apply( b, a );

b; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

这是一个要好很多吧?特别是因为 unshift(..)方法在这里并不需要担心前面的反向排序。 ES6的spead操作会更漂亮: a.push( ...b ) 或 b.unshift( ...a

数组最大长度限制

第一个主要的问题是,内存使用量增长了一倍(当然只是暂时的!)被追加内容基本上是通过函数调用将元素复制到堆栈中。此外,不同的JS引擎都有拷贝数据长度的限制。

所以,如果数组有一百万个元素,你肯定会超出了push(...)或unshift(...)允许调用堆栈的限制。唉,处理几千个元素它会做得很好,但你必须要小心,不能超过合理的长度限值。

注意: 你可以尝试一下splice(...),它跟push(...)和unshift(...)一样都有这种问题。

有一种方法可以避免这种最大长度限制。

复制代码 代码如下:

function combineInto(a,b) {

var len = a.length;

for (var i=0; i < len; i=i+5000) {

b.unshift.apply( b, a.slice( i, i+5000 ) );

}

}

等一下,我们的可读性倒退了。 就这样吧,可能会越改越差,呵。

相关文章
  • 使用不同的方法结合/合并两个JS数组 2014-08-28

    这是一篇关于JavaScript数组使用的一些技巧,我们将使用不同的方法结合/合并两个JS数组,以及讨论每个方法的优点/缺点 这是一篇简单的文章,关于JavaScript数组使用的一些技巧.我们将使用不同的方法结合/合并两个JS数组,以及讨论每个方法的优点/缺点. 让我们先考虑下面这情况: var a = [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]; var b = [ "foo", "bar", "baz", "bam

  • PHP中对于浮点型的数据需要用不同的方法解决 2014-04-16

    这篇文章主要介绍了PHP中对于浮点型的数据需要用不同的方法解决.需要的朋友可以过来参考下,希望对大家有所帮助 Php: BCMath bc是Binary Calculator的缩写.bc*函数的参数都是操作数加上一个可选的 [int scale],比如string bcadd(string $left_operand, string $right_operand[, int $scale]),如果scale没有提供,就用bcscale的缺省值.这里大数直接用一个由0-9组成的string表示,计

  • Windows下使用apache模块实现合并多个js.css提高网页加载速度 2013-11-14

    这篇文章主要介绍了Windows下使用apache模块实现合并多个js.css提高网页加载速度,本文使用的模块是基于mod_concat自己修改的,需要的朋友可以参考下 现在的网站表现力越来越丰富,页面加载的js和css自然也越来越多.当网站页面上的js和css太多,浏览器打开页面的速度就会很慢,明显降低了用户的体验.使用mod_concatx, 可以合并多个文件在一个http响应报文中,可以有效提高js/css的加载速度. 示例效果如下: mod_concatx模块是在mod_concat基础

  • 合并两个DataSet的数据内容的方法 2013-12-25

    合并两个DataSet的数据内容的方法,需要的朋友可以参考一下 Default.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E

  • java实现合并两个已经排序的列表实例代码 2014-01-01

    这篇文章主要介绍了java实现合并两个已经排序的列表实例代码,有需要的朋友可以参考一下 相对于C++来说,Java的最大特点之一就是没有令人困惑的指针,但是我们不可否认,在某些特定的情境下,指针确实算的上一把利刃.虽然Java中没有明确定义出指针,但是由于类的思想,我们可以使用class来实现指针的操作.小二,上栗子-----合并两个已经排序的列表,输出合并后列表的头结点,且合并后的列表中的元素是有序的. 需要时刻铭记于心的:在Java中,列表的一个节点其实就是某个类实例化的一个对象. 示例代码

  • c语言合并两个已排序数组的示例(c语言数组排序) 2014-01-27

    如何将两个已排序数组合并成一个排序数组,下面我们给出使用c语言合并两个已排序数组的示例,需要的朋友可以参考下 问题:将两个已排序数组合并成一个排序数组 这里先不考虑大数据量的情况(在数据量很大时不知大家有什么好的思路或方法?),只做简单数组的处理. 简单代码如下: 说明:之所以把merge函数定义成返回数组长度,是因为后续会有重复数据合并功能的merge版本,考虑到接口一致性. #include <stdio.h> #include <stdlib.h> #include <

  • mysql中合并两个字段的方法分享 2014-02-17

    mysql中怎么合并两个字段为一个字段呢?试了好多方法,结果还是不是我想要的 例如:select (a+b) as c from 表 类型也一致都是varchar型的,可就是显示不正确. 直到concat() MySQL中concat函数 下面通过一个例子介绍MySQL中的concat函数的使用方法,比如select concat('11','22','33'). MySQL中concat函数 使用方法: CONCAT(str1,str2,-) 返回结果为连接参数产生的字符串.如有任何一个参数为

  • python中合并两个文本文件并按照姓名首字母排序的例子 2014-03-23

    这篇文章主要介绍了python中合并两个文本文件并按照姓名首字母排序的例子,需要的朋友可以参考下 前段时间前在网上看到一段面试题,要求如下: employee文件中记录了工号和姓名 cat employee.txt: 100 Jason Smith 200 John Doe 300 Sanjay Gupta 400 Ashok Sharma bonus文件中记录工号和工资 复制代码 代码如下: cat bonus.txt: 100 $5,000 200 $500 300 $3,000 400 $

  • asp.ent下合并两个结构相同的DataTable 2014-08-09

    今天遇到了一个情况,就是从一张数据表中读取几个符合条件1的客户的信息,然后再读取几个符合条件2的客户的信息,最后显示出来.因为前后两次数据的客户信息的结构是完全相同的,所以干脆合并成一个DataTable再赋值给GridView好了. 写了个函数. /// <summary> /// 合并两个相同的DataTable,返回合并后的结果 /// </summary> /// <param name="dt1"></param> /// &l

  • c# dataTable 合并两个列到一个新列中的简单实例 2014-09-09

    这篇文章介绍了c# dataTable 合并两个列到一个新列中的简单实例,有需要的朋友可以参考一下 public static DataTable UniteDataTableColumns(DataTable dt, String newColumnName, string ColumnName1, string ColumnName2) { //汇总的表达式 string expression = ""; expression = String.Format("{0}+'

  • PHP根据传入参数合并多个JS和CSS文件的简单实现 2014-11-23

    这篇文章主要介绍了PHP合并多个JS和CSS文件的简单实现,本文使用了一种比较简单的方法,重在揭示实现原理,需要的朋友可以参考下 HTML(使用方法): <link rel="stylesheet" type="text/css" href="cssmin.php?get=base,style1,style2,global&path=css/&v=20131023" /> <script type="t

  • python使用append合并两个数组的方法 2014-12-18

    这篇文章主要介绍了python使用append合并两个数组的方法,涉及Python中append方法的使用技巧,需要的朋友可以参考下 本文实例讲述了python使用append合并两个数组的方法.分享给大家供大家参考.具体如下: lista = [1,2,3] listb = [4,5,6] mergedlist =[] for elem in lista: mergedlist.append(elem) for elem in listb: mergedlist.append(elem) 希望

  • php通过array_merge()函数合并两个数组的方法 2015-02-17

    这篇文章主要介绍了php通过array_merge()函数合并两个数组的方法,实例分析了php中array_merge()函数合并数组的使用技巧,需要的朋友可以参考下 本文实例讲述了php通过array_merge()函数合并两个数组的方法.分享给大家供大家参考.具体分析如下: php通过array_merge()函数合并两个数组,array_merge()是一个php函数,用于将两个或者多个数组合并,后一个数组会追加到前一个数组后面,并返回结果数组.它接受两个或两个以上的数组,并返回一个包含了

  • 利用Google Closure Compiler和ant合并及压缩js文件 2014-04-12

    最近开始做些微信上的html5小项目,其中写了几个js文件,发布的时候为了加快网络载入速度及一定程度上防止别人查看源代码的原因,用到了js压缩. 下面讲讲如何用Google Closure Compiler和ant合并和压缩js文件: 1.Google Closure Compiler依赖于java,如果你的机子还没有安装java运行时,请下载及安装. 2.下载Google Closure Compiler:http://code.google.com/p/closure-compiler/.

  • 两个有序数组中的数据,合并到新的有序数组 2014-05-26

    面试时遇到的题,答的不太好.回来写了写,很简单,为什么当时没有写好呢? /* * Jason Li 2014-5 * 两个有序数组中的数组,合并到新的有序数组 */ public class OrderedArrayCombination { public static void main(String[] args) { int[] arrayA = { 1, 3, 5, 7, 9 }; int[] arrayB = { 2, 4, 6, 8, 10 }; int[] arrayC = new

  • 合并两个 Wav 文件流的函数 - 回复 "刘文强" 的问题 2014-09-26

    问题来源: http://www.cnblogs.com/del/archive/2008/10/25/1069523.html#1351197 unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, Dialogs, StdCtrls; type TForm1 = class(TForm) Button1: TButton; Button2: TB

  • js 数组操作代码集锦 2013-11-30

    用js有很久了,但都没有深究过js的数组形式.偶尔用用也就是简单的string.split(char). 用 js有很久了,但都没有深究过js的数组形式.偶尔用用也就是简单的string.split(char).这段时间做的一个项目,用到数组的地方很多,自以为js高手的自己居然无从下手,一下狠心,我学!呵呵.学了之后才知道,js数组的功能强大很,远比VB,C#强多了,大家慢慢看吧 1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj

  • js数组的基本操作(很全自己整理的) 2013-12-15

    这段时间做的一个项目,用到数组的地方很多,学了才知道js数组的功能强大很,远比VB,C#强多了 用 js有很久了,但都没有深究过js的数组形式.偶尔用用也就是简单的string.split(char).这段时间做的一个项目,用到数组的地方很多,自以为js高手的自己居然无从下手,一下狠心,我学!呵呵.学了之后才知道,js数组的功能强大很,远比VB,C#强多了,大家慢慢看吧 1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new

  • js 数组操作之pop,push,unshift,splice,shift 2014-09-30

    本篇文章主要介绍了js数组操作之pop,push,unshift,splice,shift.需要的朋友可以过来参考下,希望对大家有所帮助 <script> Array.prototype.pop=function(){ if(this.length!=0)this.length--; return this; } pop 方法 移除数组中的最后一个元素并返回该元素. arrayObj.pop( ) 必选的 arrayObj 引用是一个 Array 对象. 说明 如果该数组为空,那么将返回 un

  • js数组的操作 和 数组对象的3个属性 2015-04-02

    一.js数组的操作 ‍1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度 var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); //创建一个数组并赋值 要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,