简单谈谈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 文件本身编码转换 图文教程
Oct 12 Javascript
基于jquery DOM写的类似微博发布的效果
Oct 20 Javascript
JavaScript中Function详解
Feb 27 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
Angular2利用组件与指令实现图片轮播组件
Mar 27 Javascript
VUE中使用Vue-resource完成交互
Jul 21 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
Vue中的methods、watch、computed的区别
Nov 26 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
用node.js写一个jenkins发版脚本
May 21 Javascript
Vue.js组件通信之自定义事件详解
Oct 19 Javascript
Vue+penlayers实现多边形绘制及展示
Dec 24 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
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
动态加载js和css(外部文件)
2013/04/17 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
2017/08/04 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
[06:45]2018DOTA2亚洲邀请赛 4.5 SOLO赛 Sccc vs Maybe
2018/04/06 DOTA
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
浅析Python中的join()方法的使用
2015/05/19 Python
python Selenium实现付费音乐批量下载的实现方法
2019/01/24 Python
python logging设置level失败的解决方法
2020/02/19 Python
Python生成器generator原理及用法解析
2020/07/20 Python
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
竞选演讲稿范文
2013/12/28 职场文书
党员公开承诺书内容
2014/05/20 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
redis哨兵常用命令和监控示例详解
2021/05/27 Redis
Python中time标准库的使用教程
2022/04/13 Python