函数JS

3.解构参数
在JS函数参数中，咱特别喜欢的是解构的特性。可以将内联参数的对象或数组进行解构。这个特性使得从参数对象中提取一些属性非常有用

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

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

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

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

{name = ‘Unknown’} ={} 默认为空对象。
可以使用组合不同类型解构的所有功能。例如，让我们对同一个参数使用对象和数组解构。

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

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

[{name}]的解构较为复杂，它提取数组的第一项，然后从中对象读取name属性。
4. arguments 对象
JS 函数的另一个很好的特性是能够用可变参数调用同一个函数。这样可以使用 arguments 对象来获取传入的所有参数。
arguments对象是所有（非箭头）函数中都可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。
例如，对函数的参数求和:

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 是一个对应于传递给函数的参数的类数组对象。
有个问题是，每个函数作用域都定义了自己的arguments对象。因此，可能需要一个额外的变量来访问外部函数作用域arguments：

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

4.1 箭头函数情况
有一种特殊情况:箭头w函数中没有arguments 。

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

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

但这问题不。可以使剩余参数访问箭头函数内的所有参数。来 look look。
5. 剩余参数
剩余参数语法允许咱们将一个不定数量的参数表示为一个数组。
老样子，来 see see。

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

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

…numbers是一个剩余参数，它将成为一个由剩余参数组成的真数组[5,6]。由于numbers 是一个数组，所以就可以使用数组自有方法reduce(与类数组对象的参数相反)。
如果不想在剩余参数中收集所有参数，则可以组合常规参数和剩余参数。

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 是一个常规参数，它获取第一个参数的值。然后剩下的参数…numbers 接收剩余的参数。
剩余参数和 arguments对象的区别
剩余参数和 arguments对象之间的区别主要有三个：

剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参。

arguments对象不是一个真正的数组，而剩余参数是真正的 Array实例，也就是说你能够在它上面直接使用所有的数组方法，比如 sort，map，forEach或pop。

arguments对象还有一些附加的属性（如callee属性）。

猜你喜欢