JS中使用Array函数shift和pop创建可忽略参数的例子


Posted in Javascript onMay 28, 2014

在 JS Array 中支持两个方法,shift() 和 pop(),分别是指从一个数据中的最前面和最后面删除一个值,并返删除值。看一个示例就明白了:

var arr = ['s','o','f','i','s','h'];
arr.shift(); // 返回 's'
arr; // 目前是 ['o','f','i','s','h']
arr.pop() // 返回 'h'
arr // 目前是 ['o','f','i','s']

在很多 JS 框架中可以很常见的是,一个方法提供你传几个参数,而这些参数中,部分是可以忽略的,这些可以忽略的点可能是第一个,也可能是最后一个。传统的写法是判断参数有没有存在,或者参数的个数来决定最终取值。

这里,我们可以利用函数的 arguments 对象,以及 Array 中的 shift 和 pop 来实现灵活的应用。

一、使用 shift
如何实现一个 .bind() 方法,让 fn api 如下:

// fn 的作用域限定于 object 下
// 除 object 外,所有 bind 方法的参数都将传给 fn
fn.bind(object, param1, param2, [, paramN]);

看一个实例先。当然,这例子可能更为重要的是 call和 apply 的应用。不过,我们想要说的是 shift 的应用:
// 来自 Prototype.js 的 [`.bind`](http://www.prototypejs.org/api/function/bind) 方法
Function.prototype.bind = function(){
  var fn = this,
      args = Array.prototype.slice.call(arguments),
      object = args.shift();
  return function(){
      return fn.apply(object,
          args.concat(Array.prototype.slice.call(arguments)));
      };
};

我们可以利用对 arguments 对象(array-like object,需要转换成真正的 array)进行 shift 来取出,像这个方法,主要利用它们来分出作为作用域的 object,然后巧妙地把余下的参数数组传给 fn,即调用我们想限定到 object 作用域内的函数。

二、使用 pop
最近在试用 seajs,我们就拿它的一个 api 来说吧:

define(id, dependencies, callback)

这个定义一个模块的 api,id 和 dependencies 都是可以省略的。这里,如何实现这个支持呢?如果使用 if 来判断,真就得 if (arguments === 1) {...} elseif ... 一大堆了。当然,这样有时候也有好处的(?,想想)。这里,我们可能用来 pop 来方便实现这样的支持:
var define = function(){
    // 取出这个 callback
    var args = [].slice.call(arguments)
        fn = args.pop();
    // 做点其他神马事
        fn.apply(null, args)
    // ...
    },
    callback = function(){
        var args = arguments, i = 0, len = args.length;
        if(len === 0) console.log('只有一个 callback');
        for(;i<len;i++) {
            console.log(args[i]);
        }
    }
// 看看他们三个的执行结果
define(callback);
define('有两个参数', callback);
define('有三个参数', 'hello world', callback);

前两天和同事除到一些 JS 中的技巧时引用的一个东西。虽然总叫自己不要太沉浸于代码中,但代码,不仅仅是 JS,总是给我们太多乐趣。如何不喜欢。哈哈。
Javascript 相关文章推荐
extjs之去除s.gif的影响
Dec 25 Javascript
javascript二维数组转置实例
Jan 22 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 Javascript
跟我学习javascript的函数调用和构造函数调用
Nov 16 Javascript
Bootstrap每天必学之表格
Nov 23 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
javascript中的深复制详解及实例分析
Dec 29 Javascript
javaScript实现复选框全选反选事件详解
Nov 20 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 Javascript
vue-cli3环境变量与分环境打包的方法示例
Feb 18 Javascript
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 #Javascript
node.js Web应用框架Express入门指南
May 28 #Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
May 28 #Javascript
浅析JavaScript基本类型与引用类型
May 28 #Javascript
最短的IE判断var ie=!-[1,]分析
May 28 #Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 #Javascript
什么是cookie?js手动创建和存储cookie
May 27 #Javascript
You might like
测试PHP连接MYSQL成功与否的代码
2013/08/16 PHP
php实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
vue.js获取数据库数据实例代码
2017/05/26 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
python二叉树的实现实例
2013/11/21 Python
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
Python解析最简单的验证码
2016/01/07 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
详解Python 定时框架 Apscheduler原理及安装过程
2019/06/14 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
戴森英国官网:Dyson英国
2019/05/07 全球购物
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
电脑租赁公司创业计划书
2014/01/08 职场文书
2014年大班元旦活动方案
2014/02/26 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
安全生产工作汇报材料
2014/10/28 职场文书
高三毕业评语
2014/12/31 职场文书
建党伟业电影观后感
2015/06/01 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
一个都不能少观后感
2015/06/04 职场文书
python实现MD5进行文件去重的示例代码
2021/07/09 Python
vue选项卡切换的实现案例
2022/04/11 Vue.js
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL