JavaScript uses arguments to implement variable length parameters

Javascript arguments explanation, realizing variable length parameters.

In C#, there is variable length parameter params[], but in js, how to implement this variable parameter?

1. Variable-length parameters

arguments are a very good solution. I never knew that javascript had this thing.

Let’s take a look at the application scenario first, using arguments to pass in any number of parameters to the js function.

function Test() {
  console.log(arguments[0]);
  console.log(arguments[1]);
  console.log(arguments[2]);
};
Test(1, 2, 3);

Output 1 2 3;

Of course, you can also put an array in the javascript function, but it is of fixed length.

2. Do not modify the arguments object directly

The arguments object is similar to an array, but in fact it is not an array. Using the call method, you may use the shift function of the array to it, but try not to try to change the arguments. It's easy to cause confusion.

If you really want to modify it, you can copy the contents of arguments to a new array, and then modify it on the new array.

var args = [].slice.call(arguments);

Bind arguments with variables to achieve cross-function access

arguments variables are implicitly bound to each function body, note that they are inside each function .

An iterator example can illustrate this problem;

function values() {
 //values有自己的arguments
 var i = 0, n = arguments.length;
 return {
  hasNext: function () {
   return i < n;  //hasNext 有自己的arguments
  },
  next: function () {
   if(i >= n)
   {
    throw new Error("已经是最后一个元素!");
   }
   return arguments[i++];  //next 有自己的arguments
  }
 }
}
  
var it = values(1, 2, 3, 4, 5, 6, 7);
console.log(it.next());  //undefined
console.log(it.next());  //undefined
console.log(it.next());  //undefined

If you want to access the arguments of the outer function, you can only access them in the inner layer through local variable binding. The above example can Transformed into

function values() {
 //values有自己的arguments
 var i = 0, n = arguments.length, ourterArgs = arguments;
 return {
  hasNext: function () {
   return i < n;  //hasNext 有自己的arguments
  },
  next: function () {
   if(i >= n)
   {
    throw new Error("已经是最后一个元素!");
   }
   return ourterArgs[i++];  //ourterArgs 外层保存的 arguments
  }
 }
}
  
var it = values(1, 2, 3, 4, 5, 6, 7);
console.log(it.next());  //1
console.log(it.next());  //2
console.log(it.next());  //3