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代码
Apr 22 Javascript
JQuery Easyui Tree的oncheck事件实现代码
May 28 Javascript
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
Jun 06 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 Javascript
小白谈谈对JS原型链的理解
May 03 Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
Jan 07 Javascript
JS 5种遍历对象的方式
Jun 16 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 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实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
php中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
几个javascript操作word的参考代码
2009/10/26 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
js图片上传的封装代码
2017/08/01 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
2019/06/19 jQuery
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
Python3 Tkinkter + SQLite实现登录和注册界面
2019/11/19 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
python 怎样进行内存管理
2020/11/10 Python
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
英国DIY和家居装饰领域的主要品牌:Wickes
2019/11/26 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
Linux面试题LINUX系统类
2014/11/19 面试题
物流仓管员岗位职责
2013/12/04 职场文书
夏季奶茶店创业计划书
2014/01/16 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
电子工程求职信
2014/07/17 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
自我工作评价范文
2015/03/06 职场文书
2016年感恩节寄语
2015/12/07 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python