JS_02_纯函数

一、概念

1. 确定的输入，一定会产生确定的输出（输入相同的情况下，输出也相同）
2. 函数在执行的过程中，不会产生副作用（不改变外部的东西（全局变量，参数等））

二、数组的两个函数的对比

组件的话：不是纯函数可能会产生bug，多次引用组件，修改的话会出现问题

所有的React组件必须像纯函数一样保护他们的props不被修改

var names = ["abc", "cba", "nba", "dna"]

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


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

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

// bar不是一个纯函数, 因为它修改了外界的变量
var name = "abc" 
function bar() {
  console.log("bar其他的代码执行")
  name = "cba"
}
bar()
console.log(name)

// baz也不是一个纯函数, 因为我们修改了传入的参数
function baz(info) {
  info.age = 100
}
var obj = {name: "why", age: 18}
baz(obj)
console.log(obj)