简单谈谈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 相关文章推荐
json-lib出现There is a cycle in the hierarchy解决办法
Feb 24 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
node.js中的fs.appendFile方法使用说明
Dec 17 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 Javascript
springMVC结合AjaxForm上传文件
Jul 12 Javascript
webpack实现一个行内样式px转vw的loader示例
Sep 13 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
[jQuery] 事件和动画详解
Mar 05 jQuery
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
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目录拷贝实现方法
2015/07/10 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
JavaScript For Beginners(转载)
2007/01/05 Javascript
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
2015/05/25 Javascript
理解javascript模块化
2016/03/28 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
微信小程序基于picker实现级联菜单
2019/02/15 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
微信小程序实现图片上传
2019/05/23 Javascript
[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25
2020/11/25 DOTA
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
python自定义解析简单xml格式文件的方法
2015/05/11 Python
Python MD5加密实例详解
2017/08/02 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
pytorch自定义初始化权重的方法
2019/08/17 Python
Python元组 tuple的概念与基本操作详解【定义、创建、访问、计数、推导式等】
2019/10/30 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
20年同学聚会邀请函
2014/02/04 职场文书
行政主管职责范本
2014/03/07 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
模具设计与制造专业求职信
2014/07/19 职场文书
百年孤独读书笔记
2015/06/29 职场文书
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python