关于Immutable API的简单使用

ImmutableJS官网地址：官网地址
可以在官网中进行深层学习，此文只介绍Immutable常用的三个API ：Map, fromJS, List
说明此处采用CDN引入，进行简单的演示

1.Immutable的简单说明

（1）为什么要使用ImmutableJS？

• 在react 开发，Vue.js开发，以及Angular 等的开发中都会强调数据的不可变性，实际上在整个JavaScript开发中数据的不可变性十分重要，数据可变行会引发很多的问题，尤其是在大型项目之中。
• 在传统解决这种问题时经常会用到将对象进行简单的浅层拷贝，比如使用ES6的扩展运算符。这种方式在功能上可以确保数据的不可变性，但在性能方便有所缺陷，当遇到对象较大的情况时会损耗内存空间，造成内存空间的浪费。
• 为了保持数据的不可变性以及不造成内存空间的大量损耗，则会选择ImmutableJS。

（2）ImmutableJS的重点作用

• 在改变对象中数据时总是会生成一个新的对象，不会修改原始对象的数据，保持了数据的不可变性。
• 新的对象会尽可能的使用原来对象的相关内存空间，进行复用，极大节省内存空间的占用，即实现了结构共享（内部算法Persistent DataStructure（持久化数据结构或一致性数据结构））。
• 简单总结：保持数据的不可变性，并极大的节省内存空间，

2.CDN引入与Immutable定义

引入

	<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.min.js"></script>

定义

	const im = Immutable;

3.Map的基本使用

Map的作用： 将对象变为一个immutable对象（实现的是浅层转换）

//    一、 Map的使用： 将对象变为一个immutable对象
       const info = {
           name: "kobe",
           friend: {
               name: "jams",
               age: 25
           }
       }
       
       //1.将上面的info对象改变成为一个immutable对象
       const infoIM = im.Map(info);

       const obj = infoIM; //这里的obj是info对象，info的原始版
       //2.修改info的值，返回新的对象，原始的info不发生改变，新对象是原始对象浅层比较后的结果
        const infoIM2 = infoIM.set("name", "why");   //这里注意，写数据的时候双引号“name”， 直接写 name 是undefined
        //这里使用set方法对info对象的修改，会产生一个新的对象，原始的info对象没有发生改变，即info发生改变的时候，obj对象没有跟着改变
    
        // 接下来获取数据，验证数据是否发生改变，取数据的时候要使用get方法
        console.log(obj.get("name")); //取到的是kobe
        console.log(infoIM2.get("name")); //取到的是why

4. fromJS的基本使用

fromJS作用：能将一个对象不管嵌套多少层，都转换为immutable类型对象

       // 在前面：info对象是一个嵌套的对象，Map函数只会将最外层的数据转化为immutable类型，而嵌套在内的friend并没有转换为immutable类型
        // 也就是说friend是一个普通的对象，并不是一个immutable类型的对象

        // fromJS能将一个对象不管嵌套多少层，都转换为immutable类型对象
        const InfoIM = im.fromJS(info);
        console.log(InfoIM.get("friend"));  //friend这时候已经不是一个普通的对象

from JS与Map的对比：
Map可以对一个对象进行浅层的转换，而fromJS会对一个对像进行深层的转换，用于多层嵌套的对象

5.List的基本使用

List作用： 将一个数组类型的数组转换为一个immutable类型的数组

//List的使用  使用时一定记着大写首字母
      const names = ["abc", "cba", "nba"];
    //   const arr = names;
    //   names[0] = "why"; //改变数据name
    //   console.log(arr);  //arr也发生改变
    
    //   需求：在names发生改变的时候， arr中的数据不发生改变

      const namesIM = im.List(names);  //将数组变成一个immutable类型
      const arr2 = namesIM.set(0, "why");  //对nameIM中下标为0的数据进行修改，修改后返回一个新数组。原来的nameIM的值不发生改变
    //验证 namesIM的值是否发生改变
      console.log(namesIM.get(0));  //abc
      console.log(arr2.get(0));  //why

6.总结

（1）三种转换：

对象转换为Immutable对象：Map
列表转换为Immutable列表：List
深层转换：fromJS

（2）两种基本操作：

修改数据： set
获取数据：get