纯函数实例

我们看一下这一段代码：

let writer = {
    firstName:"yujue",
    lastName:"chen",
    num:10
}
if(!writer.company){
    console.log('还在学校上课')
}
//当我们需要给writer对象一个方法
function appendCompany(){
    writer.company='字节'
}
appendCompany()
console.log(writer)

我们看一下这段代码的执行结果：

在上面的代码中 writer是全局的对象，但是appendCompany()函数修改了全局对象。我们就说 appendCompany()函数不是一个纯函数。一般来说，函数内部不应该修改全局的对象。我们知道reducer是纯函数，当action发生变化时，会返回一个全新的对象。我们是否可以改写一下appendCompany()函数，让它做到和reducer一样呢？我们想想在ES6中有没有哪个API可以得到全新的对象，覆盖掉以前的对象。这是很容易就想到了Object.assign()方法。

改写appendCompany()函数如下：

function appendCompany(obj){
    let copyWriter = Object.assign({},obj)//对象拷贝
    
    copyWriter.company='字节'  
    return copyWriter
}

改写后代码和测试结果

//writer 全局
let writer = {
    firstName:"yujue",
    lastName:"chen",
    num:10
}
//函数有什么问题

function appendCompany(obj){
    let copyWriter = Object.assign({},obj)//对象拷贝
    copyWriter.company='字节'  //函数内部
    return copyWriter
}

console.log(appendCompany(writer))
  if(!writer.company){
    console.log('还在学校上课')
}
console.log(writer)

我们可以看到，调用appendCompany函数时，writer添加了company属性。但全局的writer没有被修改。

总结：什么是纯函数？

看完例子我们可以总结一下什么是纯函数了。首先这个函数的返回结果只与参数有关，其次是这个函数没有副作用。如果一个函数直接修改全局的对象，我们认为是不应该的，是不纯的。容易产生问题。

什么是immutable？

immutable 翻译过来就是 不可改变的。 immutable 是一种持久化数据，一旦被创建，就不能修改。

先看一个immutable小例子

//避免数据被修改
const { Map,fromJS } =require('immutable')  //不可变数据时
//es6 map
let a= Map({
    select:'users',
    filter:Map({name:'Cam'})
})
// 引用  a  b
let b = a.set('select','people')
console.log(a==b)  //返回结果：false。说明b不是a的复用
//react 考题  
console.log(a.get('filter') === b.get('filter'))//返回结果：true

这时候就很疑惑了，b不是a的复用，那返回结果应该是false。这时候请出一张经典的immutablet动图。

第二个immutable小例子

const obj ={
    count:0
}
const immutableState =fromJS(obj)
console.log(immutableState.get('count'))
const jsObj = immutableState.toJS()

jsObj.count=2
console.log(obj)

我们先来看一下输出结果叭！

通过第一个小例子，想必大家都能知道结果了。immutable 不会被改变。这就是强大的immutable！

总结immutable

在上面的例子中有一个fromJS，作用是将一个js数据转换为Immutable类型的数据。 immutable.js中的API可以查看文档：immutable-js.github.io/immutable-j…

在使用immutable数据时，只会拷贝改变的结点，从而提高性能。我们可以在react项目中使用immutable，下次再继续给大家写叭。

从js纯函数到immutable