【JavaScript】オブジェクト型で複数のデータを保持する!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2022年11月02日に投稿されました。)

JavaScriptで配列から条件を満たす新たな配列を作成する方法としてオブジェクト型を使用します。

オブジェクト型とは、複数のプロパティ(キーと値の組み合わせ)を持つことができるデータ型になります。

そのため、数値や文字列、配列、オブジェクト、関数などさまざまな種類のデータを値として格納することができます。

また、作成したオブジェクト型は値の更新、削除 、追加など、配列のように操作することが可能です。

APIのデータもオブジェクト型で取得することが多いため、この記事を見てオブジェクト型について学習しておきましょう。

今回はJavaScriptのオブジェクト型で複数のデータを保持する方法について紹介していきます。

この記事はこんな方におすすめ
・たくさんのデータを1つのオブジェクトのデータとしてまとめたい場合
・さまざなまデータを1つのオブジェクトのデータとしてまとめたい場合

オブジェクト型とは

オブジェクト型とは、複数のプロパティ(キーと値の組み合わせ)を持つことができるデータ型になります。

複数のプロパティを持つことができるため、文字列や数値、配列など様々なデータを一度に格納することができます。

配列は複数の値をデータとして格納しますが、オブジェクト型は値だけでなく、配列や関数などもデータとして格納することができます。

オブジェクト型の書き方

オブジェクト型の書き方は下記のようになります。

⚫︎ 値をデータとして格納する場合

⚫︎ 配列をデータとして格納する場合

⚫︎ オブジェクトをデータとして格納する場合

⚫︎ 関数をデータとして格納する場合

変数名を定義し、「{}(波括弧)」を追記します。

そして、波括弧の中に「キーと値」を追記することでオブジェクトを作成することができます。

すると、上記のように値や配列、オブジェクト、関数など様々なデータを値として格納することができます。

Sossy

他にもDate型やBoolean型、Math、RegularなどJavaScriptの殆どの値を格納することができます。

オブジェクト型で複数のデータを保持するサンプルコード

オブジェクト型で複数のデータを保持するサンプルコードをご紹介します。

ここでは、下記の4つのパターンでオブジェクト型を使用します。

  1. 値をデータとして保持する場合
  2. 配列をデータとして保持する場合
  3. オブジェクトをデータとして保持する場合
  4. 関数をデータとして保持する場合

値をデータとして保持する場合

値をデータとして保持するためにオブジェクト型を作成します。

⚫︎ Main.js

実行結果

オブジェクト型のデータを値として保持した結果

オブジェクト型によって値がデータとして格納しています。

今回は、「one」のキーを指定しているため、「Uno」が表示されています。

配列をデータとして保持する場合

配列をデータとして保持するためにオブジェクト型を作成します。

⚫︎ Main.js

実行結果

オブジェクト型のデータを配列として保持した結果

オブジェクト型によって配列がデータとして格納しています。

そのため、数値が格納されている配列には偶数の値を、格納している配列が表示されています。

オブジェクトをデータとして保持する場合

オブジェクトをデータとして保持するためにオブジェクト型を作成します。

⚫︎ Main.js

実行結果

オブジェクト型のデータをオブジェクトとして保持した結果

オブジェクト型によってオブジェクトがデータとして格納しています。

そのため、数値が格納されている配列には偶数の値を、格納している配列が表示されています。

関数をデータとして保持する場合

関数をデータとして保持するためにオブジェクト型を作成します。

⚫︎ Main.js

実行結果

オブジェクト型のデータを関数として保持した結果

オブジェクト型によって関数がデータとして格納しています。

そのため、キーを指定して呼び出すことで関数の処理内容が表示されています。

オブジェクト型のデータを操作する方法の一覧

オブジェクト型を作成できたのは良いですが、値の変更をするなど、オブジェクトを操作したいかと思います。

そのためここでは、オブジェクト型のデータを操作する方法の一覧をご紹介します。

オブジェクト型のデータを更新する場合

オブジェクト型のデータを更新する場合は下記のように指定します。

  1. オブジェクト名.キー名 = 値

オブジェクト名とキーを指定し、値を代入することで変更することができます。

⚫︎ Main.js

実行結果

オブジェクト型のデータを更新した結果

オブジェクトの値が更新されています。

今回は、「one」のキーを「壱」に、「five」のキーを「5」と「伍」の配列に更新して表示しています。

オブジェクト型のデータを削除する場合

オブジェクト型のデータを削除する場合は下記のように指定します。

  1. delete オブジェクト.キー名

⚫︎ Main.js

実行結果

オブジェクト型のデータを削除した結果

オブジェクトの値が削除されています。

今回は、「one」のキーと値、「five」のキーと値を削除して表示しています。

オブジェクト型のデータを追加する場合

オブジェクト型のデータを追加する場合は下記のように指定します。

  1. オブジェクト名.新しいキー名 = 値

⚫︎ Main.js

実行結果

オブジェクト型のデータを追加した結果

オブジェクトに値が追加されています。

今回は、「six」のキーに「Seis」を、「seven」のキーに「Siete」と「7」と「七」の配列を追加して表示しています。

