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 过滤器(first,last,not,even,odd)的使用
Jan 22 Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 Javascript
父节点获取子节点的字符串示例代码
Feb 26 Javascript
使用jQuery实现返回顶部
Jan 26 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
js html实现计算器功能
Nov 13 Javascript
js实现3D照片墙效果
Oct 28 Javascript
微信小程序实现手指拖动选项排序
Apr 22 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和MySql中计算时间差的方法
2011/04/22 PHP
Codeigniter的一些优秀特性总结
2015/01/21 PHP
js数组的操作详解
2013/03/27 Javascript
javascript中的onkeyup和onkeydown区别介绍
2013/04/28 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
jquery队列queue与原生模仿其实现方法分享
2014/03/25 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
js判断checkbox是否选中个数的方法(超简单)
2016/08/19 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
vue实现输入框自动跳转功能
2020/05/20 Javascript
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
python实现根据图标提取分类应用程序实例
2014/09/28 Python
初步解析Python下的多进程编程
2015/04/28 Python
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
Django 跨域请求处理的示例代码
2018/05/02 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
python中tab键是什么意思
2020/06/18 Python
python和js交互调用的方法
2020/06/23 Python
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
美国批发供应商:Kole Imports
2019/04/10 全球购物
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
2015年社区综治工作总结
2015/04/21 职场文书
律师函格式范本
2015/05/27 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang
Mysql基础知识点汇总
2021/05/26 MySQL