seamless-immutable: JS data structures which are backwards-compatible with normal Arrays an…

综合编程 2017-08-13


Immutable JS data structures which are backwards-compatible with normal Arrays and Objects.

Use them in for
loops, pass them to functions expecting vanilla JavaScript data structures, etc.

var array = Immutable(["totally", "immutable", {hammer: "Can’t Touch This"}]);

array[1] = "I'm going to mutate you!"
array[1] // "immutable"

array[2].hammer = "hm, surely I can mutate this nested object..."
array[2].hammer // "Can’t Touch This"

for (var index in array) { console.log(array[index]); }
// "totally"
// "immutable"
// { hammer: 'Can’t Touch This' }

JSON.stringify(array) // '["totally","immutable",{"hammer":"Can’t Touch This"}]'

This level of backwards compatibility requires ECMAScript 5
features like Object.defineProperty
and Object.freeze
to exist and work correctly, which limits the browsers that can use this library to the ones shown in the test results below. (tl;dr IE9+


Whenever you deeply clone large nested objects, it should typically go much faster with Immutable
data structures. This is because the library reuses the existing nested objects rather than instantiating new ones.

In the development build, objects are frozen
. (Note that Safari is relatively slow to iterate over frozen objects
.) The development build also overrides unsupported methods (methods that ordinarily mutate the underlying data structure) to throw helpful exceptions.

The production (minified) build does neither of these, which significantly improves performance.

We generally recommend to use the "development" build that enforces immutability (and this is the default in Node.js). Only switch to the production build when you encounter performance problems. (See #50 for how to do that in Node or using a build tool - essentially do explicitely refer to the production build.)

Intentional Abstraction Leaks

By popular demand, functions, errors, dates, and React
components are treated as immutable even though technically they can be mutated. (It turns out that trying to make these immutable leads to more bad things than good.) If you call Immutable()
on any of these, be forewarned: they will not actually be immutable!


seamless-immutable is tightly focused on the mechanics of turning existing JavaScript data structures into immutable variants. Additional packages are available to build on this capability and enable additional programming models:

CursorCompact Cursor Library built on top of the excellent seamless-immutable. Cursors can be used to manage transitions and manipulations of immutable structures in an application.

API Overview

returns a backwards-compatible immutable representation of whatever you pass it, so feel free to pass it absolutely anything that can be serialized as JSON. (As is the case with JSON, objects containing circular references are not allowed. Functions are allowed, unlike in JSON, but they will not be touched.)

Since numbers, strings, undefined
, and null
are all immutable to begin with, the only unusual things it returns are Immutable Arrays and Immutable Objects. These have the same ES5 methods
you’re used to seeing on them, but with these important differences:

  1. All the methods that would normally mutate the data structures instead throw ImmutableError
  2. All the methods that return a relevant value now return an immutable equivalent of that value.
  3. Attempting to reassign values to their elements (e.g. foo[5] = bar
    ) will not work. Browsers other than Internet Explorer will throw a TypeError
    if use strict
    is enabled, and in all other cases it will fail silently.
  4. A few additional methods have been added for convenience.

For example:

Immutable([3, 1, 4]).sort()
// This will throw an ImmutableError, because sort() is a mutating method.

Immutable([1, 2, 3]).concat([10, 9, 8]).sort()
// This will also throw ImmutableError, because an Immutable Array's methods
// (including concat()) are guaranteed to return other immutable values.

[1, 2, 3].concat(Immutable([6, 5, 4])).sort()
// This will succeed, and will yield a sorted mutable array containing
// [1, 2, 3, 4, 5, 6], because a vanilla array's concat() method has
// no knowledge of Immutable.

var obj = Immutable({all: "your base", are: {belong: "to them"}});
Immutable.merge(obj, {are: {belong: "to us"}})
// This will return the following:
// Immutable({all: "your base", are: {belong: "to us"}})

Static or instance syntax

Seamless-immutable supports both static and instance syntaxes:

var Immutable = require("seamless-immutable").static;

Immutable.setIn(obj, 'key', data)
var Immutable = require("seamless-immutable");

obj.setIn('key', data)

Although the later is shorter and is the current default, it can lead to collisions and some users may dislike polluting object properties when it comes to debugging. As such the first syntax is recommended, but both are supported.


If your linter cringes with the use of Immutable
without a preceding new
(e.g. ESLint's new-cap
rule), use Immutable.from

Immutable.from([1, 2, 3]);
// is functionally the same as calling:
Immutable([1, 2, 3])

Immutable Array

Like a regular Array, but immutable! You can construct these by passing an array to Immutable()

Immutable([1, 2, 3])
// An immutable array containing 1, 2, and 3.

Beyond the usual Array fare
, the following methods have been added.


var array = Immutable(["here", "we", "go"]);
Immutable.flatMap(array, function(str) {
  return [str, str, str];
// returns Immutable(["here", "here", "here", "we", "we", "we", "go", "go", "go"])

var array = Immutable(["drop the numbers!", 3, 2, 1, 0, null, undefined]);
Immutable.flatMap(array, function(value) {
  if (typeof value === "number") {
    return [];
  } else {
    return value;
// returns Immutable(["drop the numbers!", null, undefined])

Effectively performs a map
over the elements in the array, except that whenever the provided iterator function returns an Array, that Array's elements are each added to the final result.


var array = Immutable(["hey", "you"]);
Immutable.asObject(array, function(str) {
  return [str, str.toUpperCase()];
// returns Immutable({hey: "HEY", you: "YOU"})

Effectively performs a map
over the elements in the array, expecting that the iterator function will return an array of two elements - the first representing a key, the other a value. Then returns an Immutable Object constructed of those keys and values.

You can also call .asObject
without passing an iterator, in which case it will proceed assuming the Array is already organized as desired.


var array = Immutable(["hello", "world"]);
var mutableArray = Immutable.asMutable(array);


mutableArray // ["hello", "world", "!!!"]

Returns a mutable copy of the array. For a deeply mutable copy, in which any instances of Immutable
contained in nested data structures within the array have been converted back to mutable data structures, call Immutable.asMutable(obj, {deep: true})


var array = Immutable(["hello", "world"]);
var mutableArray = ["hello", "world"];

// returns true

// returns false

Returns whether an object is immutable or not.

Immutable Object

Like a regular Object, but immutable! You can construct these by passing an object to Immutable()

Immutable({foo: "bar"})
// An immutable object containing the key "foo" and the value "bar".

To construct an Immutable Object with a custom prototype, simply specify the prototype in options
(while useful for preserving prototypes, please note that custom mutator methods will not work as the object will be immutable):

function Square(length) { this.length = length };
Square.prototype.area = function() { return Math.pow(this.length, 2) };

Immutable(new Square(2), {prototype: Square.prototype}).area();
// An immutable object, with prototype Square,
// containing the key "length" and method `area()` returning 4

Beyond the usual Object fare
, the following methods have been added.

Stack overflow protection

Currently you can't construct Immutable from an object with circular references. To protect from ugly stack overflows, we provide a simple protection during development. We stop at a suspiciously deep stack level and show an error message

If your objects are deep, but not circular, you can increase this level from default 64
. For example:

Immutable(deepObject, null, 256);

This check is not performed in the production build.


var obj = Immutable({status: "good", hypothesis: "plausible", errors: 0});
Immutable.merge(obj, {status: "funky", hypothesis: "confirmed"});
// returns Immutable({status: "funky", hypothesis: "confirmed", errors: 0})

var obj = Immutable({status: "bad", errors: 37});
Immutable.merge(obj, [
  {status: "funky", errors: 1}, {status: "groovy", errors: 2}, {status: "sweet"}]);
// returns Immutable({status: "sweet", errors: 2})
// because passing an Array is shorthand for
// invoking a separate merge for each object in turn.

Returns an Immutable Object containing the properties and values of both this object and the provided object, prioritizing the provided object's values whenever the same key is present in both objects.

Multiple objects can be provided in an Array in which case more merge
invocations will be performed using each provided object in turn.

A third argument can be provided to perform a deep merge: {deep: true}


var obj1 = Immutable({a: {b: 'test'}, c: 'test'});
var obj2 = Immutable.replace(obj1, {a: {b: 'test'}}, {deep: true});
// returns Immutable({a: {b: 'test'}});
obj1 === obj2
// returns false
obj1.a === obj2.a
// returns true because child .a objects were identical

Returns an Immutable Object containing the properties and values of the second object only. With deep merge, all child objects are checked for equality and the original immutable object is returned when possible.

A second argument can be provided to perform a deep merge: {deep: true}


var obj = Immutable({type: "parrot", subtype: "Norwegian Blue", status: "alive"});
Immutable.set(obj, "status", "dead");
// returns Immutable({type: "parrot", subtype: "Norwegian Blue", status: "dead"})

Returns an Immutable Object with a single property set to the provided value. Basically a more straightforward way of saying

var obj = Immutable({type: "parrot", subtype: "Norwegian Blue", status: "alive"});
Immutable.merge(obj, {status: "dead"});

(and more convenient with non-literal keys unless you have ES6 [computed_property_names]

A second argument can be provided to perform a deep compare: {deep: true}


Likeset, but accepts a nested path to the property.

var obj = Immutable({type: {main: "parrot", sub: "Norwegian Blue"}, status: "alive"});
Immutable.setIn(obj, ["type", "sub"], "Norwegian Ridgeback");
// returns Immutable({type: {main: "parrot", sub: "Norwegian Ridgeback"}, status: "alive"})

A second argument can be provided to perform a deep compare: {deep: true}


Returns the value at the given path. A default value can be provided as a second argument.

var obj = Immutable({type: {main: "parrot", subtype: "Norwegian Blue"}, status: "alive"});
Immutable.getIn(obj, ["type", "subtype"]);
// returns "Norwegian Blue"
Immutable.getIn(obj, ["type", "class"], "Aves");
// returns "Aves"


Returns an Immutable Object with a single property updated using the provided updater function.

function inc (x) { return x + 1 }
var obj = Immutable({foo: 1});
Immutable.update(obj, "foo", inc);
// returns Immutable({foo: 2})

All additional arguments will be passed to the updater function.

function add (x, y) { return x + y }
var obj = Immutable({foo: 1});
Immutable.update(obj, "foo", add, 10);
// returns Immutable({foo: 11})


Likeupdate, but accepts a nested path to the property.

function add (x, y) { return x + y }
var obj = Immutable({foo: {bar: 1}});
Immutable.updateIn(obj, ["foo", "bar"], add, 10);
// returns Immutable({foo: {bar: 11}})


var obj = Immutable({the: "forests", will: "echo", with: "laughter"});
Immutable.without(obj, "with");
// returns Immutable({the: "forests", will: "echo"})

var obj = Immutable({the: "forests", will: "echo", with: "laughter"});
Immutable.without(obj, ["will", "with"]);
// returns Immutable({the: "forests"})

var obj = Immutable({the: "forests", will: "echo", with: "laughter"});
Immutable.without(obj, "will", "with");
// returns Immutable({the: "forests"})

var obj = Immutable({the: "forests", will: "echo", with: "laughter"});
Immutable.without(obj, (value, key) => key === "the" || value === "echo");
// returns Immutable({with: "laughter"})

Returns an Immutable Object excluding the given keys or keys/values satisfying the given predicate from the existing object.

Multiple keys can be provided, either in an Array or as extra arguments.


var obj = Immutable({when: "the", levee: "breaks"});
var mutableObject = Immutable.asMutable(obj);

mutableObject.have = "no place to go";

mutableObject // {when: "the", levee: "breaks", have: "no place to go"}

Returns a mutable copy of the object. For a deeply mutable copy, in which any instances of Immutable
contained in nested data structures within the object have been converted back to mutable data structures, call Immutable.asMutable(obj, {deep: true})



Treat Error
instances as immutable.


Fix .npmignore


Add getIn
and assumption that Promises are immutable.


Add Immutable.static
as the preferred API. Default to development build in webpack.


Adds optional deep compare for .set
, .setIn
and .replace


Adds static alternatives to methods, e.g. Immutable.setIn


Fixes bug with deep merge() on an array argument


Fixes bug with setting a new object on an existing leaf array.


Fixes bug where on some systems arrays are treated as plain objects.


now handles numeric keys the same way as string keys.


Alias Immutable.from()
to Immutable()
for linters.


React components are now considered immutable.


Add cycle detection.


Add update
and updateIn


now works as expected.


Add predicate support to without()


Fix missing dev/prod builds for 5.0.0


In development build, freeze Dates and ban mutating methods. (Note: dev and prod builds were mistakenly not generated for this, so to get this functionality in those builds, use 5.0.1)


Make setIn
more null safe.


Adds set
and setIn


Now when you require("seamless-immutable")
, you get the development build by default.


now points to src/seamless-immutable.js
so you can more easily build with envify


Add support for optional prototyping.


Calling .asMutable({deep: true}) on an Immutable data structure with a nested Date no longer throws an exception.


Arrays with nonstandard prototypes no longer throw exceptions when passed to Immutable


Custom mergers now check for reference equality and abort early if there is no more work needed, allowing improved performance.


Fixes a bug where indices passed into iterators for flatMap and asObject were strings instead of numbers.


Fixes an IE and Firefox bug related to cloning Dates while preserving their prototypes.


Dates now retain their prototypes, the same way Arrays do.


Adds a minified production build with no freezing or defensive unsupported methods, for a ~2x performance boost.


Adds optional merger
function to #merge


Bugfix: #merge
with {deep: true}
no longer attempts (unsuccessfully) to deeply merge arrays as though they were regular objects.


Minor documentation typo fix.


Breaking API change: #merge
now takes exactly one or exactly two arguments. The second is optional and allows specifying deep: true


Don't bother returning a new value from #merge
if no changes would result.


Make error message for invalid #asObject
less fancy, resulting in a performance improvement.


Adds #asMutable


Initial stable release


Run npm install -g grunt-cli
, npm install
and then grunt
to build and test it.


责编内容by:Github (源链)。感谢您的支持!


js监听浏览器离开页面操作 序言 大家是否经常遇到在关闭网页的时候,会看到一个确定是否离开当前页面的提示框?想一些在线测试系统、信息录入系统等就经常会有这一些提示,避免用户有意或者无意中关掉了页面,导致数据丢失。这里面的实现过程很简单,利用了 HTML DOM事件 中的 onunload 和 onbeforeunload...
普通函数与箭头函数的this的区别 普通函数中的this: this总是代表它的直接调用者, 例如 obj.func ,那么func中的this就是obj 2.在默认情况(非严格模式下,未使用 'use strict'),没找到直接调用者,则this指的是 window 3.在严格模式下,没有直接调用者的函...
JS Closes tag prematurely this is actually my first question ever in this awesome site. I usually find the answer that I need here with a little research but this time ...
Python网络数据采集之采集JavaScript|第09天... User:你好我是森林 Date:2018-04-11 Mark:《Python网络数据采集》 网络采集系列文章 Python网络数据采集之创建爬虫 Python网络数据采集之HTML解析 Python网络数据采集之开始采集 Python网络数...
如何开发一个Node脚手架进阶版(Vue-cli学习篇)... 在之前一篇博客介绍了关于Node脚手架的一些基础的知识,这篇博客是在之前的基础上针对在Node中开发脚手架中遇到的问题,如: 终端样式、交互问题 文件处理问题 通过对Vue-cli 2.9.2的源码进行分析,解决相关问题。 如果没有看过之前一篇博客的,或者对Node...