javascript中call与apply的应用

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

求数组的最大值和最小值

定义一个数组:

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

登录后复制

排序再取值法

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

立即学习“Java免费学习笔记(深入)”;

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  max ? max = cur : null;    cur 

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 

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

function mySlice () {    // this->当前要操作的这个数组ary    var ary = [];    for (var i = 0; i 

所以在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);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 

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

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

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

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

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');

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

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

javascript中call详解

以上就是javascript中call与apply的应用的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2783019.html

(0)
上一篇 2025年3月8日 16:42:53
下一篇 2025年3月8日 16:43:00

AD推荐 黄金广告位招租... 更多推荐

相关推荐

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

    这次给大家带来javascript中call与apply以及bind有哪些不同,javascript中call与apply以及bind使用的注意事项有哪些,下面就是实战案例,一起来看一下。 首先补充严格模式这个概念,这是ES5中提出的,只要…

    编程技术 2025年3月8日
    000
  • 细说VueJS生命周期与钩子函数应用详解

    本篇文章讲述了VueJS的生命周期和其中钩子函数的应用,大家对VueJS的生命周期和其中钩子函数的应用不了解的话那么我们就一起来看看本篇文章吧, 好了废话少说进入正题吧 朋友你好!很幸运的,我的文章能够被你看到,那么此时你应该想对vuejs…

    2025年3月8日
    200
  • JavaScript中的冒泡排序详解

    本篇文章讲述了javascript中的冒泡排序,大家对javascript中的冒泡排序不了解的话那么我们就一起来看看本篇文章吧,利用javascript简单的实现了冒泡排序,好了废话少说进入正题吧! 冒泡排序 作为最简单的排序算法之一,冒泡…

    2025年3月8日
    200
  • js设计模式之-单例模式的使用

    这次给大家带来js设计模式之-单例模式的使用,使用js单例模式的使用注意事项有哪些,下面就是实战案例,一起来看一下。 1、概念:        在传统的开发工程师眼里,单利模式就是保证每一个类只有一个实例,我们在实现时首先判断实例是否存在,…

    编程技术 2025年3月8日
    200
  • JavaScript中的插入排序详解

    本篇文章讲述了javascript中的插入排序,大家对javascript中的插入排序不了解的话那么我们就一起来看看本篇文章吧,本文章利用javascript简单的实现了插入排序,好了废话少说进入正题吧 JavaScript中的插入排序 插…

    2025年3月8日
    200
  • JS的设计模式之构造函数模式详解

    这次给大家带来js的设计模式之构造函数模式详解,使用js构造函数模式的注意事项有哪些,下面就是实战案例,一起来看一下。 概念 构造函数用于创建特定类型的对象,我们在里面不仅声明了使用的对象,构造函数还可以接受参数以便于第一次创建的时候设置对…

    编程技术 2025年3月8日
    200
  • JavaScript中的希尔排序详解

    本篇文章讲述了javascript中的希尔排序,大家对javascript中的希尔排序不了解的话或者对javascript中的希尔排序感兴趣的话那么我们就一起来看看本篇文章吧, 好了废话少说进入正题吧! JavaScript中的希尔排序 希…

    编程技术 2025年3月8日
    200
  • JS设计模式之建造者模式详解

    这次给大家带来js设计模式之建造者模式详解,使用js建造者模式的注意事项有哪些,下面就是实战案例,一起来看一下。 概念 建造者模式可以将一个复杂的对象的构建与其表示相分离,使同样的构建过程可以创建不同的表示。如果我们用了建造者模式,那么用户…

    编程技术 2025年3月8日
    200
  • JS设计模式之工厂模式详解

    这次给大家带来js设计模式之工厂模式详解,使用js工厂模式的注意事项有哪些,下面就是实战案例,一起来看一下。 概念:工厂模式定义了一个用于创建对象的接口,这个接口由子类决定实例化哪一个类,该模式是一个类的实例化延迟到了子类。而子类可以重写接…

    编程技术 2025年3月8日
    200
  • JS设计模式之代理模式详解

    这次给大家带来js设计模式之代理模式详解,js代理模式的注意事项有哪些,下面就是实战案例,一起来看一下。 概念:代理模式就是为一个对象提供一个代用品或者占位符,以便控制对它的访问。也就是为了保障当前对象的单一职责,而需要创建另一个对象来处理…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论