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 相关文章推荐
浅谈JavaScript对象的创建方式
Jun 13 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
微信小程序 toast 详解及实例代码
Nov 09 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 Javascript
angular实现商品筛选功能
Feb 01 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 Javascript
React-Native左右联动List的示例代码
Sep 21 Javascript
Vue中的$set的使用实例代码
Oct 08 Javascript
微信小程序基于picker实现级联菜单
Feb 15 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
Aug 05 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
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
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
js二维数组排序的简单示例代码
2014/01/24 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
Django学习笔记之ORM基础教程
2018/03/27 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
德国化妆品和天然化妆品网上商店:kosmetikfuchs.de
2017/06/09 全球购物
J2EE系统只能是基于web
2015/09/08 面试题
快递业务员岗位职责
2014/01/06 职场文书
销售人员职业生涯规划范文
2014/03/01 职场文书
大学生活感想
2015/08/10 职场文书
创业计划书详解
2019/07/19 职场文书
nginx请求限制配置方法
2021/07/09 Servers
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js