javascript 利用arguments实现可变长参数


Posted in Javascript onNovember 21, 2016

javascript arguments解释,实现可变长参数。

在C#中,有可变长参数params[],但是在js中,如何实现这种可变参数呢?

一、可变长参数

arguments是非常好的解决方法,一直不知道javascript有这个东西。

先来看看应用场景,使用arguments传入任意个数的参数到js函数里的写法。

function Test() {
  console.log(arguments[0]);
  console.log(arguments[1]);
  console.log(arguments[2]);
};
Test(1, 2, 3);

输出 1 2 3;

当然,你也可以在javascript函数里放一个数组,但是它是固定长度的。

二、不要直接修改arguments对象

arguments对象类似于数组,但实际上它也并不是数组,使用call方法,可能将数组的shift函数用到它身上,但是尽量不要尝试去改动arguments。很容易造成混乱。

如果确实要修改,可以将arguments的内容复制到一个新数组上,然后在新数组上进行修改。

var args = [].slice.call(arguments);

用变量绑定arguments,实现跨函数访问

arguments变量是被隐式绑定到每个函数体内的,注意是每一个函数内部。

一个迭代器的例子能够说明这个问题;

function values() {
 //values有自己的arguments
 var i = 0, n = arguments.length;
 return {
  hasNext: function () {
   return i < n;  //hasNext 有自己的arguments
  },
  next: function () {
   if(i >= n)
   {
    throw new Error("已经是最后一个元素!");
   }
   return arguments[i++];  //next 有自己的arguments
  }
 }
}
 
var it = values(1, 2, 3, 4, 5, 6, 7);
console.log(it.next());  //undefined
console.log(it.next());  //undefined
console.log(it.next());  //undefined

如果要访问外层函数的arguments,那么只能通过局部变量绑定的方式,在内层就能够访问,上面的例子可以改造成

function values() {
 //values有自己的arguments
 var i = 0, n = arguments.length, ourterArgs = arguments;
 return {
  hasNext: function () {
   return i < n;  //hasNext 有自己的arguments
  },
  next: function () {
   if(i >= n)
   {
    throw new Error("已经是最后一个元素!");
   }
   return ourterArgs[i++];  //ourterArgs 外层保存的 arguments
  }
 }
}
 
var it = values(1, 2, 3, 4, 5, 6, 7);
console.log(it.next());  //1
console.log(it.next());  //2
console.log(it.next());  //3

以上所述是本文的全部内容,希望对大家有所帮助,谢谢对三水点靠木的支持!

Javascript 相关文章推荐
获取当前网页document.url location.href区别总结
May 10 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
Jan 15 Javascript
jquery使用append(content)方法注意事项分享
Jan 06 Javascript
JavaScript参数个数可变的函数举例说明
Oct 10 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
Mar 26 Javascript
Webpack的dll功能使用
Jun 28 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
浅谈Vue组件单元测试究竟测试什么
Feb 05 Javascript
JS遍历树层级关系实现原理解析
Aug 31 Javascript
js 点击a标签 获取a的自定义属性方法
Nov 21 #Javascript
浅谈JS读取DOM对象(标签)的自定义属性
Nov 21 #Javascript
AngularJS Phonecat实例讲解
Nov 21 #Javascript
浅谈React 属性和状态的一些总结
Nov 21 #Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 #Javascript
jQuery用FormData实现文件上传的方法
Nov 21 #Javascript
遍历js中对象的属性和值的实例
Nov 21 #Javascript
You might like
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
解放web程序员的输入验证
2006/10/06 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
2016/03/30 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
js选择器全面解析
2016/06/27 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
python下如何让web元素的生成更简单的分析
2008/07/17 Python
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
利用django如何解析用户上传的excel文件
2017/07/24 Python
TensorFlow打印tensor值的实现方法
2018/07/27 Python
Python3爬虫学习入门教程
2018/12/11 Python
python3中property使用方法详解
2019/04/23 Python
tensorflow 变长序列存储实例
2020/01/20 Python
keras打印loss对权重的导数方式
2020/06/10 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
学习Python需要哪些工具
2020/09/04 Python
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
财务会计人员岗位职责
2013/11/30 职场文书
毕业生自荐书模版
2014/01/04 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
办公室主任岗位职责
2015/01/31 职场文书
政府会议通知范文
2015/04/15 职场文书
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js