简单谈谈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 乱码问题
Aug 06 Javascript
JS替换文本域内的回车示例
Feb 18 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 Javascript
jQuery实现的简单拖拽功能示例
Sep 13 Javascript
jQuery纵向导航菜单效果实现方法
Dec 19 Javascript
微信小程序实现多宫格抽奖活动
Apr 15 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
微信小程序实现获取用户信息并存入数据库操作示例
May 07 Javascript
原生JS无缝滑动轮播图
Oct 22 Javascript
JavaScript实现省份城市的三级联动
Feb 11 Javascript
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 Javascript
js+html+css实现手动轮播和自动轮播
Dec 30 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
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
php中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
js资料prototype 属性
2007/03/13 Javascript
JAVASCRIPT keycode总结
2009/02/04 Javascript
Prototype Object对象 学习
2009/07/12 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
JavaScript浏览器对象之一Window对象详解
2016/06/03 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
2019/04/11 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
2019/07/29 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
使用Python制作微信跳一跳辅助
2018/01/31 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
Python try except异常捕获机制原理解析
2020/04/18 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
公司部门司机岗位职责
2014/01/03 职场文书
出国留学介绍信
2014/01/13 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
经典团队口号大全
2014/06/21 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python