视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
javascript中call与apply的应用
2020-11-27 20:00:55 责编:小采
文档


这次给大家带来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('+')) / ary.length).toFixed(2);
}var res = avgFn(9.8, 9.7, 10, 9.9, 9.0, 9.8, 3.0);
console.log(res);12345671011121314151617

我们发现在自己实现的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);12345671011

所以在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, '+')) / arguments.length).toFixed(2);
}var res = avgFn(9.8, 9.7, 10, 9.9, 9.0, 9.8, 3.0);
console.log(res);1234567101112

将类数组转换数组

在之前提到了借用数组的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;
}12345671011

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

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('当前网络繁忙,请稍后再试'); // new ReferenceError --> 引用错误 // new TypeError --> 类型错误 // new RangeError --> 范围错误
}console.log('ok');

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

javascript中call与apply以及bind有哪些不同

javascript中call详解

下载本文
显示全文
专题