【immutable学习记录】immutable 中 Set 的用法


什么是immutable

Immutable Data 就是一旦创建,就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。Immutable 实现的原理是 Persistent Data Structure(持久化数据结构),也就是使用旧数据创建新数据时,要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗,Immutable 使用了 Structural Sharing(结构共享),即如果对象树中一个节点发生变化,只修改这个节点和受它影响的父节点,其它节点则进行共享。

其中有 3 种最重要的数据结构:

Map:键值对集合,对应于 Object,ES6 也有专门的 Map 对象
List:有序可重复的列表,对应于 Array
Set:无序且不可重复的列表

Set 的介绍及 API

// --------- Set 的介绍及 API ------------
// Set 可以理解为 value 唯一的数组,即数组中不允许出现重复的值
const {Set, OrderedSet} = require('immutable')

// Set 是工厂方法,不允许new来实例化,会自动去重

const set = Set([1,2,3,4,5,2,2,2,1])
console.log('set:',set)

// add 添加值
const add1 = set.add(6)
console.log('add1:', add1)

// delete 删除值  ---- 删除的是值,由于是无序的,所以没有下标的概念
const del1 = set.delete(2)
console.log('del1:', del1)

// clear 清空并且返回新的set
const clear1 = set.clear()
console.log('clear1:', clear1)

// union N 个 set 合并成一个set ----- 并集
const s1 = Set([1,2,3])
const s2 = Set(['x','y','z'])
const s3 = Set(['a',666,999])
const union = s1.union(s2,s3)
console.log('union:', union)

// intersect 取 N 个set的交集  -------交集
const in1 = Set([1,2,3,4,5,6])
const in2 = Set([2,4,6,8,10])
const resultIntersect = in1.intersect(in2)
console.log('resultIntersect:', resultIntersect)

// subtract 从 set 除去 一些值 -------删除多个
const sub1 = Set([1,3,2,4,5,6,7,8,9])
const sub2 = sub1.subtract([1,9])
console.log('sub2:', sub2)

// forEach 循环
const each1 = Set(['x','y','z'])
each1.forEach((val,key) => console.log(key, val))  
// 由于没有下标,所以 value 和 key 是一样的

// get 取得值 
const setArr = Set(['x','y','z'])
console.log('setArr.get(2):', setArr.get(2))  //无序的,拿不到值
console.log('get:', setArr.get('y'))

// has 判断是否有指定的key
console.log('has:', setArr.has('y'))

// includes 判断是否包含指定的value
console.log('includes:', setArr.includes('y'))

// rest 除了第一个元素以外的其他元素
const r1 = Set([1,2,3,4,5,6])
const r2 = r1.rest()
console.log('r2:', r2)

// butLast 除了最后一个的其余元素
const b1 = Set([1,2,3,4,5,6])
const b2 = b1.butLast()
console.log('b2:', b2)

// skip(number) 略过前 N 个元素,取得其余的元素
const sk1 = Set([1,2,3,4,5,6])
const sk2 = sk1.skip(3)
console.log('sk2:', sk2)   // 略过前三个,取得后面的元素

// skipLast(number) 略过最后 N 个元素,取得其余的元素
const skL1 = Set([1,2,3,4,5,6])
const skL2 = skL1.skipLast(3)
console.log('skL2:', skL2)   // 略过后三个,取得后面的元素

// skipWhile((value: T, key: T, iter: this) => boolean) 从左往右做检查,检查到while中的判断条件为false时,取得当前false及false后面的元素
const skW1 = Set(['hello','world','good','bad','just','little'])  
const skW2 = skW1.skipWhile(item => item.indexOf('o') !== -1)  //item.indexOf('o') !== -1 ------- 意思是不包含 o
console.log('skW2:', skW2)   // 略掉包含 o 的,取得后面不包含 o 的元素

// skipUntil((value: I, key: T, iter: this) => boolean) 从左往右做检查,检查到until中的判断条件为true时,取得当前true及true后面的元素
const skU1 = Set(['hello','world','good','bad','just','little'])  
const skU2 = skU1.skipUntil(item => item.indexOf('o') === -1)  // item.indexOf('o') === -1 ------- 意思是包含 o
// const skU21 = skU1.skipUntil(item => !/o/g.test(item)) // 正则表达式,表达不包含 o
console.log('skU2:', skU2)   // 略过包含 o 的,取得后面的不包含 o 的元素

// take (number) 取得前 N 个元素
const take1 = Set([1,2,3,4,5,6])
const take2 = take1.take(2)     // 取前 2 个
console.log('take2:', take2)

// takeLast (number) 取得最后 N 个元素
const takeL1 = Set([1,2,3,4,5,6])
const takeL2 = takeL1.takeLast(4)   // 取后 4 个
console.log('takeL2:', takeL2)


// takeWhile((value: T, key: T, iter: this) => boolean) 从左往右做检查,检查到while中的判断条件为false时,取得当前false及false后面的元素
const takeW1 = Set([2,4,6,8,1,3,5,7,9])  
console.log('tabkeW1:', takeW1)   //  takeW1 是无序的,因此需要注意
const takeW2 = takeW1.takeWhile(item => item % 2 === 0)  
console.log('takeW2:', takeW2)   // 略掉奇数,取得后面偶数的元素

// takeUntil((value: I, key: T, iter: this) => boolean) 从左往右做检查,检查到until中的判断条件为true时,取得当前true及true后面的元素


// 有序的 Set
const OSet = OrderedSet([2,4,6,8,1,3,5,7,9])
console.log('Oset:', OSet)
const result = OSet.takeWhile(item => item % 2 === 0)  
console.log('result:', result)

// sort 排序方法  sort((valueA: T, valueB: T) => number)
// 升序: valueA - valueB
const sort1 = OSet.sort(( valA, valB) =>valA - valB)
console.log('sort1:', sort1)

// 降序: valueB - valueA
const sort2 = OSet.sort(( valA, valB) =>valB - valA)
console.log('sort2:', sort2)

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 React ,我们通常使用 Immutable 数据结构来管理应用的状态。Immutable 是一个不可变的数据结构库,它的主要思想是将数据作为不可变的值来处理,而不是作为可变的对象。 使用 Immutable 的好处是可以避免因为状态的可变性而引起的一些问题,例如在 React ,当状态发生变化时,如果直接修改状态对象,React 可能无法检测到状态的变化,从而导致组件不会重新渲染。而使用 Immutable 数据结构,我们可以通过创建新的不可变对象来更新状态,从而保证 React 能够正确地检测到状态的变化,并且在需要重新渲染组件时能够及时更新。 Immutable 数据结构通常使用一些特殊的方法来实现不可变性,例如 `set`、`get`、`update` 等方法。使用这些方法可以保证原始数据结构不会被修改,而是返回一个新的不可变对象。例如: ``` import { Map } from 'immutable'; const state = Map({ counter: 0 }); // 创建新的不可变对象 const newState = state.set('counter', state.get('counter') + 1); console.log(state.get('counter')); // 0 console.log(newState.get('counter')); // 1 ``` 在这个例子,我们使用 Immutable的 `Map` 类创建了一个不可变的状态对象,并通过 `set` 和 `get` 方法来更新和获取状态的值。更新状态时,我们创建了一个新的不可变对象 `newState`,而原始的状态对象 `state` 并没有被修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值