前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航

梳理Immutable常用API

首页
2018-02-04 16:10:24
Front-End
Immutablereact

# 一、fromJS

  • 作用:是最最常用的将原生JS数据转换为ImmutableJS数据的转换方法,默认将原生JS的Array转为List,Object转为Map
Immutable.fromJS({
  a: {
    b: [1, 2, 3],
    c: 40
  }
});
// 得到
Map {
  "a": Map {
    "b": List [1, 2, 3],
    "c": 40
  }
}

// 常见
const t1 = Immutable.fromJS({a: {b: [10, 20, 30]}, c: 40});
console.log(t1);

// 不常用
const t2 = Immutable.fromJS({a: {b: [10, 20, 30]}, c: 40}, function(key, value) {
    // 定制转换方式,下这种就是将Array转换为List,Object转换为Map
    const isIndexed = Immutable.Iterable.isIndexed(value);
    return isIndexed ? value.toList() : value.toOrderedMap();
    // true, "b", {b: [10, 20, 30]}
    // false, "a", {a: {b: [10, 20, 30]}, c: 40}
    // false, "", {"": {a: {b: [10, 20, 30]}, c: 40}}
});
console.log(t2);
@前端进阶之旅: 代码已经复制到剪贴板

# 二、toJS

  • 作用:将一个Immutable数据转换为JS类型的数据
  • 用法:value.toJS()

# 三、is

  • 作用:对两个对象进行比较
  • 用法:is(map1,map2)
import { Map, is } from 'immutable'
const map1 = Map({ a: 1, b: 1, c: 1 })
const map2 = Map({ a: 1, b: 1, c: 1 })

map1 === map2   //false

Object
fe
  • 一、fromJS
  • 二、toJS
  • 三、is
  • 四、List 和 Map
    • 4.1 创建
    • 4.2 判断
    • 4.3 长度
      • 4.3.1 size 获取List/Map的长度**
      • 4.3.2 count()
    • 4.4 数据读取
      • 4.4.1 get() 、 getIn()
      • 4.4.2 has() 、 hasIn()
      • 4.4.3 includes()
      • 4.4.4 first() 、 last()
    • 4.5 数据修改
      • 4.5.1 set()
      • 4.5.2 setIn()
      • 4.5.3 deleteIn()
      • 4.5.4 更新 update()
      • 4.5.5 clear()
    • 4.6 List中的删除与插入
      • 4.6.1 数组方法
    • 4.7 关于merge
    • 4.8 序列算法
      • 4.8.1 concat()
      • 4.8.2 map()
      • 4.8.3 mapKey()
      • 4.8.4 mapEntries
      • 4.8.5 filter
      • 4.8.6 reverse
      • 4.8.7 sort & sortBy
      • 4.8.8 groupBy
    • 4.9 查找数据
      • 4.9.1 indexOf lastIndexOf
      • 4.9.2 findIndex() 、 findLastIndex()
      • 4.9.3 find() 、 findLast()
      • 4.9.4 findKey() 、 findLastKey()
      • 4.9.5 findEntry() 、 findLastEntry()
      • 4.9.6 keyOf() lastKeyOf()
      • 4.9.7 max() 、 maxBy()
      • 4.9.8 min() 、 minBy()
    • 4.10 创建子集
      • 4.10.1 slice()
      • 4.10.2 rest()
      • 4.10.3butLast()
      • 4.10.4 skip()
      • 4.10.5 skipLast()
      • 4.10.6 skipWhile()
      • 4.10.7 take()
      • 4.10.8 takeLast()
      • 4.10.9 takeWhile()
    • 4.11 处理数据
      • 4.11.1 reduce()
      • 4.11.2 reduceRight()
      • 4.11.3 every()
      • 4.11.4 some()
      • 4.11.5 join()
      • 4.11.6 isEmpty()
      • 4.11.7 countBy()

← pm2用法之ecosystem部署nodejs项目VS Code折腾记 →