美文网首页
从arguments对象到rest参数,你应该知道的小知识

从arguments对象到rest参数,你应该知道的小知识

作者: Promi5e | 来源:发表于2019-01-21 17:02 被阅读0次

    前 言

    关于arguments对象的定义就不再赘述,但是强调一下它只是一个类数组,具有length属性,并且可以通过 arguments[index] 的方式取值。而rest参数是es6新特性,它可以看做arguments对象的升级版,rest参数是一个数组,功能更加强大,同时还解决了箭头函数中获取参数列表的问题。

    arguments对象

    在js里,函数参数的个数并不是函数声明时确定的,而是函数调用时确定的。此时arguments对象就应运而生。
    看如下代码:

    function fn(){
      console.log(arguments.length);
      console.log(arguments[0]);
    }
    
    fn('a','b')
    // 2
    // 'a'
    

    arguments对象比较常用的方法就是,可以根据实参个数重构代码。

    function fn(){
      switch(arguments.length){
        case 0:
          // ...
          break;
        case 1:
          // ...
          break;
        case 2:
          // ...
          break;
      }
    }
    

    arguments对象有个callee属性,callee属性返回当前函数的引用,做匿名递归操作时就是它的舞台:

    var sum= function(n){
      if(n === 1){
        return 1;
      }
      return n + arguments.callee(--n);  // 等价于:return n + sum(--n)
    }
    
    sum(10)  // 55
    

    rest参数

    rest参数写法为(...变量名),其强大就在于它是一个数组,可以直接使用Array对象的所有方法。

    function fn(...rest){
      console.log(Array.isArray(rest));
    }
    
    fn('test')  // true
    

    需要注意的是:rest参数只能作为函数的最后一个参数,否则报错。

    在箭头函数中,arguments对象会指向其外部的arguments对象(类似this),如果该箭头函数不在任何普通函数内部,那就会报错。

    function fn1(){
      console.log(arguments);
      (() => {
        console.log(arguments);
      })('sub')
    }
    
    let fn2 = () => {
      console.log(arguments);
    }
    
    function fn3(){
      ((...rest) => {
        console.log(rest);
      })('fn3')
    }
    
    fn1('fn1');
    // Arguments ["fn1", callee: ƒ, Symbol(Symbol.iterator): ƒ]
    // Arguments ["fn1", callee: ƒ, Symbol(Symbol.iterator): ƒ]
    fn2('fn2');
    // Uncaught ReferenceError: arguments is not defined
    fn3();
    // ["fn3"]
    

    本篇就说到这里,如有错误之处,请不吝赐教!

    相关文章

      网友评论

          本文标题:从arguments对象到rest参数,你应该知道的小知识

          本文链接:https://www.haomeiwen.com/subject/qypcjqtx.html