首页 > 代码库 > 更好的实现js数组连接,用到的知识apply.

更好的实现js数组连接,用到的知识apply.

最近做的万达的一个能源管理平台中用到了数据连接,当时想都没想直接写了一个a.concat(b)。今天在掘金看到了一个优化的方案。是这样:a.push.apply(a,b);其中a,b分别为两个数组。仔细一想才知道,原来concat方法会创建一个新的数组,并且循环a,b两个数组,然后返回这个新的数组。这样就不会改变a,b数组的值了。但是同样的创建一个新的数组同样会有些性能方面的问题,即使很小,很小。但是作为一个代码洁癖者,总想着要把他优化到自己的极限。

  然后,重点到了。我们来搞搞apply吧。这才是重中之重,授人以鱼不如授人以渔。只有学到了基础才能举一反三。学apply,主要参考的就是js的mdn了。自认为这个讲的不错的,有例子,有兼容性讲解,有参数说明。最主要的还是中文的,很方便,有没有?

  一般研究问题我喜欢从三个方面入手,what,why,how,那么开始吧!

  what:简洁的说改变当前方法的this对象并且传入一个数组参数,并且让这个方法执行。我们就拿上边的例子来说明一下吧。a.push.apply(a,b);这个语句说明的就是push方法执行之前,我们把push方法的this改变为a,并且传入了b这个参数。注意,b这个参数是一个数组。apply会把b中的值一个个取出来然后作为push方法的参数。因此相当于

数组a一个个push数组b中的每一项。因此最后的a数组的值就是 合并后的值了。这样会改变数组a的值。如果有需求的话可以在执行这个之前把数组a用另外的变量存起来。

  why:用处多多,不一一说明了,仅仅把mdn上简单的列举一个,以下代码的功能是求出数组中的最大最小值。

/* min/max number in an array */
var numbers = [5, 6, 2, 3, 7];

/* using Math.min/Math.max apply */
var max = Math.max.apply(null, numbers); /* This about equal to Math.max(numbers[0], ...) or Math.max(5, 6, ..) */
var min = Math.min.apply(null, numbers);

/* vs. simple loop based algorithm */
max = -Infinity, min = +Infinity;

for (var i = 0; i < numbers.length; i++) {
  if (numbers[i] > max)
    max = numbers[i];
  if (numbers[i] < min) 
    min = numbers[i];
}
讲了这么多:how?应该可以简单使用了吧!最后再啰嗦一句吧,call和apply的用法基本一样,唯一的不同之处就是call中参数不是数组了,而是一个个参数,相当于把数组一项项分开列出来而已。

更好的实现js数组连接,用到的知识apply.