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 相关文章推荐
js检测客户端不是firefox则提示下载
Apr 07 Javascript
extjs grid取到数据而不显示的解决
Dec 29 Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
学习使用bootstrap的modal和carousel
Dec 09 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
js正则相关知识点专题
May 10 Javascript
vue计算属性和监听器实例解析
May 10 Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 Javascript
现代 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
Notice: Trying to get property of non-object problem(PHP)解决办法
2012/03/11 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
Code: write(s,d) 输出连续字符串
2007/08/19 Javascript
javascript 操作文件 实现方法小结
2009/07/02 Javascript
JavaScript初学者应注意的七个细节详细介绍
2012/12/27 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
解释&amp;&amp;和||在javascript中的另类用法
2014/07/28 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
js实现城市级联菜单的2种方法
2017/06/23 Javascript
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
python自动zip压缩目录的方法
2015/06/28 Python
Python根据区号生成手机号码的方法
2015/07/08 Python
python高手之路python处理excel文件(方法汇总)
2016/01/07 Python
Python入门必须知道的11个知识点
2018/03/21 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
python将数据插入数据库的代码分享
2020/08/16 Python
浅析Python requests 模块
2020/10/09 Python
python函数超时自动退出的实操方法
2020/12/28 Python
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
Java基础面试题
2014/07/19 面试题
合同专员岗位职责
2013/12/18 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
2014最新实习证明模板
2014/10/02 职场文书
工伤私了协议书范本
2014/11/24 职场文书
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP