参考にした動画
写経 + 実験したコード
<html>
<body>
</body>
<script>
// 配列
userArray = [100,"iis_tio"]
console.log(userArray) //userArrayの全要素を表示させる。
console.log(userArray[0])
console.log(userArray[1])
//オブジェクト
userObject = {
id:100, //プロパティ
name:"iis_tio", //プロパティ
hairetu:[100,200],
boolHensuu:true,
profileObject : {
address:"xxx",
tel:"yyyy",
tel2:090, // javaScriptでは整数の先頭が 0 の場合には、それが8進数の表記であると解釈される。
// そのため、01 は8進数として解釈され、10進数の値 1 として扱われる。
// なので電話番号は整数ではなく文字列で扱う。
"tel3":"090",
},
// userObjectが持つmyFunctionという関数ではなくmyFunctionというメソッドという名称になる。
myFunction: function(){
alert("my function")
},
//thisは参照し、変更することができる
//thisの参照ver
myFunction2: function(){
alert("name = " + this.name)
},
//thisの変更ver
myFunction3: function(){
alert("name = " + this.name)
this.name = "suzuki-san"
alert("name = " + this.name)
},
}
userObject.name2 = "hoge"
userObject.profileObject.address2 = "zzz"
console.log(userObject) //userオブジェクトの全プロパティを表示させる。
console.log(userObject.id) //userオブジェクトのidプロパティだけを表示させる。
console.log(userObject[0]) //添字は使えない。undefinedになる。
console.log(userObject.name)//userオブジェクトのnameプロパティだけを表示させる。
console.log(userObject.id,userObject.name)//userオブジェクトのidとnameプロパティを表示させる。
console.log(userObject.profileObject.address)
console.log(userObject.profileObject.tel2)
console.log(userObject.profileObject.tel3)
console.log(userObject)//userObjectとprofileObjectのプロパティを確認できる
console.log(userObject.name2)//userObject.name2のhogeのプロパティを確認できる
console.log(userObject.profileObject.address2)//userObject.profileObject.address2のzzzのプロパティを確認できる
userObject.myFunction()
userObject.myFunction2()
userObject.myFunction3()
</script>
</html>
コンソール
オブジェクトとは
- 値の集合体である。
- オブジェクトの持つ値をプロパティと呼ぶ。
- 複数のデータを管理するならオブジェクトを使った方がいい
- データ型の一つ。
- 数値
- 文字列
- null
- bool
- 配列
- オブジェクト
- オブジェクトの中に配列、bool、オブジェクトを代入することができる。
- 動的に値を追加できる。
- 動的と静的の値の追加の違い
- 関数を持つことができる。
- オブジェクトが持つ関数のことをメソッドという
- オブジェクトの具体例
- document
- メソッドの具体例
- getElementById()
- addEventListener()
- getElementsByClassName()
配列とオブジェクトの違い
・配列は順序が重要な値の集合を表し要素という用語が使われる。
・オブジェクトは関連するデータをまとめるために使われ、プロパティという用語が使われる。
配列（Array）
・順序を持つ複数の値を格納するためのデータ構造。
・配列は要素を添字で管理でき、値の順序や位置が重要になる。
・オブジェクトは添字を利用できない替わりに、プロパティ名で管理できるから管理し易い。
オブジェクト（Object）
・オブジェクトは、関連するデータをまとめるためのデータ構造である。
・オブジェクトは、異なる種類のデータや複数の値をまとめるために使用され、プロパティの順序は重要ではなく、名前によってアクセスできる。
動的・静的の値の追加の違い
動的の値の追加
・既存のオブジェクトに後から新しいプロパティを追加することを指す。
・オブジェクトが既に存在する場合でも、プロパティを自由に追加することができる。
// プロパティを動的に追加
const user = {}; // 空のオブジェクトを作成
user.address = "xxx",
user.tel = "yyyy",
user.tel2 = 090,
console.log(user)
コンソール
静的の値の追加
・personオブジェクトを定義し、初期化時に address、tel、tel2 のプロパティを静的に追加しています。
・この方法では、オブジェクトの定義と同時にプロパティを指定することで、オブジェクトが作成されるときにプロパティが利用可能になる。
・静的な値の追加は、オブジェクトの初期化時にプロパティを同時に指定する場合に使用されます。
// プロパティを静的に追加
const person = {
address:"aaa",
tel:"bbb",
tel2:080,
};
console.log(person)
コンソール
