简单谈谈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学习随笔(使用window和frame)的技巧
Mar 08 Javascript
使用JS 清空File控件的路径值
Jul 08 Javascript
ie7+背景透明文字不透明超级简单的实现方法
Jan 17 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
node.js中的fs.rmdirSync方法使用说明
Dec 16 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
js一维数组、多维数组和对象的混合使用方法
Apr 03 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
Jan 24 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 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+mysql实现用户注册登陆的方法
2015/01/03 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
jQuery实现折线图的方法
2015/02/28 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
100行python代码实现跳一跳辅助程序
2018/01/15 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
基于python实现把图片转换成素描
2019/11/13 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
拿来就用!Python批量合并PDF的示例代码
2020/08/10 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
英语硕士生求职简历的自我评价
2013/10/15 职场文书
人事主管的岗位职责
2013/11/16 职场文书
民族团结先进个人材料
2014/02/05 职场文书
考核工作实施方案
2014/03/30 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
争先创优演讲稿
2014/09/15 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
个人收入证明模板
2014/09/18 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书