immutable不可变对象

List方法

import { List } from "immutable";

// 数组对象用List包裹，变成一个不可变对象
const arr = [1, 2, 3, 4];
const arr1 = List(arr);

// 修改不可变对象会返回一个新的不可变对象

// 不可变对象List包裹的对象也有 push，unshift，concat，splice等方法
const arr2 = arr1.push(5, 6);
arr2.push(7);

// 不可变对象通过get方法获取某一项
console.log(arr2.get(0));

// 不可变对象也可以通过set方法设置某一项，第一个参数是key，第二个参数是value
const arr3 = arr2.set(10, 100);

// 不可变对象有个toJS()方法，是将不可变对象转为普通对象
console.log(arr1.toJS(), arr2.toJS(), arr3.toJS());

Map方法

import { Map } from "immutable";

// json对象用Map方法包裹，变成一个不可变对象
const mapObj = Map({ name: "numo", age: 30 });

// { name: "numo", age: 30 }
console.log(mapObj.toJS());

// 不可变对象set方法修改key和value，不会改变原不可变对象mapObj，set返回值是一个新不可变对象
const mapObj1 = mapObj.set("name", "numo1");

// toJS方法将不可变对象转为普通对象，{name: "numo1", age: 30}
console.log(mapObj1.toJS());

// 不可变对象get方法，传递一个key值，获取对应value
console.log(mapObj1.get("name"));

fromJS方法

import { fromJS } from "immutable";

// 为什么会有fromJS方法，下面例子解释
const obj = {
  name: "leo",
  age: 30,
  like: ["basketball", "book", "other"],
  films: [
    {
      at: "2022/09/10",
      name: "xxxx"
    }
  ]
};

console.log(fromJS(obj));

// 用List或者Map都只能被套的那一层会变成不可变对象，里面的子节点不会，而fromJS会将里面是List的变成List对象，是Map的变成Map对象

// 得到的obj1是Map，obj1.like是List，obj1.films是List，obj1.films[0]是Map
// 也就是用fromJS方法会将是数组的对象变成为List不可变对象，是json对象的变成Map不可变对象
const obj1 = fromJS(obj);

// 通过getIn获取，传入的是一个数组，数组里面的每一项，都是路径获取
console.log(obj1.getIn(["films", 0, "at"]));

// 也可以通过get一层一层的获取
console.log(obj1.get("films").get(0).get("at"));

// setIn 设置属性
const obj2 = obj1.setIn(["films", 0, "at"], "2000/09/10");

// updateIn 更新某一项
const obj3 = obj2.updateIn(["like", 1], (value) => value + 10);

// 还是可以通过toJS方法转为普通对象
console.log(obj1.toJS());

console.log(obj2.toJS());

console.log(obj3.toJS());