05.arguments详解

一、认识arguments

• arguments 是一个对应于传递给函数的参数的类数组(array-like)对象
• array-like意味着它不是一个数组类型，而是一个对象类型：

  • 但是它却拥有数组的一些特性，比如说length，比如可以通过index索引来访问；

  • 但是它却没有数组的一些方法，比如forEach、map等；

    

二、常见的对arguments的操作

1. 获取参数的长度
2. 根据索引值获取某一个参数
3. calee获取当前arguments所在的函数

   • 代码

     function foo(num1,num2,num3){
     
         console.log(arguments.callee)
     
     }
     
     foo(1,2,3)
     

   • 输出结果

     

三、把arguments转化成数组的几种方法

因为arguments没有数组的一些方法，比如forEach、map等，所以我们可以利用一些方法，把它转换成数组

1. 方法一

自己遍历arguments中所有的元素

• 代码

  function foo(num1,num2){
  
      var newArr = []
  
      for (var i = 0 ;i < arguments.length ; i++){
  
          newArr.push(arguments[i])
  
      }
  
      console.log(newArr);
  
  }
  
  foo(1,2,3,4,5)
  

• 输出结果

  

2. 方法二

利用slice

• 这里顺便提一下slice内部实现的原理

• 代码

  Array.prototype.xsxslice = function(start,end){
  
      var arr = this
  
      start = start || 0
  
      end = end || arr.length
  
      console.log(this);
  
      var arr = this
  
      var newArray = []
  
      for(var i = start; i < end ;i++){
  
          newArray.push(arr[i])
  
      }
  
      return newArray
  
  }
  
  var newArr = Array.prototype.xsxslice.call(['a','b','c'])
  
  var names = ['d','e','f']
  
  var newNames = names.xsxslice(1,3)
  
  console.log(newNames,'新的');
  
  var newArray = Array.prototype.xsxslice.call(['m','n','o'],1,3)
  
  console.log(newArray,'新的');
  

• 输出结果

  

所以我们可以利用slice来进行数组的转换

• 代码

  function foo(num1,num2,num3){
  
      var newArr2 = Array.prototype.slice.call(arguments)
  
      console.log(newArr2);
  
      var newArr3 = [].slice.call(arguments)
  
      console.log(newArr3);
  
  }
  
  foo(22,33,44)
  

• 输出结果

  

3. 方法三

ES6的语法

• 代码

  //第一种
  
  function foo1(num1,num2,num3){
  
      var newArr4 = Array.from(arguments)
  
      console.log('newArr4',newArr4);  
  
  }
  
  foo1(1,2,3)
  
  //第二种
  
  function foo2(num1,num2,num3){
  
      var newArr5 = [...arguments]
  
      console.log('newArr5',newArr5);
  
  }
  
  foo2(4,5,6)
  

• 输出结果

  

四、箭头函数中没有arguments

• 箭头函数是不绑定arguments的，所以我们在箭头函数中使用arguments会去上层作用域查找：