简单谈谈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.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 Javascript
javaScript给元素添加多个class的简单实现
Jul 20 Javascript
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
Bootstrap图片轮播效果详解
Oct 17 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
详解js动态获取浏览器或页面等容器的宽高
Mar 13 Javascript
react基本安装与测试示例
Apr 27 Javascript
cypress测试本地web应用
Jun 01 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
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
php上传大文件设置方法
2016/04/14 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
一些有关检查数据的JS代码
2006/09/07 Javascript
js 字符串操作函数
2009/07/25 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
js创建数组的简单方法
2016/07/27 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
vue-hook-form使用详解
2017/04/07 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
Vue-router 报错NavigationDuplicated的解决方法
2020/03/31 Javascript
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
Python3写入文件常用方法实例分析
2015/05/22 Python
python抓取文件夹的所有文件
2018/02/27 Python
详解Python利用random生成一个列表内的随机数
2019/08/21 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
ORACLE十问
2015/04/20 面试题
专业销售业务员求职信
2013/11/18 职场文书
员工培训邀请函
2014/01/11 职场文书
会议接待欢迎词
2014/01/12 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
2015年保送生自荐信
2015/03/24 职场文书
Python  lambda匿名函数和三元运算符
2022/04/19 Python