小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能

我们再来聊聊Function.apply() 在提升程序性能方面的技巧。

我们先从 Math.max() 函数说起，  Math.max后面可以接任意个参数，最后返回所有参数中的最大值。

比如 
alert(Math.max(5,8))   //8
alert(Math.max(5,7,9,3,1,6))   //9

但是在很多情况下，我们需要找出数组中最大的元素。
var arr=[5,7,9,1]
alert(Math.max(arr))    //   这样却是不行的。一定要这样写

function getMax(arr){
    var arrLen=arr.length;
    for(var i=0,ret=arr[0];i<arrLen;i++){
        ret=Math.max(ret,arr[i]);       
    }
    return ret;
}
这样写麻烦而且低效。如果用 apply呢，看代码：
function getMax2(arr){
    return Math.max.apply(null,arr)
}
两段代码达到了同样的目的，但是getMax2却优雅，高效，简洁得多。

看性能测试:
getMax性能测试

<script>
var myArr=new Array()

function fillRnd(arrLen){  //填入 arrLen个1-10的随机数字到数组
    for(var i=0,arr=[];i<arrLen;i++){
        arr[i]=Math.ceil(Math.random()*10)
    }
    return arr
}

function getMax(arr){
    var arrLen=arr.length;
    for(var i=0,ret=arr[0];i<arrLen;i++){
        ret=Math.max(ret,arr[i]);       
    }
    return ret;
}

function getMax2(arr){
    return Math.max.apply(null,arr)
}

myArr=fillRnd(20*10000)  //生成20万个随机数填到数组

var t1=new Date()
var max1=getMax(myArr)
var t2=new Date()
var max2=getMax2(myArr)
var t3=new Date()

if (max1!==max2) alert("error")
alert([t3-t2,t2-t1])   //在我机器上 96,464 .不同的机器,结果可能有差异

</script>

通过20万个数据的比较， getMax2 时间为 96ms 而 getmax时间为464。 两者相差5倍

再比如数组的push方法。
var arr1=[1,3,4];
var arr2=[3,4,5];
如果我们要把 arr2展开，然后一个一个追加到 arr1中去，最后让  arr1=[1,3,4,3,4,5]
arr1.push(arr2)  显然是不行的。 因为这样做会得到  [1,3,4, [3,4,5] ]

我们只能用一个循环去一个一个的push   (当然也可以用 arr1.concat(arr2) 但是concat方法并不改变 arr1本身)
var arrLen=arr2.length
for(var i=0;i<arrLen;i++){
    arr1.push(arr2[i])
}

自从有了 Apply    ,事情就变得如此简单

Array.prototype.push.apply(arr1,arr2)

赞 (0)

