JavaScriptのオブジェクトの操作方法

2021年1月3日JavaScript

JavaScriptのオブジェクトが使えるようになると、いろんなことができるようになります。
そもそもオブジェクトはなぜ使うのか、どうやって使うのかを学んでいきましょう。

JavaScriptのオブジェクト

配列はそれぞれの値にインデックスという番号がついているだけでしたが、それは何百、何千という単位になったとき、管理することがとても大変になります。
番号の代わりに名前をつけられる見ただけで何かわかるようになり、便利になります。

オブジェクトを使うと、値に名前をつけて管理することができるようになります。
<h">オブジェクトの書き方

オブジェクトは、ふたつの書き方があります。

const 定数名 = {オブジェクト名: 値, キー: 値};
const 定数名 = {};
定数名.キー = '値';

一般的にはオブジェクトを使うときはオブジェクト名であるキーと値が決まっていることが多いので1つ目の方法で書き始めます。
2つ目の方法は、プロパティと値を既存のオブジェクトに追加したい場合に使用します。
これは、下のように改行してもよく、見やすくなります。

const 定数名 = {
  キー: 値,
  キー: 値,
 };

また、最後の部分にカンマは入れても入れなくてもよいです。
最後の値の後にもカンマは不要ではありますが、最後の値の後にもカンマが入っていると、あとで入れ替えやすいというメリットがあります。

具体的な例をみてみましょう。
たとえば出費の管理をしたいとします。
たとえば、100円でトマトを買って、1800円でUSBを買ったとします。
その場合、100,1800という値はそれぞれトマトとUSBの値というように、名前で管理したほうがわかりやすい。
その場合、オブジェクトを使って次のように書くことができます。

const purchasedProducts = {
  tomato: 100,
  usb: 1800,
};

オブジェクトを扱うときの名前

purchasedProductsのことをオブジェクト名といいます。
tomato: 100のことを、プロパティ、もしくはメンバーといいます。
tomatoを名前もしくは、キーといいます。
100を値といいます。

オブジェクトのプロパティにアクセスする（ドット記法とブラケット記法）

オブジェクトのプロパティにアクセスするには、ドット記法とブラケット記法という2つの方法があります。

  • ドット記法：オブジェクト名.キーとする方法→purchasedProducts.tomato
  • ブラケット記法：オブジェクト名['キー’]とする方法→purchasedProducts['tomato’]

たとえば、それぞれをコンソールに表示したい場合、このように書きます。

const purchasedProducts = {
  tomato: 100,
  usb: 1800,
};
console.log(purchasedProducts.tomato);
console.log(purchasedProducts['usb']);

ドット記法とブラケット記法の使い分け

ブラケット記法は、値が動的に変わる場合など、変数で置き換えたいときなどに使用します。

ブラケット記法purchasedProducts['usb']のように文字列としてキー情報を指定しています。

これをたとえばconst purchasedUsb = 'usb';

として、purchasedProducts[purchasedUsb]とすることで変数を[]の中に入れることができます。

これで値が動的に変わる場合でも柔軟に対応できます。

 

プロパティを追加する

また、上に加えてりんごを購入した場合、
purchasedProducts.apple = 120;
でapple: 120というプロパティをpurchasedProductsに追加することができます。

const purchasedProducts = {
  tomato: 100,
  usb: 1800,
};
purchasedProducts.apple = 120;
console.log(purchasedProducts);
 // {tomato: 100, usb: 1800, apple: 120}

このようにして、既存のオブジェクトに、プロパティと値のセットを追加することができます。

プロパティを削除する

反対に、USBを削除したい場合、
delete purchasedProducts.usb;
とすることでpurchasedProductsからUSBを削除することができます。

const purchasedProducts = {
  tomato: 100,
  usb: 1800,
};
delete purchasedProducts.usb;
console.log(purchasedProducts);
  // {tomato: 100}

オブジェクトを操作する

スプレッド構文を使う

スプレッド構文はオブジェクトを操作するときにも使えます。

otherItemsというオブジェクトをpurchasedProductsオブジェクトの値として挿入したいとします。
スプレッド構文である…otherItemsを使ってpurchasedProductsオブジェクトに追加してみましょう。

