简单谈谈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 相关文章推荐
js 分页全选或反选标识实现代码
Aug 09 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
Node.js事件驱动
Jun 18 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
JS实现图片预加载之无序预加载功能代码
May 12 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
vue的diff算法知识点总结
Mar 29 Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 Javascript
JavaScript仿京东轮播图效果
Feb 25 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
form自动提交实例讲解
2017/07/10 PHP
实例分析PHP将字符串转换成数字的方法
2019/01/27 PHP
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
简单的js计算器实现
2016/10/26 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
Python实现判断并移除列表指定位置元素的方法
2018/04/13 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
python实现从wind导入数据
2019/12/03 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
施华洛世奇中国官网:SWAROVSKI中国
2020/06/16 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
毕业生找工作的自我评价
2013/10/18 职场文书
环境科学专业优秀毕业生自荐书
2014/02/03 职场文书
艺术设计专业个人求职信
2014/04/10 职场文书
学生请假条格式
2014/04/11 职场文书
董事长秘书工作职责
2014/06/10 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
迎国庆横幅标语
2014/10/08 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python