JS中使用Array函数shift和pop创建可忽略参数的例子

在 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，总是给我们太多乐趣。如何不喜欢。哈哈。

赞 (0)

相关推荐

  • 一组JS创建和操作表格的函数集合

    一组JS创建和操作表格的函数集合

    stone.js //**************************************神吹表格操作函数******************************************************* //隐藏列 function setHiddenRow(tb,iCol){ for (i=0;i<oTable.rows.length;i++){ tb.rows[i].cells[iCol].style.display = oTable.rows[i].cells[iCo

  • js中匿名函数的创建与调用方法分析

    本文实例分析了js中匿名函数的创建与调用方法.分享给大家供大家参考.具体实现方法如下: 匿名函数就是没有名字的函数了,也叫闭包函数(closures),允许 临时创建一个没有指定名称的函数.最经常用作回调函数(callback)参数的值,很多新手朋友对于匿名函数不了解.这里就来分析一下. function 函数名(参数列表){函数体;} 如果是创建匿名函数,那就应该是: function(){函数体;} 因为是匿名函数,所以一般也不会有参数传给他. 为什么要创建匿名函数呢?在什么情况下会使用到匿

  • javascript创建函数的20种方式汇总

    工作中常常会创建一个函数来解决一些需求问题,以下是个人在工作中总结出来的创建函数20种方式,你知道多少? function sayHello(){ console.log('hello'); } function leave(){ console.log('goodbye'); } //test sayHello(); 为完成需求,赶紧声明一个函数吧 var sayHello = function(){ console.log('hello'); } var leave = function()

  • javascript的函数、创建对象、封装、属性和方法、继承

    一,function 从一开始接触到js就感觉好灵活,每个人的写法都不一样,比如一个function就有N种写法 如:function showMsg(){},var showMsg=function(){},showMsg=function(){} 似乎没有什么区别,都是一样的嘛,真的是一样的吗,大家看看下面的例子 复制代码 代码如下: ///----------------------------------------------------------------------------

  • JS中创建函数的三种方式及区别

    1.函数声明 function sum1(n1,n2){ return n1+n2; }; 2.函数表达式,又叫函数字面量 var sum2=function(n1,n2){ return n1+n2; }; 两者的区别:解析器会先读取函数声明,并使其在执行任何代码之前可以访问:而函数表达式则必须等到解析器执行到它所在的代码行才会真正被解释执行. 自执行函数严格来说也叫函数表达式,它主要用于创建一个新的作用域,在此作用域内声明的变量,不会和其它作用域内的变量冲突或混淆,大多是以匿名函数方式存在,

  • JS中使用Array函数shift和pop创建可忽略参数的例子

    在 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 框架中可以很常见的是,一个方法提

  • JS中去掉array中重复元素的方法

    今天看了廖雪峰的js教程,看到了filter的用法. 其中用它来实现去除Array中重复元素的方法在这里记录下来. Filter filter是一个常用的操作,它用于把Array的某些元素过滤掉,然后返回剩下的元素. 和map()类似,Array的filter()也接收一个函数.和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素. 利用filter,可以巧妙地去除Array的重复元素: 'use strict'; v

  • 详解JS中的compose函数和pipe函数用法

    compose函数 compose函数可以将需要嵌套执行的函数平铺,嵌套执行就是一个函数的返回值将作为另一个函数的参数.我们考虑一个简单的需求:这个需求很简单,直接一个计算函数就行: const calculate = x => (x + 10) * 10; let res = calculate(10); console.log(res); // 200 但是根据我们之前讲的函数式编程,我们可以将复杂的几个步骤拆成几个简单的可复用的简单步骤,于是我们拆出了一个加法函数和一个乘法函数: cons

  • JS中关于事件处理函数名后面是否带括号的问题

    今天总结一个关于事件处理程序的小细节.首先回顾一下事件处理的一些概念. JS中的事件处理(事件绑定)就是让某种或某些事件触发某些活动.有两种常见的形式,分别是DOM Level 0 和DOM Level 2.这两种方式最大的区别就在于DOM 0级事件处理只能用于事件冒泡,而DOM 2级事件处理却可以通过设置第三个参数来分别支持事件冒泡和事件捕获. DOM 0级事件处理一般是直接把一个函数分配给一个事件处理程序,既可以在元素中直接分配一个事件处理程序,如方式一所示;也可以在脚本中把函数分配给事件处

  • 全面了解JS中的匿名函数

    一.声明: 1. 正常函数声明: //正常函数声明 function foo(p1, p2){ return p1+p2; } 2. 匿名函数声明: //匿名函数声明 var foo= function(p1, p2){ return p1+p2; } 二.返回值: 匿名函数的返回值是一个Function对象的引用. 三.含义: 上述匿名函数代码的含义为将Function对象的一个引用赋值给变量foo. 四.相同点: 生成一个没有名称的函数体(Function对象)之后,再赋予其一个名称. 以上

  • 详谈js中数组(array)和对象(object)的区别

    •object 类型: ◦ 创建方式: /*new 操作符后面Object构造函数*/ var person = new Object(); person.name = "lpove"; person.age = 21; /*或者用对象字面量的方法*/ var person = { name: "lpove"; age : 21; } •array类型 ◦ 创建方式: `var colors = new Array("red","blu

  • js中的eval()函数把含有转义字符的字符串转换成Object对象的方法

    在项目中遇到一个问题:在前端需要把后台返回的json字符串转换成一个js中的json对象,可是从后台返回的字符串中含有转义字符:\", 在网上查到方法如下,可以处理这种情况: var page = eval("("+data+")"); 以上这篇js中的eval()函数把含有转义字符的字符串转换成Object对象的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 在 Node.js 中使用 async 函数的方法

    借助于新版 V8 引擎,Node.js 从 7.6 开始支持 async 函数特性.今年 10 月 31 日,Node.js 8 也开始成为新的长期支持版本,因此你完全可以放心大胆地在你的代码中使用 async 函数了.在这边文章里,我会简要地介绍一下什么是 async 函数,以及它会如何改变我们编写 Node.js 应用的方式. 1 什么是 async 函数 利用 async 函数,你可以把基于 Promise 的异步代码写得就像同步代码一样.一旦你使用 async 关键字来定义了一个函数,那

  • JS中的回调函数实例浅析

    本文实例讲述了JS中的回调函数.分享给大家供大家参考,具体如下: 在说回调函数之前,不妨先看一段代码,相信有点js基础的同学都能明白他的含义: document.getElementById('demo').click=function(){ alert(1); }; 这段代码其实就是一段事件回调,这样写看的其实相对模糊一些,我们不妨看下接下来的代码 document.getElementById('demo').addEventListener('click',function(){ aler

  • 在vue中利用全局路由钩子给url统一添加公共参数的例子

    有的时候我们可能有这样的需求,比如现在url为m.taoyuewenhua.com/#/ 我们需要在用户每次跳转路由的时候监控有没有abc这个参数. 如果有,后端要求我们在以后跳转任何url的时候,都要在url携带上这个参数.就变成m.taoyuewenhua.com/#/&abc=xxx; 这个参数称为"公共参数"; 那么,我们该如何做呢?因为vue中有很多组件.在每个组件都写的话,太麻烦.所以这个时候,全局路由钩子登场了.分别是 router.beforeEach 全局导航

随机推荐