オブジェクトは、1つの箱にデータを集めて管理する機能です。
JavaScriptでは、オブジェクトを扱っていく機会がたくさんあります。
今回はオブジェクトの操作方法に焦点を当てて解説します。
オブジェクトの作成とプロパティへのアクセス
オブジェクトを作成するには、オブジェクトリテラル{}の中にキーと値を記述します。
const obj = {
key: 'value'
};プロパティへのアクセスは、ドット記法.または、ブラケット記法[]を使います。
const obj = {
key: 'value'
};
console.log(obj.key); // ドット記法
console.log(obj['key']); // ブラケット記法では、実際にプロパティにアクセスし、値を参照してみましょう。
const obj = {
name: 'Lisa',
age: 25,
};
console.log(obj.name); // 'Lisa'
console.log(obj['age']); // 25このように、ドット記法とブラケット記法、それぞれでキーを指定すると、そのキーを持った値を参照することができます。
キーと値の取り出し
オブジェクトのキーや値の一覧を配列として取り出すには、Object.keys(obj)やObject.values(obj)を使います。
また、Object.entries(obj)を使うと、キーと値のペアの配列が返ります。
キーの一覧を取得
const obj = {
name: 'Lisa',
age: 25,
nationality: 'Canada'
};
console.log(Object.keys(obj)); // ['name', 'age', 'nationality']値の一覧を取得
const obj = {
name: 'Lisa',
age: 25,
nationality: 'Canada'
};
console.log(Object.values(obj)); //['Lisa', 25, 'Canada']キーと値の一覧を取得
const obj = {
name: 'Lisa',
age: 25,
nationality: 'Canada'
};
console.log(Object.entries(obj));
// [['name', 'Lisa'], ['age', 25], ['nationality', 'Canada']]このように、オブジェクトが所有しているキーと値からなる配列が返ってきます。
オブジェクトでデータを保管する機会は多くありますが、要素の操作に関しては、配列の方が扱いやすい場合があります。
その際に、上記のオブジェクトから配列に変換する方法が役に立ちます。配列の要素をループさせるforEachやmapメソッドを使用できることがメリットとなるためです。
オブジェクトの初期化
オブジェクトを初期化するには、new Object()やオブジェクトリテラルを使用します。
const obj = new Object(); // new演算子
const obj = {}; // オブジェクトリテラル空のオブジェクトを作成し、オブジェクトの初期化を行います。そのあとに、新たなオブジェクトを作成していきます。
オブジェクトのインスタンス化
インスタンス化とは、新たにオブジェクトを作成することです。言い換えると、オリジナルのオブジェクトを複製するイメージです。
また、生成されたオブジェクトはインスタンスと呼ばれます。
以下のように、new演算子とコンストラクタを使うことで、インスタンスを作ることができます。
// コンストラクタの定義
function Character (name, age, nationality) {
this.name = name;
this.age = age;
this.nationality = nationality;
}
// コンストラクタからインスタンスの生成
const character = new Character(
'John',
30,
'Australia'
);
console.log(character.name); // 'john'
console.log(character.age); // 30
console.log(character.nationality); // 'Australia'この場合、変数characterは、Chracterというコンストラクタのインスタンスになります。
インスタンスの方で指定しているプロパティにアクセスすると、'John'、 30 、'Australia'という値を参照できます。
オブジェクトのスプレッド演算子
スプレッド演算子…を用いると、さまざまな状況に応じてオブジェクトを展開することができます。
以下を見てください。
const obj = { a: 1, b: 2 };
// オブジェクトをクローンする
const cloneObj = {...obj};
console.log(cloneObj); // { a: 1, b: 2 }
// プロパティを追加し、新しいオブジェクトを生成する
const newObj = {...obj, c: 3};
console.log(newObj); // { a: 1, b: 2, c: 3 }
// オブジェクトをマージする
const mergeObj = {...obj, ...{ c: 3, d: 4 }}
console.log(mergeObj); // { a: 1, b: 2, c: 3, d: 4 }
// 元のオブジェクトと同じプロパティ名がある場合、値を置き換える
const replaceObj = {...obj, b: 10};
console.log(replaceObj); // { a: 1, b: 10 }オブジェクトのプロパティが沢山ある場合は、スプレッド演算子を使うことで、プロパティの参照や追加をかんたんに行うことができます。
オブジェクトの分割代入
オブジェクトのプロパティにアクセスする際に、obj.keyと何度も記述するのは効率が悪いです。
そういった場合には、分割代入を使用することで効率良く記述できるようになります。
const obj = {
a: 1,
b: 2,
c: 3
};
const { a, b, c } = obj;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3a、b、cのキーを取り出して、変数として定義します。
このように分割代入することで、呼び出したいキーを記述するだけで、プロパティへのアクセスができるようになります。
オブジェクトの変更
プロパティにアクセスする方法で、値を変更することができます。
const obj = {
a: 1,
b: 2,
c: 3
};
obj.c = 10;
console.log(obj); // { a: 1, b: 2 , c: 10 }cの値が3から10に変更されました。
オブジェクトの削除
delete演算子を使用してオブジェクトの削除ができます。
const obj = {
a: 1,
b: 2,
c: 3
};
delete obj.c;
console.log(obj); // { a: 1, b: 2 }cの値が削除されました。
まとめ
今回は、オブジェクトのさまざまな操作方法を解説をしました。
オブジェクトはプロパティの参照だけでなく、インスタンス化や展開することができます。
このような操作は、今後JavaScriptの応用を学んでいくにあたり役に立つ知識です。これを機にオブジェクトの基本の操作を身に付けていきましょう。
コメント