网站修改联系方式,唐山做网站建设的公司,青岛公司的网站设计,定制网站建设公司哪家便宜JavaScript 中的对象一般是可变的(Mutable)#xff0c;因为使用了引用赋值#xff0c;新的对象简单的引用了原始对象#xff0c;改变新的对象将影响到原始对象。如 foo{a: 1}; barfoo; bar.a2 你会发现此时 foo.a 也被改成了 2。虽然这样做可以节约内存#xff0c;但当应用…JavaScript 中的对象一般是可变的(Mutable)因为使用了引用赋值新的对象简单的引用了原始对象改变新的对象将影响到原始对象。如 foo{a: 1}; barfoo; bar.a2 你会发现此时 foo.a 也被改成了 2。虽然这样做可以节约内存但当应用复杂后这就造成了非常大的隐患Mutable 带来的优点变得得不偿失。为了解决这个问题一般的做法是使用 shallowCopy(浅拷贝)或 deepCopy(深拷贝)来避免被修改但这样做造成了 CPU 和内存的浪费。什么是 Immutable Data Immutable Data 就是一旦创建就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。Immutable 实现的原理是 Persistent Data Structure(持久化数据结构)也就是使用旧数据创建新数据时要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗Immutable 使用了 Structural Sharing(结构共享)即如果对象树中一个节点发生变化只修改这个节点和受它影响的父节点其它节点则进行共享。请看下面动画immutable.js Facebook 工程师 Lee Byron 花费 3 年时间打造与 React 同期出现但没有被默认放到 React 工具集里(React 提供了简化的 Helper)。它内部实现了一套完整的 Persistent Data Structure还有很多易用的数据类型。像 Collection、List、Map、Set、Record、Seq。有非常全面的map、filter、groupBy、reducefind函数式操作方法。同时 API 也尽量与 Object 或 Array 类似。Immutable 的几种数据类型List: 有序索引集类似JavaScript中的Array。Map: 无序索引集类似JavaScript中的Object。OrderedMap: 有序的Map根据数据的set()进行排序。Set: 没有重复值的集合。OrderedSet: 有序的Set根据数据的add进行排序。Stack: 有序集合支持使用unshift()和shift()添加和删除。Range(): 返回一个Seq.Indexed类型的集合这个方法有三个参数start表示开始值默认值为0end表示结束值默认为无穷大step代表每次增大的数值默认为1.如果start end,则返回空集合。Repeat(): 返回一个vSeq.Indexe类型的集合这个方法有两个参数value代表需要重复的值times代表要重复的次数默认为无穷大。Record: 一个用于生成Record实例的类。类似于JavaScript的Object但是只接收特定字符串为key具有默认值。Seq: 序列但是可能不能由具体的数据结构支持。Collection: 是构建所有数据结构的基类不可以直接构建。用的最多就是List和Map所以在这里主要介绍这两种数据类型的API。常用API的使用fromJS()作用将一个js数据转换为Immutable类型的数据。用法fromJS(value, converter)简介value是要转变的数据converter是要做的操作。第二个参数可不填默认情况会将数组转换为List类型将对象转换为Map类型其余不做操作。import Immutable from immutableconst obj Immutable.fromJS({name:zyb, age:24})console.log(obj)toJS()作用将一个Immutable数据转换为JS类型的数据。用法value.toJS()import Immutable from immutableconst obj Immutable.fromJS({name:zyb, age:22})console.log(obj.toJS()) // {name:zyb, age:22}is()作用对两个对象进行比较。用法is(map1,map2)简介和js中对象的比较不同在js中比较两个对象比较的是地址但是在Immutable中比较的是这个对象hashCode和valueOf只要两个对象的hashCode相等值就是相同的避免了深度遍历提高了性能。import { Map, is } from immutableconst map1 Map({ a: 1, b: 1, c: 1 })const map2 Map({ a: 1, b: 1, c: 1 })map1 map2 //falseObject.is(map1, map2) // falseis(map1, map2) // true数据读取get() 、 getIn()作用获取数据结构中的数据has() 、 hasIn()作用:判断是否存在某一个key用法Immutable.fromJS([1,2,3,{a:4,b:5}]).has(0); //trueImmutable.fromJS([1,2,3,{a:4,b:5}]).hasIn([3,b]) //trueincludes()作用判断是否存在某一个value用法Immutable.fromJS([1,2,3,{a:4,b:5}]).includes(2); //trueImmutable.fromJS([1,2,3,{a:4,b:5}]).includes(2); //false 不包含字符2Immutable.fromJS([1,2,3,{a:4,b:5}]).includes(5); //false Immutable.fromJS([1,2,3,{a:4,b:5}]).includes({a:4,b:5}) //falseImmutable.fromJS([1,2,3,{a:4,b:5}]).includes(Immutable.fromJS({a:4,b:5})) //truefirst() 、 last()作用用来获取第一个元素或者最后一个元素若没有则返回undefined。代码Immutable.fromJS([1,2,3,{a:4,b:5}]).first()//1Immutable.fromJS([1,2,3,{a:4,b:5}]).last()//{a:4,b:5}Immutable.fromJS({a:1,b:2,c:{d:3,e:4}}).first() //1Immutable.fromJS({a:1,b:2,c:{d:3,e:4}}).first() //{d:3,e:4}数据修改注这里对于数据的修改是对原数据进行操作后的值赋值给一个新的数据并不会对原数据进行修改因为Immutable是不可变的数据类型。设置 set()作用设置第一层key、index的值用法set(index: number, value: T): Listset(key: K, value: V): thisList在使用的时候将index为number值设置为value。Map在使用的时候将key的值设置为value。在List中使用时若传入的number为负数则将index为sizeindex的值设置为value例若传入-1则将size-1的值设为value。若传入的number的值超过了List的长度则将List自动补全为传入的number的值将number设置为value其余用undefined补全。注跟js中不同List中不存在空位[,,,],List中若没有值则为undefined。代码实现//Listconst originalList List([ 0 ]);// List [ 0 ]originalList.set(1, 1);// List [ 0, 1 ]originalList.set(0, overwritten);// List [ overwritten ]originalList.set(2, 2);// List [ 0, undefined, 2 ]List().set(50000, value).size;// 50001//Mapconst { Map } require(immutable)const originalMap Map()const newerMap originalMap.set(key, value)const newestMap newerMap.set(key, newer value)originalMap// Map {}newerMap// Map { key: value }newestMap// Map { key: newer value }setIn()作用设置深层结构中某属性的值用法setIn(keyPath: Iterable, value: any): this用法与set()一样只是第一个参数是一个数组代表要设置的属性所在的位置删除 delete作用用来删除第一层结构中的属性用法delete(index: number): List //Listdelete(key: K): this //MapdeleteIn()用来删除深层数据用法参考setIndeleteAll() (Map独有List没有)作用用来删除Map中的多个key用法deleteAll(keys: Iterable): this代码示例const names Map({ a: Aaron, b: Barry, c: Connor })names.deleteAll([ a, c ])// Map { b: Barry }更新 update()作用对对象中的某个属性进行更新可对原数据进行相关操作用法update(index: number, updater: (value: T) T): this //Listupdate(key: K, updater: (value: V) V): this //Map代码示例Listconst list List([ a, b, c ])const result list.update(2, val val.toUpperCase())///Mapconst aMap Map({ key: value })const newMap aMap.update(key, value value value)updateIn()用法参考setIn清除 clear()作用清除所有数据用法clear(): this代码示例Map({ key: value }).clear() //MapList([ 1, 2, 3, 4 ]).clear() // List
