简单谈谈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开发随笔二 动态加载js和文件
Nov 25 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
javascript运动详解
Jul 06 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
JavaScript无阻塞加载和defer、async详解
Feb 26 Javascript
10道典型的JavaScript面试题
Mar 22 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 Javascript
Angular中点击li标签实现更改颜色的核心代码
Dec 08 Javascript
validform表单验证的实现方法
Mar 08 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 Javascript
js canvas实现俄罗斯方块
Oct 11 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
第十三节--对象串行化
2006/11/16 PHP
php adodb介绍
2009/03/19 PHP
PHP数据过滤的方法
2013/10/30 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
网页挂马方式整理及详细介绍
2016/11/03 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
布同自制Python函数帮助查询小工具
2011/03/13 Python
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
Python基础教程之浅拷贝和深拷贝实例详解
2017/07/15 Python
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
python列表list保留顺序去重的实例
2018/12/14 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
收银出纳员岗位职责
2014/02/23 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书