オブジェクト型のデータを初期化する場合

オブジェクト型のデータを初期化する場合は下記のように指定します。

  1. 変数名 = {}
  2. 変数名 = {新しいキー名: 新しい値, …}

⚫︎ Main.js

実行結果

オブジェクト型のデータを初期化した結果

オブジェクトの値が初期化されています。

そのため、オブジェクトに格納していたデータが無くなり、空のオブジェクトと新たなデータを格納して表示されています。

オブジェクト型にデータが存在するか調べる場合

オブジェクト型にデータが存在するか調べる場合はhasOwnProperty()を使用します。

hasOwnProperty()とは、指定したオブジェクト型に値が存在するかしないかを調べるメソッドになります。

⚫︎ Main.js

実行結果

hasOwnProperty()オブジェクト型にデータが存在するか調べた結果

hasOwnProperty()によって指定したオブジェクト型にデータが存在するかどうかを調べています。

そのため、オブジェクトに「one」があることから「true」を、「six」はないことから「false」を表示しています。

オブジェクト型のデータをコピーする場合

オブジェクト型のデータをコピーする場合は2つの方法があります。

まず、1つ目はObject.assign()を使用する方法です。

Object.assign()とは、指定したオブジェクト型を複製するメソッドになります。

そして2つ目は「{…オブジェクト名}」を使用する方法です。

変数の値に「{…オブジェクト名}」を代入することで、オブジェクト型のデータを複製することができます。

⚫︎ Main.js

実行結果

オブジェクト型のデータをコピーした結果

上記の2つの方法によって指定したオブジェクト型のデータをコピーしています。

そのため、「obj」で格納されたデータが、「obj_copy1」と「obj_copy2」に格納されています。

オブジェクト型のデータを編集不可にする場合

オブジェクトのデータを編集不可にする場合は、「Object.freeze()」を使用します。

Object.freeze()とは、オブジェクト型のデータを編集不可(イミュータブル)にするメソッドになります。

そのため、オブジェクトに格納されているデータを操作しようとしても変更はされません。

⚫︎ Main.js

実行結果

Object.freeze()オブジェクト型のデータを編集不可にした結果

Object.freeze()によって、指定したオブジェクト型のデータを編集不可にしています。

また、Object.isFrozen()によってイミュータブルであるかどうかを調べることができます。

そのため、キーである「one」の値を変更しましたが、変更されておらず、オブジェクトが表示されています。

オブジェクト型の各値について処理を行う場合

オブジェクト型の各値について処理を行う場合はObject.keys()Obect.values()Object.entries()を使用します。

Object.keys()とは、指定したオブジェクトのキーを配列で取得するメソッドであり、Object.values()とは、指定したオブジェクトの値を配列で取得するメソッドになります。

そして、Object.entries()とは、指定したオブジェクトのプロパティ(キーと値)を配列で取得するメソッドになります。

⚫︎ Main.js

実行結果

Object.keys()やObject.values()、Object.entries()でオブジェクトの各値について処理を行った結果

Object.keys()によって指定したオブジェクト型のキーを取得し、Object.values()によって指定したオブジェクト型の値を取得しています。

また、Object.entries()によって指定したオブジェクト型のプロパティを取得しています。

そのため、objの「31」より大きい値を格納した新たな配列が表示されています。

オブジェクト型にまとめて値を代入する場合

オブジェクト型にまとめて値を代入する場合は、「分割代入」を使用します。

分割代入とは配列や値、オブジェクトなどからキーや値を取り出して別々の変数に代入する方法になります。

⚫︎ Main.js

実行結果

分割代入でオブジェクト型にまとめて値を代入した結果

分割代入によって指定したオブジェクト型のキーを取得し、Object.values()によって指定したオブジェク型の値を取得しています。

また、Object.entries()によって指定したオブジェクト型のプロパティを取得しています。

まとめ

⚫︎ オブジェクト型とは複数のプロパティ(キーと値の組み合わせ)を持つことができるデータ型である

⚫︎ オブジェクト型はJavaScriptの殆どのデータを一度に格納することができる

⚫︎ オブジェクト型のデータを更新する場合は、「オブジェクト名.キー名 = 値」を使用する

⚫︎ オブジェクト型のデータを削除する場合は、「delete オブジェクト.キー名」」を使用する

⚫︎ オブジェクト型のデータを追加する場合は、「オブジェクト名.新しいキー名 = 値」を使用する

⚫︎ オブジェクト型のデータを初期化する場合は、「変数名 = {}」や「変数名 = {新しいキー名: 新しい値, …}」を使用する

⚫︎ オブジェクト型にデータが存在するか調べる場合は、「hasOwnProperty()」を使用する

⚫︎ オブジェクト型のデータをコピーする場合は「Object.assign()」や「{…オブジェクト名}」を使用する

⚫︎ オブジェクト型のデータを編集不可にする場合は「Object.freeze()」を使用する

⚫︎ オブジェクトの各値について処理を行う場合は、「Object.keys()」や「Object.values()」、「Object.entries()」を使用する

⚫︎ オブジェクトにまとめて値を代入する場合は分割代入を使用する

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA