JavaScript、
オブジェクトの操作いろいろ。

オブジェクトを使いこなそう。

こんにちは、「ふ」です。
今回はJavaScriptにおける、オブジェクトの編集操作について紹介していきます。内容は⬇︎のとおり。

• 〽️ 生成・初期化
• 〽️ プロパティの追加/変更/削除。
• 〽️ プロパティ呼び出し。
• 〽️ オブジェクトの複製。
• 〽️ 内容を一括取り出し。

この５つを押さえておけば、オブジェクトの基本的な扱いに困ることはありません。
データの集合であるオブジェクトは、非常に便利なものです。編集操作を知って、おおいに活用してください。

オブジェクトの生成・初期化。

はじめに必要とされるのが、オブジェクトの生成・初期化です。
JavaScriptの値には数値や文字列、真偽値型などがありますが、オブジェクトは「オブジェクト型」というデータ型です。

他のものとは違い、オブジェクト型には複数の内容を含めることができます。
そのため、オブジェクト型として初期化している状態でなければ、オブジェクトとしての編集を行うことができません。

const obj = ｛｝;

変数や定数に代入する形で、オブジェクトを生成します。
⬆︎のようにプロパティを配置しなくても中括弧{ }で囲むだけで、オブジェクト型の生成・初期化が可能です。

const obj = ｛ bba:"こんにちは", bbb:"さようなら" bb｝;

もちろん生成時にプロパティを含めても構いません。

new演算子から生成。

const obj = new Object();

ここまでオブジェクトの生成にはオブジェクトリテラルを使った方法で話を進めてきましたのですが、⬆︎のようにnew演算子を使って生成することもできます。

これは配列の生成と同じ状況です。

const arr = [];

const arr = new Array();

配列にも内容を直接記述するリテラル（文字通り）の方式と、new演算子をつかったやり方の２つが用意されていますね。
new演算子の詳しい仕組みについては後日改めて紹介します。

プロパティの編集。

オブジェクトの外部からプロパティを編集する方法について。
プロパティの追加と削除、値の変更は次のとおりです。

プロパティの追加。

const obj1 = ｛ bb a:100 bb｝;

⬆︎のようなオブジェクトがあったとします。ここにプロパティを追加してみましょう。

obj1.b = 200;

「オブジェクト名 . 新しいプロパティ名」とし、値を代入するだけで自動的にプロパティが追加されます。

console.log(obj1); 「「３▶︎ {a:100,b:200}」」

オブジェクト自体を出力してみると、ちゃんと追加されているのが確認できます。

値の変更。

プロパティの値を変更するときは、新しい値を代入し直すだけです。

obj1.a = 200; console.log(obj1); 「「３▶︎ {a:200,b:200}」」

obj1の「a」プロパティにアクセスし、「200」を代入しました。
出力すると、値が変更されているのがわかります。

プロパティの削除。

プロパティを削除するには、delete演算子を使います。

delete(obj1.a); console.log(obj1); 「「３▶︎ {b:200}」」

プロパティ「a」が削除されました。

プロパティへのアクセス。

const obj2 = ｛ bba:"AAA", bbb() { bbconsole.log("BBB") bb} ｝;

次はオブジェクトの内容にアクセスする方法です。
⬆︎のオブジェクト「obj2」で試してみましょう。プロパティ「a」とメソッド「b」が入っています。

プロパティ値へのアクセス。

プロパティ値にアクセスするには、オブジェクトのあとにドットを付けてプロパティ名をつなげます。

console.log(obj2.a); 「「３▶︎ AAA」」

プロパティaにアクセスできました。

またオブジェクトのメソッドを実行したい場合は、メソッド名のあとに( )を記述します。

obj2.b(); 「「３▶︎ BBB」」

これで実行できます。

オブジェクトの複製。

オブジェクトを複製する方法はいくつか考えられますが、オブジェクトリテラルとスプレッド演算子を使ったやり方が1番簡単です。

const obj3 = { bbc:CCC; bbd:DDD; }

このobj3を複製してみます。

const obj4 = {...obj3};

{ }内にスプレッド演算子「...」をつけてオブジェクト名を記述すると、その内容をひととおり記述してくれます。
複製したいときは便利ですね。

オブジェクトが複製されたので、確認してみましょう。
obj3の内容を変更し、複製されたobj4と比較してみます。

obj3.e = "EEE";

obj3のほうにはプロパティを１つ追加しました。

console.log(obj3); 「「３▶︎ c:"CCC" d:"DDD" e:"EEE"」」 console.log(obj4); 「「３▶︎ c:"CCC" d:"DDD"」」

obj3はプロパティが３つになったのに対し、obj4は複製時のプロパティ２つのままです。
これにより、オブジェクトの実体がもう１つ複製されていたことが確認できます。

参考⬇︎

JavaScriptの点３つ「 ... 」 〜スプレッド構文（演算子）について。

2022.02.14
本質は「オブジェクトの複製」にあり。

オブジェクトの内容を取り出す。

オブジェクトのプロパティ名や値、またはその両方を一括で取り出す方法、
それにはObjectのメソッドを使うのが便利です。

const obj5 = { bbe:"EEE", bbf:"FFF" };

こちら⬆︎のオブジェクトをつかって試してみます。

プロパティ名の一覧を取り出す。

Object.keys（オブジェクト名);

プロパティ名の一覧を取り出すには、Object.keys( )メソッドを使用します。
メソッドの引数に、オブジェクト名を入れるようにしてください。

console.log(Object.keys(obj5)); 「「３▶︎ {'e','f'}」」

オブジェクト名が配列に格納されて返ってきます。

値の一覧を取得。

Object.values(オブジェクト名);

今度は値のほう。取り出すにはObject.values( )メソッドをつかいます。

console.log(Object.values(obj5)); 「「３▶︎ {'EEE','FFF'}」」

Object.keys( )のときと同様、値が配列形式で返ってきました。

プロパティ名と値のセットを取得。

Object.entries( )メソッドを使うと、プロパティ名と値をセットで取り出すことができます。

console,log(Object.entries(obj5)); 「「３▶︎ {{'e','EEE'},{'f','FFF'}}」」

実行すると入れ子形式の配列が返ります。内側の配列要素の中に、プロパティ名と値が格納されています。

これらのメソッドは、別の場所にオブジェクトの内容をまるっと割り当てたい場合に便利です。

実例記事⬇︎

setAttribute、複数の属性を一括で追加【JavaScript】。

2022.04.16
関数にもしてしまおう。

次回予告。

今回はJavaScriptのオブジェクト操作について紹介してきました。最後までお読みくださり、ありがとうございます。


ちなみに、オブジェクトを複製したいと思ったとき、

const obj_a = {a:"AAA"}; const obj_b = obj_a;

⬆︎のように新しく作った変数「obj_b」に「obj_a」を代入しても、これは複製したことにはなりません。
その理由ですが、objaやobjbにはオブジェクトデータの実体ではなく、「参照」が渡されているからです。

「参照渡し？」
また新たな言葉が登場しました。なんなのでしょうかこれは。

ということで次回は「参照渡し」「値渡し」について解説していきます。 ではまた〜 ♬