JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでオブジェクト配列のプロパティにアクセスする方法

JavaScriptでオブジェクトのプロパティにアクセスするには、ドット記法（object.property）またはブラケット記法（object["property"]）を使用します。オブジェクトが配列に格納されている場合も、基本的なアクセス方法は同じです。まずは以下のサンプルコードを実行して、動作を確認してみましょう。

サンプルコード

<html>
<head>
<title>User-defined objects</title>
<script>
function book(title, author){
  this.title = title;
  this.author = author;
}
</script>
</head>
<body>
<script>
var myBook = new book("PHP", "Amit");
book.prototype.price = null;
myBook.price = 250;
document.write("Book title is : " + myBook.title + "<br>");
document.write("Book author is : " + myBook.author + "<br>");
document.write("Book price is : " + myBook.price + "<br>");
</script>
</body>
</html>

出力結果

Book title is : PHP
Book author is : Amit
Book price is : 250

コードのポイント

  • new book("PHP", "Amit")で、titleとauthorというプロパティを持つオブジェクトを生成しています。
  • book.prototype.price = null;により、コンストラクター関数のprototypeにpriceプロパティを追加し、すべてのインスタンスから利用できるようにしています。
  • myBook.price = 250;で、生成したインスタンスに実際の価格を設定しています。
  • document.write()を使って、各プロパティの値を画面に出力しています。

配列内の複数のオブジェクトにアクセスするには

オブジェクトが配列に格納されている場合は、インデックスを指定することで個別のオブジェクトにアクセスできます。さらに、forEach()やmap()といった配列メソッドを活用すれば、すべてのオブジェクトのプロパティを効率的に処理できます。

var books = [
  { title: "PHP", author: "Amit", price: 250 },
  { title: "Java", author: "Ken", price: 300 },
  { title: "Python", author: "Sato", price: 280 }
];

// インデックスで特定のオブジェクトのプロパティにアクセス
console.log(books[0].title); // PHP

// forEachですべてのオブジェクトを順に処理
books.forEach(function(book) {
  console.log(book.title + " : " + book.author);
});

このように、ドット記法やブラケット記法と配列操作メソッドを組み合わせることで、オブジェクト配列のプロパティを柔軟かつ簡潔に扱うことができます。用途に応じて使い分けると、コードの可読性と保守性が大きく向上します。

  1. JavaScriptでIDごとにオブジェクトの配列をグループ化する方法

    JavaScriptでオブジェクトの配列をidなどの特定のキーごとにグループ化したい場合、reduce()メソッドを使うと簡潔に実装できます。この記事では、どのプロパティにも対応できる汎用的なgroupBy関数を作成し、実際のサンプルコードとともにその仕組みを詳しく解説します。 reduce()によるグループ化の考え方 reduce()は、配列の各要素を順番に処理しながら、1つの累積値（ここではオブジェクト）を組み立てていくメソッドです。各要素からキーの値を取り出し、その値がまだ結果オブジェクトに存在しなければ新しい配列を作成して、そこへ要素を追加していくことでグループ化を実現します。 サ

  2. JavaScriptでオブジェクトを含む「配列の配列」をループ処理する方法

    JavaScriptでオブジェクトを含む多次元配列をループするには？JavaScriptでは、オブジェクトを含む配列の配列（入れ子構造の配列）をループ処理する際、forEach()メソッドをネストして使用し、さらにfor...inループで各オブジェクトのプロパティにアクセスするのが一般的な方法です。以下に、具体的な実装例を紹介します。コード例<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device