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 相关文章推荐
JQUERY设置IFRAME的SRC值的代码
Nov 30 Javascript
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
js点击文本框弹出可选择的checkbox复选框
Feb 03 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
微信小程序实现搜索功能
Mar 10 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 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
全国FM电台频率大全 - 1 北京市
2020/03/11 无线电
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
jscript之Open an Excel Spreadsheet
2007/06/13 Javascript
JS 分号引起的一段调试问题
2009/06/18 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
Python网页正文转换语音文件的操作方法
2018/12/09 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
餐厅销售主管职责范本
2014/02/19 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
小学一年级评语大全
2014/04/22 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
2014年化验室工作总结
2014/11/21 职场文书
2015年工会工作总结
2015/03/30 职场文书
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android