The Arguments object

What is?

  • Built-in local variables of other functions that are not arrow functions
  • It’s an object, an array of classes
  • Iterable, with the Symbol(symbol.iterator) attribute

role

Arguments for the scenarios I use are:

  • Used to get the argument passed in. When the length of a parameter is larger than that of a parameter, you can use this method to get extra parameters.
  • Use Arguments when rewriting methods using ES5 and ES6 implementations respectively. (Write a Coriolization function)

Some of the points

  1. It’s not really an array.
  2. The iteration.
  3. The type is [Object Arguments].
  4. Callee points to the current method. Arguments. callee throws an error in strict mode.
function test(a,b){
   	function *generator(obj){
		for(let val of obj){
			yieldval; }}console.log(arguments);
    console.log(Array.isArray[arguments]);	//false
    console.log(arguments.toString);	//[object Arguments]
    console.log(arguments.callee);		// The current method
    
    let it = generator(arguments);
    console.log(it.next());		//{value: 1, done: false}
    console.log(it.next());		//{value: 2, done: false}
    console.log(it.next());		//{value: undefined, done: true}
}
test(1.2);

Copy the code

Arguments mapping to parameters

There is a mapping between arguments and parameters, and changes made to one are made to the other. This assumes that the parameters do not use ES6 syntax: default values, parameter extensions, deconstructed assignments…

function test(a,b){
	console.log(a,arguments[0]);	/ / 1, 1
    console.log(b,arguments[1]);	/ / 2, 2
    
    a = 10;
    console.log(a,arguments[0]);	/ / 10, 10
    
    arguments[1] = 20;
    console.log(b,arguments[1]);	/ / 20, 20
}

test(1.2);
Copy the code

The mapping between arguments and the parameter does not exist when the parameter does the following.

  1. Parameters have default values
function test(a,b = 3){
	console.log(a,arguments[0]);	/ / 1, 1
    console.log(b,arguments[1]);	/ / 2, 2
    
    a = 10;
    console.log(a,arguments[0]);	/ / 10, 1
    
    arguments[1] = 20;
    console.log(b,arguments[1]);	/ / 2, 20
}

test(1.2);
Copy the code
  1. Parameter destruct assignment
function test({a, b}){
	console.log(a,arguments[0].a);	/ / 1, 1
    console.log(b,arguments[0].b);	/ / 2, 2
    
    a = 10;
    console.log(a,arguments[0].a);	/ / 10, 1
    
    arguments[0].b = 20;
    console.log(b,arguments[0].b);	/ / 2, 20
}

test({
    a:1.b:2
});
Copy the code
  1. The parameter uses the ES6 extension operator
function test(. args){
	console.log(args[0].arguments[0]);	/ / 1, 1
    console.log(args[1].arguments[1]);	/ / 2, 2
    
    args[0] = 10;
    console.log(args[0].arguments[0]);	/ / 10, 1
    
    arguments[1] = 20;
    console.log(args[1].arguments[1]);	/ / 2, 20
}

test(1.2);
Copy the code

Arguments to an array of appropriate methods

The slice method is used when the argument is initially converted from a class array to a real array.

function test(a,b){
	let argsArr = [].slice.call(arguments);
    console.log(argsArr);	/ / [1, 2]
}

test(1.2);
Copy the code

However, in bluebird’s optimization-Killers article, it is mentioned that using the slice method to convert arguments to arrays cannot be optimized by the JS engine (the slice effect on arguments prevents the JS engine from doing certain optimizations).

Suitable method:

function test(a,b){
    let argsArr = arguments.length === 1 
    				? [arguments[0]] 
    				: Array.apply(null.arguments);
    console.log(argsArr);
}
test(1.2);
Copy the code

More can be found by clicking on the link below: Arguments Use notes and optimizations

Arguments are constantly “weakened”

Arguments actually have a limited number of scenarios to use in general development, and arguments properties: callee, Symbol(symbol.iterator), etc., have better solutions.

Callee: arguments.callee is needed to find the function called, but we can just type the function name (except for anonymous functions) without doing anything.

Iterability: In general development, this is often converted to an array or used directly with the ES6 expansion operator. So that when you convert it to an array you can go through it without having to iterate.

Arguments’ role is increasingly “weakened” by the fact that ES and JS engines don’t optimize it (es6 syntax doesn’t map, etc.) and arguments have better and better alternatives for themselves and their properties.

Managing arguments

Some scenarios where arguments are not used properly:

  1. When arguments are used inside a function, assign values to declared parameters as well
function test(a,b){
	if(arguments.length < 2) b = 1;
}
Copy the code

Solution: Save the parameter to a new variable, and then modify the new parameter

function test(a,b){
    var _b = b;
	if(arguments.length < 2) _b = 1;
}
Copy the code
  1. Reveal that the arguments
function leaksArguments(){
	return arguments;
}
Copy the code
function leaksArguments(){
	let argsArr = [].slice.call(arguments);
}
Copy the code
function leaksArguments(){
	let _args = arguments;
    return function(){
		return_args; }}Copy the code

Solution: Replace the method that converts to array

function leaksArugmentsSolution(){
	let argsArr = arguments.length === 1 
    				? [arguments[0]] 
    				: Array.apply(null.arguments);
    return argsArr;
}
Copy the code
function leaksArugmentsSolution(){
	let len = arguments.length;
    let argsArr = [];
    while(len--) argsArr[len] = arguments[len];
    return argsArr;
}
Copy the code
function leaksArugmentsSolution(){
	let len = arguments.length,
    	argsArr = new Array(len);
    for(let i = 0; i< len; i++){
		argsArr[i] = arguments[i];
    }
    return argsArr;
}
Copy the code

  1. Assign to arguments

    Solution: No assignment (:D)