相关推荐

  • angularJS中$apply()方法详解

    对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的阻力还真是不少.不过我相信,只要下功夫,即使是反人类的设计也不是什么大的问题. Okay,废话不多说.为了弄明白angular JS为何物,我先是从Scope开始.那么什么是Scope呢?借用官方文档的一段话: 复制代码 代码如下: "scope is an object that refers to the application model. It is an execution c

  • JS面向对象、prototype、call()、apply()

    一. 起因 那天用到prototype.js于是打开看看,才看几行就满头雾水,原因是对js的面向对象不是很熟悉,于是百度+google了一把,最后终于算小有收获,写此纪念一下^_^. prototype.js代码片段 复制代码 代码如下: var Class = { create: function() { return function() { this.initialize.apply(this , arguments); } } } // Class使用方法如下 var A = Class

  • 浅谈javascript的call()、apply()、bind()的用法

    JavaScript中的函数不仅是一种类似于Java中方法的语言功能,它还可以作为对象而存在. 本文将要探讨JavaScript中函数的一些特殊用法,包括call.apply.bind三个原型方法. 一.函数基础 JavaScript中的函数是一种类似于Java中方法的语言功能,不过它可以独立于类进行定义. 函数式编程:由于JavaScript支持匿名函数,因此可以将函数作为对象来使用, 所以JavaScript不仅支持过程式编程(面向对象也是过程式编程的一种),还支持函数式编程. 上下文 函数

  • 基于JavaScript实现继承机制之调用call()与apply()的方法详解

    call() 方法call() 方法是与经典的对象冒充方法最相似的方法.它的第一个参数用作 this 的对象.其他参数都直接传递给函数自身.例如: 复制代码 代码如下: function sayHello(sPrefix,sSuffix) {    alert(this.name + "says" + sPrefix + sSuffix);}; var obj = new Object();obj.name = "Tom"; sayHello.call(obj, &

  • Javascript中的apply()方法浅析

    之前我们说过 Javascript Call方法,这次我们就说说和Call方法类似的apply方法. apply vs call 两者间的不同在于:传递的是参数,还是参数数组 这个是call的用法 复制代码 代码如下: theFunction.call(valueForThis, arg1, arg2, ...) 而这个则是apply 复制代码 代码如下: theFunction.apply(valueForThis, arrayOfArgs) 故而 复制代码 代码如下: arrayOfArgs

  • JavaScript中的prototype.bind()方法介绍

    以前,你可能会直接设置self=this或者that=this等等,这样做当然也能起作用,但是使用Function.prototype.bind()会更好,看上去也更专业.下面举个简单的例子: 复制代码 代码如下: var myObj = {    specialFunction: function () {    },    anotherSpecialFunction: function () {    },    getAsyncData: function (cb) {        c

  • JavaScript中神奇的call()方法

    先看看关于call()的官方解释,"调用一个对象的一个方法,以另一个对象替换当前对象.",看了这样的解释,或许让你更摸不着头脑了.看例子: 复制代码 代码如下: var x = "我是全局变量"; //定义全局变量x function a(){ //定义函数类结构a     this.x = "我是在函数类结构a中声明的哦";    } //定义普通函数,弹出当前指针所包含的变量x的值 function f(){           alert

  • JavaScript中的apply()方法和call()方法使用介绍

    1.每个函数都包含两个非继承而来的方法:apply()和call(). 2.他们的用途相同,都是在特定的作用域中调用函数. 3.接收参数方面不同,apply()接收两个参数,一个是函数运行的作用域(this),另一个是参数数组.call()方法第一个参数与apply()方法相同,但传递给函数的参数必须列举出来. 例1: 复制代码 代码如下: window.firstName = "diz"; window.lastName = "song"; var myObjec

  • 使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧

    我们再来聊聊Function.apply() 在提升程序性能方面的技巧. 我们先从 Math.max() 函数说起, Math.max后面可以接任意个参数,最后返回所有参数中的最大值. 比如 alert(Math.max(5,8)) //8 alert(Math.max(5,7,9,3,1,6)) //9 但是在很多情况下,我们需要找出数组中最大的元素. var arr=[5,7,9,1] alert(Math.max(arr)) // 这样却是不行的.一定要这样写 function getMa

  • 小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能

    我们再来聊聊Function.apply() 在提升程序性能方面的技巧. 我们先从 Math.max() 函数说起,  Math.max后面可以接任意个参数,最后返回所有参数中的最大值. 比如  alert(Math.max(5,8))   //8alert(Math.max(5,7,9,3,1,6))   //9 但是在很多情况下,我们需要找出数组中最大的元素.var arr=[5,7,9,1]alert(Math.max(arr))    //   这样却是不行的.一定要这样写 functi

  • 小议Function.apply() 之一------(函数的劫持与对象的复制)

    关于对象的继承,一般的做法是用复制法: Object.extend 见protpotype.js 的实现方法: 复制代码 代码如下: Object.extend = function(destination, source) {    for (property in source) {      destination[property] = source[property];    }    return destination;  } 除此以外,还有一种不太常见的方法:  Function

  • JS中使用apply方法通过不同数量的参数调用函数的方法

    apply()方法定义 函数的apply()方法和call方法作用相同,区别在于接收的参数的方式不同. apply()方法接收两个参数,一个是对象,一个是参数数组. apply()作用 1.用于延长函数的作用域 示例: var color='red'; var o={color:'blue'}; function sayColor(){ console.log(this.color); } sayColor();//"red" sayColor.apply(o);//"blu

  • JS利用map整合双数组的小技巧分享

    JS利用map整合双数组的小技巧分享

    目录 前言 模拟数据 合并后数据 合并思路 代码展示&解析 第一步 第二步 第三步 第四步 全部代码 总结 前言 最近因公司业务需求编写ECharts图表展示相关公司阶段型业务相关数据变化,需要服务端进行数据查询返回给前端进行数据展示.但是由于反回的数据不便于前端 ECharts展示所以需要进行数据整合,奈何本人经验不足只能请教公司大佬,在大佬帮助下完成了数据整合,并学到一个前所未闻的合并方法今天分享给大家. 模拟数据 下图是将要被合并的两数组 合并后数据 合并后数据要求以时间为唯一的key进行

  • 利用promise及参数解构封装ajax请求的方法

    利用promise及参数解构封装ajax请求的方法

    1.前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </hea

  • 教你利用Golang可选参数实现可选模式

    目录 从需求开始 定义构造函数 定义可选函数 增强构造函数 可选模式的优势 直观清晰 支持扩展 参数顺序 本文讨论Golang函数可选参数及函数类型,以及如何利用可选函数类型实现可选模式.同时通过构造函数作为示例,实现强大带可选参数的构造函数,让代码更直观.灵活.支持扩展. 从需求开始 可选参数给函数传递额外参数扩展或修改其行为,下面示例利用可选功能创建House类型: h := NewHouse( WithConcrete(), WithoutFireplace(), ) NewHouse是构

  • 利用pandas将numpy数组导出生成excel的实例

    上图 代码 # -*- coding: utf-8 -*- """ Created on Sun Jun 18 20:57:34 2017 @author: Bruce Lau """ import numpy as np import pandas as pd # prepare for data data = np.arange(1,101).reshape((10,10)) data_df = pd.DataFrame(data) # ch

  • 利用ctypes获取numpy数组的指针方法

    如下所示: import numpy as np from ctypes import * a = np.asarray(range(16), dtype=np.int32).reshape([4,4]) if not a.flags['C_CONTIGUOUS']: a = np.ascontiguous(a, dtype=a.dtype) # 如果不是C连续的内存,必须强制转换 a_ctypes_ptr = cast(a.ctypes.data, POINTER(c_int)) #转换为ct

  • Spring Boot利用JSR303实现参数验证的方法实例

    简介 JSR-303 是 JAVA EE 6 中的一项子规范,叫做 Bean Validation. 在任何时候,当你要处理一个应用程序的业务逻辑,数据校验是你必须要考虑和面对的事情.应用程序必须通过某种手段来确保输入进来的数据从语义上来讲是正确的.在通常的情况下,应用程序是分层的,不同的层由不同的开发人员来完成.很多时候同样的数据验证逻辑会出现在不同的层,这样就会导致代码冗余和一些管理的问题,比如说语义的一致性等.为了避免这样的情况发生,最好是将验证逻辑与相应的域模型进行绑定. Bean Va

随机推荐