===とshallowEqとdeepEqのパターンごとの比較

以下では、===を用いているが、これは==を用いても全く同じ挙動になる

詳しくはJavaScriptの等価性演算子に書いたが、object比較の場合は==と===とObject.isの間に差はない

パターン

参照が同じ。自動的に値も同じ

code:ts

const hoge = { a: 1, b: 2, c: { c1: 1, c2: 2 } };

const a = hoge;

const b = hoge;

a === b; // true

deepEq(a, b); // true

shallowEq(a, b); // true

参照は異なり、値は同じ

code:ts

const a = { a: 1, b: 2, c: { c1: 1, c2: 2 } };

const b = { a: 1, b: 2, c: { c1: 1, c2: 2 } };

a === b; // false

deepEq(a, b); // true

shallowEq(a, b); // true

参照は異なり、値の1段目までが同じ

code:ts

const a = { a: 1, b: 2, c: { c1: 10, c2: 20 } };

const b = { a: 1, b: 2, c: { c1: 1, c2: 2 } };

a === b; // false

deepEq(a, b); // false

shallowEq(a, b); // true

参照も、値も全く違う

code:ts

const a = { a: 10, b: 20, c: { c1: 10, c2: 20 } };

const b = { a: 1, b: 2, c: { c1: 1, c2: 2 } };

a === b; // false

deepEq(a, b); // false

shallowEq(a, b); // false

見たらわかるとおり

===が最も厳しく、

shallowEqがもっともゆるい

ちなみにmapやfilterなどを使うと必ず新しいobjectが作られるので===は常にfalseになる

code:ts

const a = hoge.map(s => s);

console.log(a === hoge); // false