简单谈谈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 相关文章推荐
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 Javascript
JavaScript实现斗地主游戏的思路
Feb 29 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
微信小程序-拍照或选择图片并上传文件
Jan 06 Javascript
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 Javascript
layui数据表格重载实现往后台传参
Nov 15 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 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下使用curl模拟用户登陆的代码
2010/09/10 PHP
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
layui分页效果实现代码
2017/05/19 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
小程序分享模块超级详解(推荐)
2019/04/10 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
python使用代理ip访问网站的实例
2018/05/07 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
Python json格式化打印实现过程解析
2020/07/21 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
机械设计毕业生自荐信
2014/02/02 职场文书
开学季活动策划方案
2014/02/28 职场文书
母婴店促销方案
2014/03/05 职场文书
中文专业求职信
2014/06/20 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
专家推荐信范文
2015/03/26 职场文书
会计岗位职责范本
2015/04/02 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
python超详细实现完整学生成绩管理系统
2022/03/17 Python