14
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-09-12

最近、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
14
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?