0

0

javascript中call与apply的应用

php中世界最好的语言

php中世界最好的语言

发布时间:2018-03-14 13:30:03

|

1769人浏览过

|

来源于php中文网

原创

这次给大家带来javascript中call与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 < 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转换为一个真正的数组呢,然后再进行操作呢,按照这个思想,我们自己实现一个实现题目要求的业务方法:

名品购物网店系统
名品购物网店系统

适合品牌专卖店专用,从前台的美工设计就开始强调视觉形象,有助于提升商品的档次,打造网店品牌!后台及程序核心比较简洁,着重在线购物,去掉了繁琐的代码及垃圾程式,在结构上更适合一些中高档的时尚品牌商品展示. 率先引入语言包机制,可在1小时内制作出任何语言版本,程序所有应用文字皆引自LANG目录下的语言包文件,独特的套图更换功能,三级物品分类,购物车帖心设计,在国内率先将购物车与商品显示页面完美结合,完

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

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

推荐阅读:

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

javascript中call详解

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

2

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

2

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

0

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

0

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

3

2026.01.29

clawdbot ai使用教程 保姆级clawdbot部署安装手册
clawdbot ai使用教程 保姆级clawdbot部署安装手册

Clawdbot是一个“有灵魂”的AI助手,可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等,并且可以接入用户常用的任何聊天APP,所有的操作均可通过WhatsApp、Telegram等平台完成,用户只需通过对话,就能操控设备自动执行各类任务。

25

2026.01.29

clawdbot龙虾机器人官网入口 clawdbot ai官方网站地址
clawdbot龙虾机器人官网入口 clawdbot ai官方网站地址

clawdbot龙虾机器人官网入口:https://clawd.bot/,clawdbot ai是一个“有灵魂”的AI助手,可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等,并且可以接入用户常用的任何聊天APP,所有的操作均可通过WhatsApp、Telegram等平台完成,用户只需通过对话,就能操控设备自动执行各类任务。

16

2026.01.29

Golang 网络安全与加密实战
Golang 网络安全与加密实战

本专题系统讲解 Golang 在网络安全与加密技术中的应用,包括对称加密与非对称加密(AES、RSA)、哈希与数字签名、JWT身份认证、SSL/TLS 安全通信、常见网络攻击防范(如SQL注入、XSS、CSRF)及其防护措施。通过实战案例,帮助学习者掌握 如何使用 Go 语言保障网络通信的安全性,保护用户数据与隐私。

8

2026.01.29

俄罗斯Yandex引擎入口
俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

622

2026.01.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号