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下书写动态生成的xml(兼容火狐)
Apr 02 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
JS实现的简易拖放效果示例
Dec 29 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
使用axios实现上传图片进度条功能
Dec 21 Javascript
详解vue-admin和后端(flask)分离结合的例子
Feb 12 Javascript
Es6 Generator函数详细解析
Feb 24 Javascript
React手稿之 React-Saga的详解
Nov 12 Javascript
vue自定义指令实现方法详解
Feb 11 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
PHP微信开发之有道翻译
2016/06/23 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
JavaScript数据结构与算法之栈详解
2015/03/12 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
2016/06/26 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
python实现数独算法实例
2015/06/09 Python
RC4文件加密的python实现方法
2015/06/30 Python
解决Pycharm后台indexing导致不能run的问题
2019/06/27 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
标准的毕业生自荐信
2014/04/20 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
国庆节慰问信
2015/02/15 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
食品安全主题班会
2015/08/13 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL