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' }
このエントリーをはてなブックマークに追加
にほんブログ村 IT技術ブログへ

関連コンテンツ

スポンサードリンク

Comment

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