JavaScriptで参照を切る/切らないメモ

最近、ReactのshallowCompareみたいに参照を気にする場面が多いですね。
Immutable.jsを使わずにimmutabilityを実現したりするときにどうぞ。

一部のproposalを除き、コードはNode v6.2.2で実行を確認しています。
実行環境には十分注意してください。

参照を切らずに要素を削除する

Object

1. delete演算子を使う

const obj = {a: 1, b: 2, c: 3};
delete obj.b;
'b' in obj; // false

undefinedを書き込んでも値の参照は消せますが、in演算子によるキーの存在判定はtrueを返し続けます。

全部一気に消したい場合は何かしらのキー列挙と合わせて使用してください。

Array

部分削除

• 頭から
  • .shift()
• 末尾から
  • .pop()
  • .lengthの値を減らす
• どこでも
  • .splice([消したい最初のidx], [消したい個数])
    • 添字は詰まる
    • 返り値は「削除した要素の配列」になる
  • delete演算子を使う
    • 添字は詰まらない

const arr = [1,2,3,4,5,6,7,8,9];

arr.shift(); // 1
console.log(arr); // [2,3,4,5,6,7,8,9]
arr.pop(); // 9
console.log(arr); // [2,3,4,5,6,7,8]
arr.length--;
console.log(arr); // [2,3,4,5,6,7]

arr.splice(1, 3); // [3,4,5]
console.log(arr); // [2,6,7]

delete arr[1]; // true
console.log(arr); // [2,,7]

全削除

1. lengthを0にする
2. spliceする

const arrA = [1,2,3];
arrA.length = 0;
console.log(arrA); // []

const arrB = [1,2,3];
arrB.splice(0); // [1,2,3]
console.log(arrB); // []

参照を切って複製する

Object

1. 何かしらのコピーをする（割愛）
2. Object.assignする
3. Object Rest/Spread Propertiesを使う（Stage 2）

Object Spread Propertiesは、実にObject.assignの糖衣構文です。

const obj = {a: 1, b: 2, c: 3};

const obj2 = Object.assign({}, obj);
const obj3 = {...obj};

Array

1. 何かしらのコピーをする（割愛）
2. concatする
3. sliceする
4. Array Spreadを使う（ES2017）

※mapとfilterでも新たな配列が生成されるため、複製にはなります

const arr = [1,2,3];

const newArr2 = arr.concat();
const newArr3 = arr.slice(0); // 
const newArr4 = [...arr];

ちなみにObject.assignも使えます。

const newArr5 = Object.assign([], arr);

Primitive Types(String, Number, Boolean)

値は同じだがどうしても参照は別にしたいという場合は、ラッパーオブジェクトを使いましょう。
用法用量を守って正しくお使いください。

123 === 123; // true
new Number(123) === new Number(123); // false
Number(123) === Number(123); // true <- 注意
123 === (new Number(123)).valueOf(); // true