简单谈谈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 相关文章推荐
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
Jan 08 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
Dec 12 Javascript
angular+webpack2实战例子
May 23 Javascript
AngularJS实现图片上传和预览功能的方法分析
Nov 08 Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
javascript动态创建对象的属性详解
Nov 07 Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
Dec 03 Javascript
微信小程序实现随机验证码功能
Dec 20 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
Jul 21 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获取当前页面URL函数实例
2014/10/22 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
php HTML无刷新提交表单
2016/04/05 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
js控制frameSet示例
2013/09/10 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
详解vue-cli 构建Vue项目遇到的坑
2017/08/30 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
2018/11/02 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
vue中axios请求的封装实例代码
2019/03/23 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
python结合API实现即时天气信息
2016/01/19 Python
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
Python异常对代码运行性能的影响实例解析
2018/02/08 Python
python中partial()基础用法说明
2018/12/30 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
python五子棋游戏的设计与实现
2019/06/18 Python
把vgg-face.mat权重迁移到pytorch模型示例
2019/12/27 Python
Python运算符+与+=的方法实例
2021/02/18 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
销售文员的岗位职责
2013/11/20 职场文书
作风年建设汇报材料
2014/08/14 职场文书
小学教师年度个人总结
2015/02/05 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
从事会计工作年限证明
2015/06/23 职场文书
小学教育见习总结
2015/06/23 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书