Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
9
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Organization

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
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
9
Help us understand the problem. What are the problem?