Function JS

3. Deconstruction parameters
Among the JS function parameters, what we particularly like is the feature of deconstruction. You can deconstruct objects or arrays of inline parameters. This feature makes it very useful to extract some attributes from the parameter object

function greet({ name }) {
  return `Hello, ${name}!`;
}

const person = { name: '前端小智' };
greet(person); // => 'Hello, 前端小智!'

{ name }是应用于对象解构的参数。
当然也可以结合默认参数：
function greetWithDefault({ name = '无名氏' } = {}) {
  return `Hello, ${name}!`;
}

greetWithDefault(); // => 'Hello, 无名氏!'

{name ='Unknown'} ={} The default is an empty object.
All functions that combine different types of deconstruction can be used. For example, let's use object and array destructuring for the same parameter.

function greeFirstPerson([{ name }]) {
  return `Hello, ${name}!`;
}

const persons = [{ name: '王小智' }, { name: '王大治'}];
greeFirstPerson(persons); // => 'Hello, 王小智!'

The deconstruction of [{name}] is more complicated. It extracts the first item of the array and then reads the name attribute from the object.
4.
Another nice feature of the arguments object JS function is the ability to call the same function with variable parameters. So you can use the arguments object to get all the parameters passed in.
The arguments object is a local variable available in all (non-arrow) functions. You can use the arguments object to refer to the parameters of the function in the function.
For example, to sum the parameters of a function:

function sumArgs() {
  console.log(arguments); // { 0: 5, 1: 6, length: 2 }
  let sum = 0;
  for (let i = 0; i < arguments.length; i++) {
    sum += arguments[i];
  }
  return sum;
}

sumArgs(5, 6); // => 11

arguments is an array-like object corresponding to the parameters passed to the function.
The problem is that each function scope defines its own arguments object. Therefore, an additional variable may be needed to access the external function scope arguments:

function outerFunction() {
  const outerArguments = arguments;
  return function innerFunction() {
    // outFunction arguments
    outerArguments[0];
  };
}

4.1 Arrow function case
There is a special case: there are no arguments in the arrow w function.

const sumArgs = () => {
  console.log(arguments);
  return 0;
};

// throws: "Uncaught ReferenceError: arguments is not defined"
sumArgs();

But this problem is not. You can make the remaining parameters access all the parameters in the arrow function. Come and look.
5. Remaining parameters The
remaining parameter syntax allows us to represent an indefinite number of parameters as an array.
As usual, come and see.

function sumArgs(...numbers) {
  console.log(numbers); // [5, 6]
  return numbers.reduce((sum, number) => sum + number);
}

sumArgs(5, 6); // => 11

…Numbers is a remaining parameter, it will become a true array of remaining parameters [5,6]. Since numbers is an array, you can use the array's own method reduce (as opposed to the parameter of an array-like object).
If you don't want to collect all the parameters in the remaining parameters, you can combine the regular parameters and the remaining parameters.

function multiplyAndSumArgs(multiplier, ...numbers) {
  console.log(multiplier); // 2
  console.log(numbers);    // [5, 6]
  const sumArgs = numbers.reduce((sum, number) => sum + number);
  return multiplier * sumArgs;
}

multiplyAndSumArgs(2, 5, 6); // => 22

multiplier is a regular parameter, it gets the value of the first parameter. Then the remaining parameters...numbers receive the remaining parameters.
The difference between the
remaining parameters and the arguments object There are three main differences between the remaining parameters and the arguments object:

The remaining parameters only contain the actual parameters without corresponding formal parameters, and the arguments object contains all the actual parameters passed to the function.

The arguments object is not a real array, and the remaining parameters are real Array instances, which means you can directly use all array methods on it, such as sort, map, forEach or pop.

The arguments object has some additional properties (such as callee properties).

Guess you like