带你读书之“红宝书”：第十章 函数④

「这是我参与2022首次更文挑战的第34天，活动详情查看：2022首次更文挑战」

写在前头

大多数小伙伴看技术书籍都会用“啃”来描述读书的直观感受，当然我也是一个前端小白，白的透明那种，但是我在读技术书籍感觉到“啃”的时候，我希望把我啃红宝书第四版的过程的想法，总结带给大家，以供后来者能够更快上手。

注： 本文由于作者水平原因，如有错误之处，恳请大家指正,另外随着学习的深入，体会的加深，我会不断回来更新，修改这类文章。

思维导图

image.png

简述

函数这一章其实在有一定的编程基础，比如学过一点c语言就很好读下去。整体还是易读板块。

10.6参数扩展与收集

image.png

10.6.1扩展参数

• 累加

  迭代arguments对象

  let values = [1, 2, 3, 4];
  function getSum() {
  return Array.from(arguments).reduce((pre, cur) => pre + cur, 0);
  }
  

  ②apply（）

   console.log(getSum.apply(null, values)); // 10
  

  ③扩展操作符

  使用扩展操作符可以把数组逐个元素传入函数。将可迭代对象拆分。将迭代拆分的返回值单独输入。

  扩展操作符是“...”

      let values = [1, 2, 3, 4];
    console.log(getSum(...values)); // 10
  

  使用扩展操作符时候，依然可以和其他参数混合使用。前后都可以添加参数。

      let values = [1, 2, 3, 4];
    console.log(getSum(-1,...values, 2)); // 11
  

  还可以使用多个扩展符

      let values = [1, 2, 3, 4];
    console.log(getSum(...values, ...[5,6,7])); // 28
  

• arguments对象与扩展操作符

arguments对象不知道是否使用了扩展操作符，但是他只会老老实实地把使用扩展符传入的参数依次保存到“数组”。

• 命名参数

在普通函数，箭头函数中可以使用扩展操作符用于命名参数，和默认参数结合使用。

 let values = [1, 2, 3, 4];
function countArguments() {
console.log(arguments.length);
}
countArguments(-1, ...values); // 5
countArguments(...values, 5); // 5
countArguments(-1, ...values, 5); // 6
countArguments(...values, ...[5, 6, 7]); // 7

10.6.2收集参数

• 使用扩展操作符传参

在构思函数定义时，可以使用扩展操作符把不同长度的独立参数组合为一个数组。类似arguments 对象的构造机制，只收集参数会得到一个 Array 实例。

• 收集参数前面有命名参数

  必须把扩展操作符放在末尾。

• 箭头函数

  ①不支持 arguments 对象

  ②支持收集参数的定义方式

• arguments对象与收集参数

  2者并没有什么直接关系，不会感染arguments对象存入传入的参数。

  使用收集参数并不影响 arguments 对象，它仍然反映调用时传给函数的参数