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控制css中的float的代码
Aug 16 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 Javascript
javascript实现获取浏览器版本、操作系统类型
Jan 29 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
Jun 01 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
AngularJS执行流程详解
Feb 17 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 Javascript
webpack 最佳配置指北(推荐)
Jan 07 Javascript
vue引用外部JS的两种种方法
Jan 28 Javascript
js实现超级玛丽小游戏
Mar 18 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
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
php下intval()和(int)转换使用与区别
2008/07/18 PHP
php 图像函数大举例(非原创)
2009/06/20 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
Array.prototype.slice 使用扩展
2010/06/09 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
js模块加载方式浅析
2017/08/12 Javascript
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
JavaScript实现构造json数组的方法分析
2018/08/17 Javascript
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python实现通讯录功能
2018/02/22 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
python爬虫获取百度首页内容教学
2018/12/23 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
Python调用Windows命令打印文件
2020/02/07 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
python 递归相关知识总结
2021/03/03 Python
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
领导证婚人证婚词
2014/01/13 职场文书
消防器材管理制度
2014/01/28 职场文书
21岁生日感言
2014/02/27 职场文书
土地转让协议书
2014/04/15 职场文书
计划生育汇报材料
2014/12/26 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
个人年终总结开头
2015/03/06 职场文书
领导视察通讯稿
2015/07/18 职场文书
MySQL索引失效的典型案例
2021/06/05 MySQL