JSチュートリアル

JSホーム JSの紹介 JSどこへ JS出力 JSステートメント JS構文 JSコメント JS変数 JS Let JSConst JSオペレーター JS算術 JS割り当て JSデータ型 JS関数 JSオブジェクト JSイベント JS文字列 JS文字列メソッド JS文字列検索 JS文字列テンプレート JS番号 JS番号メソッド JSアレイ JS配列メソッド JS配列ソート JSアレイの反復 JSアレイ定数 JSの日付 JSの日付形式 JS DateGetメソッド JS日付設定メソッド JS数学 JSランダム JSブール値 JSの比較 JS条件 JSスイッチ JSループFor JSループフォーイン JSループの JSループWhile JSブレイク JSIterables JSセット JSマップ JS Typeof JS型変換 JSビット単位 JS RegExp JSエラー JSスコープ JSホイスト JS厳密モード JSこのキーワード JSアロー関数 JSクラス JS JSON JSデバッグ JSスタイルガイド JSのベストプラクティス JSの間違い JSパフォーマンス JS予約語

JSバージョン

JSバージョン JS 2009(ES5) JS 2015(ES6) JS 2016 JS 2017 JS 2018 JS IE /エッジ JSの歴史

JSオブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクト表示 オブジェクトアクセサー オブジェクトコンストラクター オブジェクトのプロトタイプ オブジェクト反復可能 オブジェクトセット オブジェクトマップ オブジェクトリファレンス

JS関数

関数の定義 関数パラメーター 関数の呼び出し 関数呼び出し 機能適用 関数クロージャ

JSクラス

クラスイントロ クラス継承 クラス静的

JS非同期

JSコールバック JS非同期 JSの約束 JS Async / Await

JS HTML DOM

DOMイントロ DOMメソッド DOMドキュメント DOM要素 DOM HTML DOMフォーム DOM CSS DOMアニメーション DOMイベント DOMイベントリスナー DOMナビゲーション DOMノード DOMコレクション DOMノードリスト

JSブラウザBOM

JSウィンドウ JS画面 JSロケーション JSの歴史 JSナビゲーター JSポップアップアラート JSタイミング JSクッキー

JS Web API

WebAPIイントロ WebフォームAPI Web履歴API WebストレージAPI WebワーカーAPI Web Fetch API Web Geolocation API

JS AJAX

AJAXイントロ AJAX XMLHttp AJAXリクエスト AJAX応答 AJAXXMLファイル AJAX PHP AJAX ASP AJAXデータベース AJAXアプリケーション AJAXの例

JS JSON

JSONイントロ JSON構文 JSONとXML JSONデータ型 JSON解析 JSON文字列化 JSONオブジェクト JSON配列 JSONサーバー JSON PHP JSON HTML JSON JSONP

JSとjQuery

jQueryセレクター jQuery HTML jQuery CSS jQuery DOM

JSグラフィックス

JSグラフィックス JSキャンバス JSPlotly JS Chart.js JSグーグルチャート JS D3.js

JSの例

JSの例 JS HTML DOM JSHTML入力 JSHTMLオブジェクト JSHTMLイベント JSブラウザ JSエディター JS演習 JSクイズ JS証明書

JSリファレンス

JavaScriptオブジェクト HTMLDOMオブジェクト


JavaScriptオブジェクトのプロパティ


プロパティは、JavaScriptオブジェクトの最も重要な部分です。


JavaScriptのプロパティ

プロパティは、JavaScriptオブジェクトに関連付けられた値です。

JavaScriptオブジェクトは、順序付けされていないプロパティのコレクションです。

プロパティは通常、変更、追加、および削除できますが、一部は読み取り専用です。


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

オブジェクトのプロパティにアクセスするための構文は次のとおりです。

objectName.property      // person.age

また

objectName["property"]   // person["age"]

また

objectName[expression]   // x = "age"; person[x]

式はプロパティ名に評価される必要があります。

例1

person.firstname + " is " + person.age + " years old.";

例2

person["firstname"] + " is " + person["age"] + " years old.";


JavaScript for ... in Loop

JavaScriptfor...inステートメントは、オブジェクトのプロパティをループします。

構文

for (let variable in object) {
  // code to be executed
}

ループ内のコードのブロックは、for...inプロパティごとに1回実行されます。

オブジェクトのプロパティをループする:

const person = {
  fname:" John",
  lname:" Doe",
  age: 25
};

for (let x in person) {
  txt += person[x];
}

新しいプロパティの追加

値を指定するだけで、既存のオブジェクトに新しいプロパティを追加できます。

人物オブジェクトがすでに存在すると仮定します。次に、新しいプロパティを指定できます。

person.nationality = "English";

プロパティの削除

キーワードはdelete、オブジェクトからプロパティを削除します。

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

delete person.age;

またはperson ["age"]を削除します。

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

delete person["age"];

deleteキーワードは、プロパティの値とプロパティ自体の両方を削除します

削除後、プロパティは再び追加されるまで使用できません。

delete演算子は、オブジェクトのプロパティで使用するように設計されています変数や関数には影響しません。

演算子は、delete事前定義されたJavaScriptオブジェクトのプロパティでは使用しないでください。アプリケーションがクラッシュする可能性があります。


ネストされたオブジェクト

オブジェクトの値は別のオブジェクトにすることができます。

myObj = {
  name:"John",
  age:30,
  cars: {
    car1:"Ford",
    car2:"BMW",
    car3:"Fiat"
  }
}

ドット表記またはブラケット表記を使用して、ネストされたオブジェクトにアクセスできます。

myObj.cars.car2;

また:

myObj.cars["car2"];

また:

myObj["cars"]["car2"];

また:

let p1 = "cars";
let p2 = "car2";
myObj[p1][p2];

ネストされた配列とオブジェクト

オブジェクトの値は配列にすることができ、配列の値はオブジェクトにすることができます。

const myObj = {
  name: "John",
  age: 30,
  cars: [
    {name:"Ford", models:["Fiesta", "Focus", "Mustang"]},
    {name:"BMW", models:["320", "X3", "X5"]},
    {name:"Fiat", models:["500", "Panda"]}
  ]
}

配列内の配列にアクセスするには、配列ごとにfor-inループを使用します。

for (let i in myObj.cars) {
  x += "<h1>" + myObj.cars[i].name + "</h1>";
  for (let j in myObj.cars[i].models) {
    x += myObj.cars[i].models[j];
  }
}

プロパティ属性

すべてのプロパティには名前があります。さらに、それらにも価値があります。

値は、プロパティの属性の1つです。

その他の属性は、列挙可能、構成可能、および書き込み可能です。

これらの属性は、プロパティへのアクセス方法を定義します(読み取り可能か、書き込み可能か)。

JavaScriptでは、すべての属性を読み取ることができますが、変更できるのはvalue属性のみです(プロパティが書き込み可能である場合のみ)。

(ECMAScript 5には、すべてのプロパティ属性の取得と設定の両方のメソッドがあります)


プロトタイプのプロパティ

JavaScriptオブジェクトは、プロトタイプのプロパティを継承します。

キーワードはdelete継承されたプロパティを削除しませんが、プロトタイププロパティを削除すると、プロトタイプから継承されたすべてのオブジェクトに影響します。