{
  const otherItems = {
    banana: 30,
    pudding: 140,
  };

const purchasedProducts = {
    tomato: 100,
    usb: 1800,
    ...otherItems,//スプレッド構文
  };
  console.log(purchasedProducts);
  // {tomato: 100, usb: 1800, banana: 30, pudding: 140}
}

このように、スプレッド構文を使うと簡単にオブジェクトに別のオブジェクトを追加することができます。
スプレッド構文については、次の記事を参考にしてみてください。

分割代入とレスト構文を使う

オブジェクトに対して分割代入とレスト構文を使うこともできます。

上のtomatoとbananaというキーを定数として取り出したいとき、分割代入を使います。
その他をレスト構文として新しいオブジェクトにいれることができます。

たとえば、

const {tomato, banana, ...others} = purchasedProducts;

と書きます。
取り出したいキーと同じものをconstで宣言することで、取り出すことができます。

{
  const otherItems = {
    banana: 30,
    pudding: 140,
  };

const purchasedProducts = {
    tomato: 100,
    usb: 1800,
    ...otherItems,
  };

const {tomato, banana, ...others} = purchasedProducts;
  console.log(tomato); //100
  console.log(banana); //30
  console.log(others); //{usb: 1800, pudding: 140}
}

tomatoとbananaは値を保持した変数として、othersはその他を保持したオブジェクトに変換することができます。

オブジェクトを変換してforEach()を使う

オブジェクトには、forEach()が使えません。forEach()は、配列のプロトタイプのメソッドだからです。
しかしいくつかの手順を踏むことで、forEach()を使うことができます。

  • Object.keys(オブジェクト名)でキーを配列として取得する
  • 配列を変数に代入する
  • forEach()を使う

Object.keys()の使い方は、次の記事を参考にしてみてください。

forEach()を使ってオブジェクトのキーを配列として取得する

Object.keys(purchasedProducts);

とすると、オブジェクトのすべてのキーを配列として取得することができます。
配列なので、forEach()が使えるようになります。

{
  const purchasedProducts = {
    tomato: 100,
    usb: 1800,
    banana: 30,
    pudding: 140,
  };
  // Object.keys
  const keys = Object.keys(purchasedProducts);
  console.log(keys);//(4) ["tomato", "usb", "banana", "pudding"]

keys.forEach(key => {
    console.log(key: ${key});
  });
  // key: tomato
// key: usb
// key: banana
// key: pudding
  });
}

forEach()でキーを使った文章を作成することができました。

forEach()でキーの値にアクセスする方法

キーに対する値も表示したい場合、次のようにします。

{
const purchasedProducts = {
  tomato: 100,
  usb: 1800,
  banana: 30,
  pudding: 140,
};
// Object.keys()でプロパティの配列に変換
const keys = Object.keys(purchasedProducts);
console.log(keys); //(4) ["tomato", "usb", "banana", "pudding"]
keys.forEach(key => {
  console.log(key: ${key}: Value: ${purchasedProducts[key]});
});
// key: tomato: Value: 100
// key: usb: Value: 1800
// key: banana: Value: 30
// key: pudding: Value: 140
}

注意点ですが、必ずpurchasedProducts[key]といったブラケット記法(オブジェクト名[プロパティ])で書く必要があります。
Object.keys()で取得した値は、文字列で取得されています。そのため、ドット記法のpurchasedProducts.keyと書くことはできません。

配列とオブジェクトを組み合わせる

配列やオブジェクトは自由に組み合わせて複雑にすることもできます。

const stores = [
  {storeA: 100, storeB: 200},
  {storeA: 50, storeB: 100},
  {storeA: 200, storeB: 40},

console.log(stores[1].storeA);
];

consoleに表示するときは、
stores配列[インデックス番号].オブジェクトのキー
と指定すると、そのキーの値を表示できます。

オブジェクトとプリミティブ型の挙動の違い

オブジェクトに変数を代入するとき、注意点があります。

オブジェクトとプリミティブ型の挙動の違いについては、次の記事を参考にしてみてください。

JavaScript

Posted by devsakaso