JavaScript_javascript 기술에 Immutable 적용

변경 가능한 객체
자바스크립트에서는 객체가 참조형 데이터이기 때문에 객체를 자주 수정하더라도 원래 객체를 기반으로 수정되므로 다시 생성할 필요가 없어 메모리를 효율적으로 활용할 수 있다는 장점이 있습니다. space 개체 이 기능은 문자 그대로 중국어로 "변수"를 의미하는 Mutable이라고 할 수 있습니다.
가변 객체의 경우 유연하고 변경 가능하다는 장점이 때로는 단점이 될 수 있습니다. 데이터가 유연하고 변경 가능할수록 제어하기가 더 어려워집니다. 복잡한 구조를 가진 객체의 경우 데이터가 없으면 실수로 수정될 수 있습니다. 객체가 여러 범위에서 사용되는 경우 데이터가 변경되는지 여부와 변경 시기를 예측하기 어렵습니다.

var obj = { /* 一个复杂结构的对象 */ };
doSomething(obj);
// 上面的函数之行完后，此时的 obj 还是最初的那个 obj 吗？

이 문제를 해결하기 위한 기존 솔루션은 개체를 전체 복사 형식으로 새 개체에 복사한 다음 새 개체에 대해 수정 작업을 수행하는 것입니다. 이렇게 하면 데이터의 제어 가능성이 보장되지만 복사가 자주 발생합니다. 메모리 공간을 많이 낭비할 수 있습니다.

var obj = { /* 一个复杂结构的对象 */ };
// copy 出一个新的 obj2
// 但是 copy 操作会浪费内存空间
var obj2 = deepClone(obj);
doSomething(obj2);
// 上面的函数之行完后，无论 obj2 是否变化，obj 肯定还是原来那个 obj

불변 객체
위의 문제를 더 잘 해결하기 위해 Immutable 객체가 등장했습니다. 문자 그대로 중국어로 "immutable"로 번역됩니다. 불변 객체가 수정될 때마다 새로운 불변 ​​객체가 생성되며 새 객체에 대한 작업은 원본 객체의 데이터에 영향을 미치지 않습니다. 이 특수 개체는 JavaScript의 새로운 기능이 아니라 이 문제를 해결하기 위해 업계에서 제공하는 일련의 솔루션이며 몇 가지 우수한 오픈 소스 라이브러리가 등장했으며 그 중 가장 유명한 것은 Facebook의 Lee Byron 오픈 소스 불변입니다. js. 물론 Immutable의 솔루션은 독창적인 것이 아니라 Clojure와 Scala에서 나온 것입니다.
Mutable과 Immutable의 성능 비교
Mutable 객체에 대한 비효율적인 작업은 주로 복사와 비교에 반영되며 Immutable 객체는 이 두 가지 비효율적인 문제점을 해결합니다.
일반 Mutable 객체의 전체 복사 작업은 전체 데이터를 복사하지만 Immutable 객체는 데이터 수정 시 전체 데이터를 복사하지 않고 변경된 노드와 변경되지 않은 노드 간의 부모-자식 관계를 새 노드에 전송합니다. 노드(Node)는 연결리스트(Linked List)와 유사한 구조이다. "복사"의 관점에서 보면 최소한의 복사가 이루어지며 변경되지 않은 부분은 공유됩니다. 반면에 변경 불가능한 복사본은 "증분"됩니다. 요금.
그리고 Immutable 객체가 수정될 때마다 새로운 Immutable 객체가 생성되는 기능을 기반으로 데이터의 수정 상태를 스냅샷 세트로 저장할 수 있어 매우 편리합니다.
비교 연산에 대해 알아보겠습니다. Mutable 객체의 경우 두 객체가 동일한지 비교하려면 객체의 각 노드를 순회해야 합니다. 복잡한 구조를 가진 객체의 경우 효율성은 그다지 높지 않습니다. Immutable 객체의 경우 immutable.js는 두 Immutable 객체의 "값"이 동일한지 직접 확인하는 API를 제공합니다.

var map1 = Immutable.Map({a:1, b:1, c:1});
var map2 = Immutable.Map({a:1, b:1, c:1});
assert(map1 !== map2); // 不同的 Immutable 实例，此时比较的是引用地址
assert(Immutable.is(map1, map2)); // map1 和 map2 的值相等，比较的是值
assert(map1.equals(map2)); // 与 Immutable.is 的作用一样

실제 개발 애플리케이션에서는 성능이 항상 가장 중요하고 중요한 것은 아닙니다. 일반적인 JavaScript 프로젝트의 경우 Immutable의 특성이 가져오는 데이터 제어 가능성이 성능보다 유리합니다. Mutable 객체는 작은 범위에서 사용하기에 적합합니다. 닫힌 범위의 반면, Immutable 개체는 데이터를 여러 범위에 걸쳐 전달해야 할 때 사용하기에 적합합니다.

Mutable과 Immutable의 사용법 차이

immutable.js는 List Stack Map OrderedMap Set OrderedSet Record를 포함하여 다양한 Immutable 데이터 구조를 제공합니다. 이러한 데이터 구조는 대략 기본 Mutable 데이터 구조에 해당합니다.
여기서는 각 데이터 구조의 사용법에 대해 자세히 설명하지 않습니다. 주로 Immutable 객체와 Mutable 객체의 사용법 차이에 대해 설명하겠습니다.
기본 Mutable 객체는 "읽기"와 "쓰기"에 매우 편리합니다.

var mutableObj = {};
// 写入数据
mutableObj.foo = 'bar';
// 读取数据
console.log(mutableObj.foo);

불변 객체는 set과 get을 통해 데이터를 "읽고" "쓰기"해야 합니다.

var immutableObj1 = Immutable.Map();
// 写入数据
var immutableObj2 = immutableObj1.set('foo', 'bar');
// 读取数据
console.log(immutableObj2.get('foo')); // => 'bar'

위의 예에서는 set 메소드의 사용을 설명하기 위해 처음에 빈 객체만 생성합니다. 실제로 초기 값은 인스턴스화 중에 전달될 수 있습니다.

var immutableObj = Immutable.Map({'foo', 'bar'});

심층 데이터의 경우 immutable.js에서 제공하는 액세스 인터페이스가 매우 편리합니다.

var immutableObj1 = Immutable.fromJS({
 a: {
  b: 'c'
 },
 d: [1, 2, 3]
});
// 读取深层级的数据
console.log(immutableObj1.getIn(['a', 'b'])); // => 'c'
console.log(immutableObj1.getIn(['d', 1])); // => 2
// 修改深层级的数据
var immutableObj2 = immutableObj1.setIn(['a', 'b'], 'd');
console.log(immutableObj2.getIn(['a', 'b'])); // => 'd'

네이티브 Mutable 객체인 경우, 심층 수준 데이터에 대한 액세스를 연결할 때 객체 정의되지 않은 오류가 보고될 수 있습니다. 그러나 Immutable 객체는 이러한 상황이 발생하면 오류를 보고하지 않고 정의되지 않은 것을 반환합니다.
디버깅 시 Immutable 객체의 내부 구조를 보고 싶다면 먼저 toJSON()을 사용하여 일반 Mutable 객체로 변환하는 것이 좋습니다.