Immutable.js 源码剖析 --Map 范例

上一片文章引见的是 List 构造。那关于 Map 构造又要怎样处置惩罚,没有 List 构造的索引,那怎么办呢? 我们把键名变成哈希值就可以啦~

HAMT:Hash Arrey Mapped Trie 。这个构造就是Map中所用到的。

immutable中的hash盘算中心代码以下:

function hashString(string) {
  // This is the hash from JVM
  // The hash code for a string is computed as
  // s[0] * 31 ^ (n - 1) + s[1] * 31 ^ (n - 2) + ... + s[n - 1],
  // where s[i] is the ith character of the string and n is the length of
  // the string. We "mod" the result to make it between 0 (inclusive) and 2^31
  // (exclusive) by dropping high bits.
  let hashed = 0;
  for (let ii = 0; ii < string.length; ii++) {
    hashed = (31 * hashed + string.charCodeAt(ii)) | 0;
  }
  return smi(hashed);
}
// v8 has an optimization for storing 31-bit signed numbers.
// Values which have either 00 or 11 as the high order bits qualify.
// This function drops the highest order bit in a signed number, maintaining
// the sign bit.
export function smi(i32) {
  return ((i32 >>> 1) & 0x40000000) | (i32 & 0xbfffffff);
}

上面只是一个盘算hash值的函数,议论的重点再下面呢。

一、Map 的构造

先看看Map的构造:

function makeMap(size, root, ownerID, hash) {
  const map = Object.create(MapPrototype);
  map.size = size;
  map._root = root;
  map.__ownerID = ownerID;
  map.__hash = hash;
  map.__altered = false;
  return map;
}

和list差别,Map中没有_tail,一切的数据都在_root内里。

再Map里,我们要分几种状况:
1、当键值对不凌驾8个
2、当键值对凌驾8个小于16个
3、当键值对凌驾16个
4、hash争执怎么办

用下面这段代码调试看看每种状况的构造:

  let jsObj = {};
  for (let i = 0; i < 8; i++) {
      jsObj[Math.random()] = Math.random();
  }
  let map1 = Immutable.Map(jsObj);
  console.log(map1);

二、ArrayMapNode

当键值对不凌驾8个的时刻采纳的是这个构造。

这类体式格局是最简朴的,一切键值对保存在 entries 内里。同时 get/set 要领都较为简朴,直接遍历一下猎取就好了。

《Immutable.js 源码剖析 --Map 范例》

从图中我们可以看到,immutable把key和value转换为一个数组的arr[0]和arr[1]来存储。

ArrayMapNode.prototype.update:

  update(ownerID, shift, keyHash, key, value, didChangeSize, didAlter) {
    .....
    const entries = this.entries;
    let idx = 0;
    const len = entries.length;
    for (; idx < len; idx++) { // 寻觅须要更新的值
      if (is(key, entries[idx][0])) {
        break;
      }
    }
    const exists = idx < len;//是不是存在这个key
    ......
    // 推断个数是不是大于8 MAX_ARRAY_MAP_SIZE的值为8
    if (!exists && !removed && entries.length >= MAX_ARRAY_MAP_SIZE) {
      return createNodes(ownerID, entries, key, value);
    }
    ......
    const newEntries = isEditable ? entries : arrCopy(entries);

    if (exists) {
      if (removed) {
        idx === len - 1
          ? newEntries.pop()
          : (newEntries[idx] = newEntries.pop());
      } else {
        newEntries[idx] = [key, value];//存在就直接把值赋值给idx的位置
      }
    } else {
      newEntries.push([key, value]);//不存在 就是新增 push一个值进去
    }
    ......
    return new ArrayMapNode(ownerID, newEntries);
  }
}

上面代码中MAX_ARRAY_MAP_SIZE的定义:

const MAX_ARRAY_MAP_SIZE = SIZE / 4;
const MAX_BITMAP_INDEXED_SIZE = SIZE / 2;
const MIN_HASH_ARRAY_MAP_SIZE = SIZE / 4;
export const SIZE = 1 << SHIFT;

三、BitmapIndexedNode

当键值对凌驾8个小于16个的时刻采纳的是这个构造。

BitmapIndexedNode 的子节点是 ValueNode或许BitmapIndexedNode。在 BitmapIndexedNode 内里查/增/改元素,都须要用到 bit-map(位图)算法,BitmapIndexedNode.bitmap 存储的是键名和存储递次的位图信息。比方 get 要领,经由过程 BitmapIndexedNode.bitmap,以及 key 名就可以猎取该键值对的分列序号,从而猎取到响应的 ValueNode。

《Immutable.js 源码剖析 --Map 范例》

BitmapIndexedNode.prototype.update:

