JavaScriptのオブジェクト操作まとめ

今回はJavaScriptのオブジェクト操作について。これのループ処理が順序不定になるのでよく戸惑います。(^-^;

定義

let object = { 1: "A", 3: "B", 5: "C", 2: "BB", 4: "B" };
console.log(object[2]);
console.log(object);

> BB
> { '1': 'A', '2': 'BB', '3': 'B', '4': 'B', '5': 'C' }

要素数を取得

Object.keys()メソッドでキーの配列を取得し、lengthで数を取得します。

let object = { 1: "A", 3: "B", 5: "C", 2: "BB", 4: "B" };
console.log(Object.keys(object).length);

> 5

ループ

for…in 文

順序不定でキーを取得します。

let object = { 1: "A", 3: "B", 5: "C", 2: "BB", 4: "B" };

for (let key in object) {
    console.log("%s: %s", key, object[key]);
}

> 1: A
> 2: BB
> 3: B
> 4: B
> 5: C

for…of 文

順序不定で要素を取得します。

let object = { 1: "A", 3: "B", 5: "C", 2: "BB", 4: "B" };

// キーを取得.
for (let key of Object.keys(object)) {
    console.log(key);
}

// 値を取得.
for (let value of Object.values(object)) {
    console.log(value);
}

// キーと値を取得.
for (let [key, value] of Object.entries(object)) {
    console.log("%s: %s", key, value);
}

> 1
> 2
> 3
> 4
> 5

> A
> BB
> B
> B
> C

> 1: A
> 2: BB
> 3: B
> 4: B
> 5: C

forEach() メソッド

順序不定でキーを取得し、キーを元に関数を実行します。

let object = { 1: "A", 3: "B", 5: "C", 2: "BB", 4: "B" };

Object.keys(object).forEach(function(key) {
    console.log("%s: %s", key, object[key]);
});

> 1: A
> 2: BB
> 3: B
> 4: B
> 5: C

追加

キーを指定して追加します。既にあるキーを指定した場合は値の変更になります。

let object = { 1: "A", 3: "B", 5: "C", 2: "BB", 4: "B" };
object[10] = "Z";
console.log(object);
object[4] = "D";
console.log(object);
object.a = "ABC";
console.log(object["a"]);

> { '1': 'A', '2': 'BB', '3': 'B', '4': 'B', '5': 'C', '10': 'Z' }
> { '1': 'A', '2': 'BB', '3': 'B', '4': 'D', '5': 'C', '10': 'Z' }
> ABC

削除

deleteを使用します。

let object = { 1: "A", 3: "B", 5: "C", 2: "BB", 4: "B" };
delete object[1];
console.log(object);

> { '2': 'BB', '3': 'B', '4': 'B', '5': 'C' }

プロパティの確認

in演算子を使うと指定されたプロパティがオブジェクトに存在するかチェックできます。
プロパティ名は文字列で指定する必要があります。(下記でyear in objectだとエラーになる)
ただし、数値の場合はそのままでも判定できます。

const object = { year: '2021', month: '01', 1: 'one' };

console.log(object.year);
console.log('year' in object);
console.log(object.day);
console.log('day' in object);
console.log(1 in object);
console.log('1' in object);

> 2021
> true
> undefined
> false
> true
> true
このエントリーをはてなブックマークに追加
にほんブログ村 IT技術ブログへ

関連コンテンツ

スポンサードリンク

コメント

メールアドレスが公開されることはありません。