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滚动条多种样式,推荐
Feb 05 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 Javascript
Jquery post传递数组方法实现思路及代码
Apr 28 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
Sep 29 Javascript
JS中实现简单Formatter函数示例代码
Aug 19 Javascript
浅谈JSON.parse()和JSON.stringify()
Jul 14 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 Javascript
浅谈Webpack核心模块tapable解析
Sep 11 Javascript
了解javascript中变量及函数的提升
May 27 Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 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新手上路(八)
2006/10/09 PHP
php中处理模拟rewrite 效果
2006/12/09 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
Yii Framework框架开发微信公众平台示例
2020/04/26 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
2020/05/09 Javascript
vue实现页面切换滑动效果
2020/06/29 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
python skimage 连通性区域检测方法
2018/06/21 Python
python实现根据文件关键字进行切分为多个文件的示例
2018/12/10 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
python爬取微信公众号文章的方法
2019/02/26 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
雅诗兰黛美国官网:Estee Lauder美国
2016/07/21 全球购物
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
校园十佳歌手策划书
2014/01/22 职场文书
建筑个人求职信范文
2014/01/25 职场文书
医院检讨书范文
2014/02/01 职场文书
市场营销策划方案
2014/06/11 职场文书
Java异常处理try catch的基本用法
2021/12/06 Java/Android
《艾尔登法环》发布最新「战技」宣传片
2022/04/03 其他游戏