简单谈谈Javascript函数中的arguments


Posted in Javascript onFebruary 09, 2017

一、arguments的面貌

在javascript中所有的函数内部都包含了一个隐藏的变量叫arguments;它存放着所有传递到这个函数中的参数;

那么我们打开实例看看arguments的输出形式

(function fn(){
 console.log(arguments)
})(1,2,3,4)

简单谈谈Javascript函数中的arguments

结果好像是类似数组的形式打印在控制台,相信大多数人包括我看到这种输出就会认为arguments是一个数组,那么既然是数组就可以用数组的一些方法了吧,再看下一个例子;

(function fn(){
 arguments.push(5)
 console.log(arguments)
})(1,2,3,4)

简单谈谈Javascript函数中的arguments

结果报错了- -!;(在项目中我就是踩到了这个坑);

那我们就会有一个疑惑了,既然是数组为什么不能用push方法呢,其他的像pop,slice也不行么,是的,都不行,虽然arguments也能通过下标的形式获取到对应位置的参数,当本质上不算是真正的数组;

我们通过instanceof打印看看它是不是Array的孩子

(function fn(){
 console.log(arguments instanceof Array)
})()

简单谈谈Javascript函数中的arguments

果不其然真不是数组,那么我们就会联想到它就是个对象了;

虽然它也能用for循环遍历到里面的参数,但把它转为真正的数组才是更好的选择;

二、转化为数组

转化的方法有很多,对象冒充的方式传递给Array.prototype或遍历push到空数组或传递给另一个函数等等。。都可以完成,下面简单介绍几个转化的方法,遍历push到空数组的方法就不细讲了;

第一种方法:

(function fn(){
 var arr = Array.prototype.slice.call(arguments)
 arr.push(5)
 console.log(arr)
})(1,2,3,4)

简单谈谈Javascript函数中的arguments

这种转化方式比较慢,在性能不好的情况下不推荐这种写法;

第二种方法:

function fn() {
 fnArr.apply(null, arguments);
}
function fnArr(a,b,c,d) {
 ···
}

个人推荐这种做法;

总结

以上就是这篇文章的全部内容了,虽然写的不多,但还是希望大家能在项目的过程当中不要误踩了arguments的坑,希望本文能对大家有所帮助。

Javascript 相关文章推荐
javascript的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
utf-8编码引起js输出中文乱码的解决办法
Jun 23 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
原生js制作日历控件实例分享
Apr 06 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
vue Render中slots的使用的实例代码
Jul 19 Javascript
react配置antd按需加载的使用
Feb 11 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 #Javascript
微信小程序之picker日期和时间选择器
Feb 09 #Javascript
BootStrap 弹出层代码
Feb 09 #Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 #Javascript
javascript history对象详解
Feb 09 #Javascript
jquery dialog获取焦点的方法
Feb 09 #Javascript
jQuery实现淡入淡出的模态框
Feb 09 #Javascript
You might like
PHP 前加at符合@的作用解析
2015/07/31 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
koa-router源码学习小结
2018/09/07 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
python中函数默认值使用注意点详解
2016/06/01 Python
Python数据结构与算法之链表定义与用法实例详解【单链表、循环链表】
2017/09/28 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
Python for循环与range函数的使用详解
2019/03/23 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
Python输出指定字符串的方法
2020/02/06 Python
海淘母婴商城:国际妈咪
2016/07/23 全球购物
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
比较一下entity bean和session bean
2013/12/27 面试题
酒吧副总经理岗位职责
2013/12/10 职场文书
法律专业应届生自荐信范文
2014/01/06 职场文书
《晏子使楚》教学反思
2014/02/08 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
承诺函格式模板
2015/01/21 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
请客吃饭开场白
2015/06/01 职场文书
退伍军人感言
2015/08/01 职场文书
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python