update(ownerID, shift, keyHash, key, value, didChangeSize, didAlter) {
    if (keyHash === undefined) {
      keyHash = hash(key);//假如没有hash值盘算hash值
    }
    // 依据BitmapIndexedNode中存储的bitmap推断当前传入的key是不是在某个位置已存在。bitmap用32 位(二进制)来纪录元素是不是存在。1示意存在,0示意不存在。
  
    // 比方:keyHash 转换为二进制后为11101110000110000001101001101 ,每5位为一组,shift假定为5
    // (keyHash >>> shift)& MASK 掏出须要的5位。第一次取到从低位最先的第一个5位:01101。keyHashFrag的十进制的值为13
    // 1 << keyHashFrag 除第13位(从0最先)外,其他位都为0 即:10000000000000
    // bit & bitmap 得出bitmap的第13位是不是为1 
    // eg:bitmap=010101110111010000101011100010100   即 010101110111010000111011100010100 & 10000000000000 发明第13位为1 则存在这个元素
    const keyHashFrag = (shift === 0 ? keyHash : keyHash >>> shift) & MASK;
    const bit = 1 << keyHashFrag;
    const bitmap = this.bitmap;
    const exists = (bitmap & bit) !== 0;
    ......
    // 盘算1的数目,即算出key在BitmapIndexedNode的存储位置
    // eg:bitmap=010101110111010000111011100010100
    // bitmap & (bit - 1) 即 010101110111010000111011100010100 & 1111111111111 = 1011100010100
    // 运用 popCount 函数盘算有多少个1 盘算出 有 6 个 1
    // 即 idx = 6
    // 所以我们须要查找的元素在BitmapIndexedNode的存储位置为6
    const idx = popCount(bitmap & (bit - 1));
    // 假如这个位置有数据,掏出当前BitmapIndexedNode中对应的数据,假如不存在,置为undefined
    const nodes = this.nodes;
    const node = exists ? nodes[idx] : undefined;
    const newNode = updateNode(
      node,
      ownerID,
      shift + SHIFT,
      keyHash,
      key,
      value,
      didChangeSize,
      didAlter
    );

    if (newNode === node) {
      return this;
    }

    // 推断是不是凌驾16
    if (!exists && newNode && nodes.length >= MAX_BITMAP_INDEXED_SIZE) {
      return expandNodes(ownerID, nodes, bitmap, keyHashFrag, newNode);
    }

    ......
    // 天生新的Bitmap
    const newBitmap = exists ? (newNode ? bitmap : bitmap ^ bit) : bitmap | bit;

    // 天生新的nodes
    // eg:exists=false, idx=1状况:
    // oldArray: [vA, undefind, vC, vD]
    // newArray: [vA, newVNode, vC, vD]
    // exits=true状况,idx=8
    // 本来位置8指向新天生的BitmapIndexedNode
    const newNodes = exists
      ? newNode
        ? setAt(nodes, idx, newNode, isEditable)
        : spliceOut(nodes, idx, isEditable)
      : spliceIn(nodes, idx, newNode, isEditable);

    if (isEditable) {
      this.bitmap = newBitmap;
      this.nodes = newNodes;
      return this;
    }

    return new BitmapIndexedNode(ownerID, newBitmap, newNodes);
  }
}

这里我把popCount的源码也贴出来:

function popCount(x) {
  x -= (x >> 1) & 0x55555555;
  x = (x & 0x33333333) + ((x >> 2) & 0x33333333);
  x = (x + (x >> 4)) & 0x0f0f0f0f;
  x += x >> 8;
  x += x >> 16;
  return x & 0x7f;
}

四、HashArrayMapNode

当键值对凌驾16个采纳的是这个构造。

HashArrayMapNode 的亲子元素可以是 HashArrayMapNode/BitmapIndexedNode/ValueNode。由此看来巨量的键值对,将有 HashArrayMapNode/BitmapIndexedNode/ValueNode 组合而成,而每一个 HashArrayMapNode 最多有32个亲子元素,BitmapIndexedNode 最多有16个亲子元素。 HashArrayMapNode 类对应带的 count,代表其子元素的数目。当须要读取的时刻,直接键名的哈希值,就可以完成了

《Immutable.js 源码剖析 --Map 范例》

来一个庞大点的数据:

《Immutable.js 源码剖析 --Map 范例》

HashArrayMapNode.prototype.update:

  update(ownerID, shift, keyHash, key, value, didChangeSize, didAlter) {
    if (keyHash === undefined) {
      keyHash = hash(key);
    }
    // 盘算当前这个层级的idx
    const idx = (shift === 0 ? keyHash : keyHash >>> shift) & MASK;
    const removed = value === NOT_SET;
    const nodes = this.nodes;
    const node = nodes[idx];
    ......
    const newNode = updateNode(
      node,
      ownerID,
      shift + SHIFT,
      keyHash,
      key,
      value,
      didChangeSize,
      didAlter
    );
    ......
    if (isEditable) {
      this.count = newCount;
      this.nodes = newNodes;
      return this;
    }
    return new HashArrayMapNode(ownerID, newCount, newNodes);
  }
}
function updateNode(
  node,
  ownerID,
  shift,
  keyHash,
  key,
  value,
  didChangeSize,
  didAlter
) {
  //没有子节点了,即找到了这个值
  if (!node) {
    if (value === NOT_SET) {
      return node;
    }
    SetRef(didAlter);
    SetRef(didChangeSize);
    return new ValueNode(ownerID, keyHash, [key, value]);
  }
  // 当另有子节点,则继承递归查找
  return node.update(
    ownerID,
    shift,
    keyHash,
    key,
    value,
    didChangeSize,
    didAlter
  );
}

五、HashCollisionNode

虽然说hash争执的状况是很少的,然则也有这类状况涌现的。比方 key = ‘Aa’ key = ‘BB’,其哈希值是完整一样的,这个时刻就会启动 HashCollisionNode 对象,将雷同的哈希值的对象都放在同一个 HashCollisionNode 内里,而这内里就是简朴的线性读写数组了,没有之前的 Bitmapped 操纵,毕竟一次性不可能有太多雷同哈希值的键名涌现。

《Immutable.js 源码剖析 --Map 范例》

    原文作者:小柚子
    原文地址: https://segmentfault.com/a/1190000017130413
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