javascript中call与apply的应用-js教程-PHP中文网

这次给大家带来javascript中call与apply的应用，javascript中call与apply应用的注意事项有哪些，下面就是实战案例，一起来看一下。

求数组的最大值和最小值

定义一个数组：

var ary = [23, 34, 24, 12, 35, 36, 14, 25];

登录后复制

排序再取值法

首先先给数组进行排序（小—>大），第一个和最后一个就是我们想要的最小值和最大值。

var ary = [23, 34, 24, 12, 35, 36, 14, 25];
ary.sort(function (a, b) {
    return a - b;
});var min = ary[0];var max = ary[ary.length - 1];
console.log(min, max);1234567

登录后复制

假设法

假设当前数组中的第一个值是最大值，然后拿这个值和后面的项逐一进行比较，如果后面某一个值比假设的还要打，说明假设错了，我们把假设的值进行替换…..

var max = ary[0], min = ary[0];for (var i = 1; i < ary.length; i++) {
    var cur = ary[i];
    cur > max ? max = cur : null;
    cur < min ? min = cur : null;
}
console.log(min, max);1234567

登录后复制

Math中的max/min方法实现（通过apply）

直接使用Math.min

var min = Math.min(ary); 
console.log(min); // NaN 
console.log(Math.min(23, 34, 24, 12, 35, 36, 14, 25));

登录后复制

直接使用Math.min的时候，需要把待比较的那堆数一个个的传递进去，这样才可以得到最后的记过，一下放一个ary数组进去是不可以的。

尝试：使用eval

var max = eval(“Math.max(” + ary.toString() + “)”); 
console.log(max); 
var min = eval(“Math.min(” + ary.toString() + “)”); 
console.log(min); 
“Math.max(” + ary.toString() + “)” –> “Math.max(23,34,24,12,35,36,14,25)”

登录后复制

首先不要管其他的,先把我们最后要执行的代码都变为字符串,然后把数组中的每一项的值分别的拼接到这个字符串中。

eval：把一个字符串变为JavaScript表达式执行
例如：eval(“12+23+34+45”) // 114

通过apply调用Math中的max/min

var max = Math.max.apply(null, ary); 
var min = Math.min.apply(null, ary); 
console.log(min, max);

登录后复制

在非严格模式下，给apply的第一个参数为null的时候，会让max/min中的this指向window，然后将ary的参数一个个传给max/min。

求平均数

现在模拟一个场景，进行某项比赛，评委打分后，要求去掉一个最高分和最低分，剩下分数求得的平均数即为最后分数。

可能很多同学会想到用，写一个方法，让后接收所有的分数，然后用函数的内置属性arguments，把arguments调用sort方法排序，然后……，但是要注意，arguments并不是真正的数组对象，它只是伪数组集合而已，所以直接调用用arguments调用sort方法是会报错的：

arguments.sort(); // Uncaught TypeError: arguments.sort is not a function

登录后复制

那么这时候可不可以先将arguments转换为一个真正的数组呢，然后再进行操作呢，按照这个思想，我们自己实现一个实现题目要求的业务方法：

