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 相关文章推荐
JavaScript继承方式实例
Oct 29 Javascript
struts2+jquery+json实现异步加载数据(自写)
Jun 24 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
js转化毫秒为时间格式代码
Apr 10 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
Vue仿支付宝支付功能
May 25 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 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/02 无线电
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
php数据访问之查询关键字
2016/05/09 PHP
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
2011/09/19 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
Angular中$compile源码分析
2016/01/28 Javascript
js和jQuery设置Opacity半透明 兼容IE6
2016/05/24 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
解决vue v-for 遍历循环时key值报错的问题
2018/09/06 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
Python中return语句用法实例分析
2015/08/04 Python
Python生成随机密码的方法
2017/06/16 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
很酷的python表白工具 你喜欢我吗
2019/04/11 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
python统计字符的个数代码实例
2020/02/07 Python
python实现控制台输出彩色字体
2020/04/05 Python
html5使用canvas画三角形
2014/12/15 HTML / CSS
日本最大的眼镜购物网站:Oh My Glasses
2016/11/13 全球购物
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
shallow copy和deep copy的区别
2016/05/09 面试题
高级销售员求职信
2013/10/25 职场文书
迟到检讨书300字
2014/02/14 职场文书
幼儿园大班毕业教师寄语
2014/04/03 职场文书
2014中学教师节广播稿
2014/09/10 职场文书
客户经理岗位职责
2015/01/31 职场文书
英文慰问信
2015/02/14 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
用python自动生成日历
2021/04/24 Python
详解如何使用Nginx解决跨域问题
2022/05/06 Servers