JS中的arguments、纯函数、组合函数

1. JS的arguments

arguments 是一个 对应于 传递给函数的参数 的 类数组对象

注意(是一个对象，不是一个数组)

arguments是一个类数组对象，可以像数组一样获取长度，索引值对应值，但是不可以调用数组的方法

function foo(num1, num2, num3) {
  console.log(arguments)  // 对象：Arguments(5){10, 20, 30, 40, 50，callee， ·····}
  
  // 常见的对arguments的操作
  // 1. 获取参数的长度
  console.log(arguments.length) //5
  // 2. 根据索引值获取某一参数
  console.log(arguments[2])  // 30
  // 3. 属性callee  获取当前arguments所在的函数
  console.log(arguments.callee)
}

foo(10, 20, 30, 40, 50) 

arguments可以转换成array, 如下代码

function foo(num1, num2) {
	// 1. 自己遍历
	var  newArr = []
  for(var i = 0; i < arguments.length; i++) {
    newArr.push(arguments[i] * 10)
  }
	console.log(newArr)  //[100, 200, 300, 400, 500]
  
  // 2. array.prototype.slice  数组内置方法（分割函数） slice(arr, start(数组arr开始截取索引值)， end(数组arr截取结束	         位置索引值))//start end 可选填，  不填默认整个arr截取
  var newArr2 = Array.prototype.slice.call(arguments)
  console.log(newArr2)
  
  // 3. [].slice.call
  var newArr3 = [].slice.call(arguments)
  console.log(newArr3)
  
  // 4. ES6语法
  var newArr4 = Array.from(arguments)
  console.log(newArr4)
  
  // 5. 展开运算符
  var newArr5 = [...arguments]
  console.log(newArr5)
}
// arguments一般用在对一个函数想要传递多个参数时，且需要用到传递的多余参数时通过arguments获取
foo(10, 20, 30, 40, 50)

arguments一般用在对一个函数想要传递多个参数时，且需要用到传递的多余参数时通过arguments获取;

箭头函数中没有arguments

var foo = () => {
	console.log(arguments)  // 报错 浏览器编译时 在箭头函数的作用域中没有找到
                            // ->全局作用域也没有arguments
  						    // 浏览器全局没有arguments 
							// node 环境运行时，有arguments对象
}
foo()

2. JS的纯函数

2.1 理解纯函数

满足要求： ①确定的输入，产生确定的输出。 ②函数在执行过程中，不能产生副作用

2.2 副作用的理解

表示在执行一个函数时，除了返回函数值外，还对调用函数产生了附加的影响，比如修改了全局变量，修改参数或者改变外部的存储;

纯函数例子：

// 1. 相同的输入 一定产生相同的输出
// 2. 在执行过程中不会产生任何的副作用
function foo(num1, num2) {
  return num1 * 2 + num2 * num2
}  // 纯函数

var name = "abc"
function bar() {
  console.log("bar其他的代码执行")
  name = "cba"  // 修改了外部变量的值，产生了副作用
}
bar()  // 不是一个纯函数

2.3 纯函数的优势

①只单纯实现自己的业务逻辑即可，不需要关心传入的内容是如何获得的或者依赖其他的外部变量是否已经发生了修改;

②使用时，输入的内容不会被任意篡改，并且自己确定的输入，一定会有确定的输出;

2.4 数组方法中的两个函数对比

①

slice 只要传入一个start/end，那么对一个同一个数组来说， 它会给我们返回确定的值slice 函数本身不会修改原来的的数组slice 函数就是一个纯函数

②

splice 函数在执行时，会修改调用的数组本身对象，修改这个操作就是产生的副作用splice 函数就不是一个纯函数

var names = ["abc", "cba", "nba", "dna"]
//slice 只要传入一个start/end，那么对一个同一个数组来说， 它会给我们返回确定的值
//slice 函数本身不会修改原来的的数组
//slice 函数就是一个纯函数
var newNames1 = names.slice(0, 3)
console.log(newNames1) // ["abc" ,"cba", "nba"]
console.log(names) // ["abc" ,"cba", "nba", "dna"]

// splice 函数在执行时，会修改调用的数组本身对象，修改这个操作就是产生的副作用
// splice 函数就不是一个纯函数
var newNames2 = names.splice(2)
console.log(newNames2) // ["nba", "dna"]
console.log(names) // ["nba", "dna"]

 3. JS的组合函数

将两个函数封装的一个函数里去执行的过程，即称为组合函数

function double(num) {
  return num * 2
}

function square(num) {
  return num ** 2
}
var count = 10
var result = square(double(count))
console.log(result)  // 400

function composeFn(m, n) {
  return function (count) {
    n(m(count))
  }
}

var newFn = composeFn(double, square)
console.log(newFn(10))  // 400

实现通用的组合函数

// 实现自动组合
function gfcompose(...fns) {
  var length = fns.length
  for(var i = 0; i < length; i++) {
    if(typeof fns[i] !== 'function') {
      throw new TypeError("要求传入函数类型")
    }
  } 
  function compose(...args) {
    var index = 0
    // 判断length是否有值， 进行函数的依次调用
    var result = length ? fns[index].apply(this, args) : args
    while(++index < length) {
      result =  fns[index].call(this, result)
    }
    return result
  }
  return compose
}

function double(m) {
  return m * 2
}

function square(n) {
  return n ** 2
}

var newFn = gfcompose(double, square)
console.log(newFn(10))  // 400