简单谈谈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的eval JSON object问题
Nov 15 Javascript
js删除所有的cookie的代码
Nov 25 Javascript
javascript两种function的定义介绍及区别说明
May 02 Javascript
JavaScript中的console.dir()函数介绍
Dec 29 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
基于angular实现三级联动的生日插件
May 12 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
Angular 数据请求的实现方法
May 07 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 Javascript
JS实现网站楼层导航效果代码实例
Jun 16 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
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
PHP5中MVC结构学习
2006/10/09 PHP
PHP flock 文件锁详细介绍
2012/12/29 PHP
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
PHP按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
php 三元运算符实例详细介绍
2016/12/15 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
jQuery 连续列表实现代码
2009/12/21 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
jQuery1.9+中删除了live以后的替代方法
2016/06/17 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
js生成word中图片处理方法
2018/01/06 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
vue 二维码长按保存和复制内容操作
2020/09/22 Javascript
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
python实现的简单RPG游戏流程实例
2015/06/28 Python
一篇文章快速了解Python的GIL
2018/01/12 Python
通过Pandas读取大文件的实例
2018/06/07 Python
Python字典遍历操作实例小结
2019/03/05 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
大三学生英语考试作弊检讨书
2015/01/01 职场文书
开会通知短信大全
2015/04/20 职场文书
幼儿园辞职信
2015/05/13 职场文书
python控制台打印log输出重复的解决方法
2021/05/14 Python