简单谈谈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.Validate验证库的使用介绍
Apr 26 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
ajax+jQuery实现级联显示地址的方法
May 06 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
浅谈js中的变量名和函数名重名
Feb 13 Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 Javascript
vue学习笔记之v-if和v-show的区别
Sep 20 Javascript
Vuex 使用及简单实例(计数器)
Aug 29 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
详解Vue.js 响应接口
Jul 04 Javascript
浅析VUE防抖与节流
Nov 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
mysql 全文搜索 技巧
2007/04/27 PHP
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
php实现两表合并成新表并且有序排列的方法
2014/12/05 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
2016/12/06 Javascript
Angular2使用Augury来调试Angular2程序
2017/05/21 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
2018/08/31 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
Python科学计算环境推荐——Anaconda
2014/06/30 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
Appium+python自动化怎么查看程序所占端口号和IP
2019/06/14 Python
用Python配平化学方程式的方法
2019/07/20 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
如何在pycharm中安装第三方包
2020/10/27 Python
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
德国在线香料制造商:Gewürzland
2020/03/10 全球购物
sealed修饰符是干什么的
2012/10/23 面试题
教师实习自我鉴定
2013/12/11 职场文书
大学毕业生个人自荐信范文
2014/01/08 职场文书
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
基层党员四风问题自我剖析材料
2014/09/29 职场文书
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python
Redis Lua脚本实现ip限流示例
2022/07/15 Redis