function avgFn() {
    // 1、将类数组转换为数组：把arguments克隆一份一模一样的数组出来
    var ary = [];    for (var i = 0; i < arguments.length; i++) {
        ary[ary.length] = arguments[i];
    }    // 2、给数组排序，去掉开头和结尾，剩下的求平均数
    ary.sort(function (a, b) {
        return a - b;
    });
    ary.shift();
    ary.pop();    return (eval(ary.join(&#39;+&#39;)) / ary.length).toFixed(2);
}var res = avgFn(9.8, 9.7, 10, 9.9, 9.0, 9.8, 3.0);
console.log(res);1234567891011121314151617

登录后复制

我们发现在自己实现的avgFn方法中有一个步骤为将arguments克隆出来生成是一个数组。如果对数组的slice方法比较熟悉的话，可以知道当slice方法什么参数都不传的时候就是克隆当前的数组，可以模拟为：

function mySlice () {
    // this->当前要操作的这个数组ary
    var ary = [];    for (var i = 0; i < this.length; i++) {
        ary[ary.length] = this[i];
    }    return ary;
};var ary = [12, 23, 34];var newAry = mySlice(ary);
console.log(newAry);1234567891011

登录后复制

所以在avgFn方法中的将arguments转换为数组的操作可以通过call方法来借用Array中的slice方法。

function avgFn() { // 1、将类数组转换为数组：把arguments克隆一份一模一样的数组出来 // var ary = Array.prototype.slice.call(arguments); var ary = [].slice.call(arguments);
// 2、给数组排序，去掉开头和结尾，剩下的求平均数....123
}

登录后复制

我们现在的做法是先将arguments转换为数组，然后再操作转换之后的数组，那么可以不可以直接就用arguments而不要先转换为数组呢？当然是可以的，通过call来借用数组的方法来实现。

function avgFn() {
    Array.prototype.sort.call(arguments , function (a, b) {
        return a - b;
    });
    [].shift.call(arguments);
    [].pop.call(arguments);    return (eval([].join.call(arguments, &#39;+&#39;)) / arguments.length).toFixed(2);
}var res = avgFn(9.8, 9.7, 10, 9.9, 9.0, 9.8, 3.0);
console.log(res);123456789101112

登录后复制

将类数组转换数组

在之前提到了借用数组的slice方法将类数组对象转换为数组，那么通过getElementsByTagName等方法获取的类数组对象是不是也可以借用slice方法来转换为数组对象呢？

var oLis = document.getElementsByTagName(‘div’);
var ary = Array.prototype.slice.call(oLis);
console.log(ary);
在标准浏览器下，的确可以这么用，但是在IE6~8下就悲剧了，会报错：

SCRIPT5014: Array.prototype.slice: ‘this’ 不是 JavaScript 对象 (报错)
那么在IE6~8下就只能通过循环一个个加到数组中了：

for (var i = 0; i < oLis.length; i++) { 
ary[ary.length] = oLis[i]; 
}

登录后复制

注意：对于arguments借用数组的方法是不存在任何兼容性问题的。

基于IE6~8和标准浏览器中的区别，抽取出类数组对象转换为数组的工具类：

function listToArray(likeAry) {
    var ary = [];    try {
        ary = Array.prototype.slice.call(likeAry);
    } catch (e) {        for (var i = 0; i < likeAry.length; i++) {
            ary[ary.length] = likeAry[i];
        }
    }    return ary;
}1234567891011

登录后复制

这个工具方法中用到了浏览器的异常信息捕获，那么在这里也介绍一下吧。

console.log(num);
当我们输出一个没有定义的变量的时候会报错：Uncaught ReferenceError: num is not defined，在JavaScript中，本行报错，下面的代码都不再执行了。

但是如果使用了try..catch捕获异常信息的话，则不会影响下面的代码进行执行，如果try中的代码执行出错了，会默认的去执行catch中的try {

console.log(num); 
} catch (e) { // 形参必须要写，我们一般起名为e 
console.log(e.message); // –> num is not defined 可以收集当前代码报错的原因 
} 
console.log(‘ok’);

登录后复制

所以try…catch的使用格式为（和Java中很像）：

try { 
// 
} catch (e) { 
// 如果代码报错执行catch中的代码 
} finally { 
// 一般不用：不管try中的代码是否报错，都要执行finally中的代码 
}

登录后复制

这个时候既想捕获到信息，又不想让下面的diamante执行，那么应该怎么做呢？

try {    console.log(num);
} catch (e) {    // console.log(e.message); // --> 可以得到错误信息，把其进行统计    // 手动抛出一条错误信息，终止代码执行    throw new Error(&#39;当前网络繁忙，请稍后再试&#39;);    // new ReferenceError --> 引用错误    // new TypeError --> 类型错误    // new RangeError --> 范围错误
}console.log(&#39;ok&#39;);

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！