JavaScriptオブジェクトの考え方・生成・取得、プロパティの追加・変更、オブジェクトのメソッド

 JavaScriptオブジェクトの考え方

・JavaScriptにおけるオブジェクトは、データや機能をまとめた情報そのもののことを指します。

・JavaScriptのオブジェクトは、名前と値をセットにしてデータを管理する。

 JavaScriptオブジェクトの生成方法

let 変数名(オブジェクト名) = {この中にプロパティを記載する}

※ let ではなく const でも可

※let 〜 }閉じかっこまでが一つのオブジェクト

プロパティとは

オブジェクトが持つ属性のこと

例 

let car = {name:'carolla'}

nameはプロパティ名、carollaは対応する値となります。

 つまり以下のようになります。

let 変数名 = {プロパティ名:'対応する値'}

JavaScriptオブジェクトの値の取得方法

let car = { name: 'carolla' }

console.log(car.name)

※オブジェクト名.プロパティ名になります。

JavaScriptプロパティの追加方法

オブジェクトの追加には２つの方法がある

①「　変数名（オブジェクト名）.プロパティ名　＝　XXX（値を代入）　」

②「　変数名['プロパティ名'　]　= XXX（値を代入） 」

let car = { name: 'carolla' }

car.collor = red
car['size'] = 'セダン'

console.log(car)

JavaScriptプロパティの変更方法

変更方法は一つ

「　オブジェクト名.プロパティ名　＝　変更したい値　」

例

let car = { name: 'carolla' }

car.collor = red
car['size'] = 'セダン'

console.log(car)

car.name = 'lexus'

これで、出力したとき lexus が表示される

JavaScriptオブジェクトのメソッド操作

 例

let car = { name: 'carolla' 

プロパティ名: function(引数){ここに処理を記載}
}

car.プロパティ名(引数)

 例２

let car = { name: 'carolla' 

driving: function(){
　console.log(’私が運転している車は＄{car.name}です。})
}

car.driving()

これで、「　私の運転している車はcarolladeです。　」と表示される。

JS様々な関数定義

関数宣言

function 関数名( 引数 ){
  // ここに関数の処理を記載
}

関数式

変数 = function( 引数 ){
  //ここに関数の処理を記載
}

無名関数

const hello = function(){
  console.log('こんにちわ')
}

※無名関数は、関数名なしで関数を定義できるためコードが簡潔になる

即時関数

(function countNum(num) {
  console.log(num)
})(1)

()に中にfunctionから始まる関数定義を記載すると、その関数を即実行する

アロー関数

const 変数名 = () => {
  処理
}

functionの代わりに　() =>を使うことができる。これにより短い記述での関数定義ができる

関数宣言・・・標準的な関数の定義

無名関数・・・関数を多く使用するコードの時に使用する。関数名の重複を避ける

即時関数・・・流用する可能性のない関数の時に使う。

アロー関数・・・無名関数・即時関数に置いて、より省略した記述をしたい場合に使う

JavaScript 関数の定義をする方法

このブログでは、JavaScript　関数の定義をする説明をする

目次

・関数の定義をする型

・関数の定義をする型の記入例

関数の定義をする型

※fanctionを使う,functionは日本語で「関数」の意味

function 関数名( ) {
  // ここに処理内容を記載する
}

関数に定義する型の記入例

function greeting(){
  console.log("こんにちは！")
}

greeting()

→コンソールで、「　こんにちは！　」と表示される　

JavaScript 配列の繰り返し処理

このブログでは、JavaScriptで配列の繰り返し処理を取得するときの説明をする

目次

・配列の繰り返し処理の型

・配列の繰り返し処理の記入例

配列の繰り返し処理の型

※forEach関数を使う

配列.forEach( function (value名) {

ここに処理内容を記述

} )

配列の繰り返し処理の記入例

fruits = ["apple","orange","grape"]

fruits.forEach( function(item) {

 console.log(item)

})

→apple

→orange

→grape

JavaScript 配列の繰り返し処理

このブログでは、JavaScriptで配列の繰り返し処理を取得するときの説明をする

目次

・配列の繰り返し処理の型

・配列の繰り返し処理の記入例

配列の繰り返し処理の型

※forEach関数を使う

配列.forEach( function (value名) {

ここに処理内容を記述

} )

配列の繰り返し処理の記入例

fruits = ["apple","orange","grape"]

fruits.forEach( function(item) {

 console.log(item)

})

→apple

→orange

→grape

JavaScriptの繰り返し処理

このブログでは、JavaScriptで繰り返し処理を取得するときの説明をする

目次

・繰り返し処理の型

・繰り返し処理の記入例

繰り返し処理の型

※for文を使う

for ([初期化式]; [条件式]; [加算式]){

 ここに繰り返す処理の内容を書く

}

初期化式とは？

・for文の中で使用する変数を定義する。ここで定義した変数は「今何回目の処理か」を判定するために参照される

条件式とは

・for文の処理を何回繰り返すかを指定する。この条件式の戻り値がtureである限り処理は行われ続ける。

加算式

初期化式として定義した変数の増減を記述できる。

変数を「　i　」とし、i=i+1と加算式に書いた場合１周毎に１が加算されて、処理が実行される。

※「i=i+1」の省略形として「i += 1」「 i++ 」がある。慣習的に「i++」を使うことが多い

繰り返し処理の記入例

for ( let i = 1; i <= 100; i++) {

console.log(`${num}回目の出力`)

num += 1

}

→１回目の処理

→２回目の処理

→３回目の処理

...

→１００ 回目の処理

例２つめ

let num = 1
for (let i = 1; i <= 10; i += 2) {
console.log(`${num}`)
num += 3
}

→1

→3

→7

→10

→13

解説

let num = 1 　　これで変数numに１を代入している

for で繰り返し処理を宣言

let i = 1 　　これで、処理一回目のカウントを１としている

i <= 10　　 これで、処理回数を１０回までとしている

i += 2　　　これで、処理が１回行われる毎に処理回数を２つ増やす

num +=3     これで、１回処理が行われる毎に3づつ出力する値を増やす。

for (let i = 1; i <= 10; i += 2)　・・・これで処理回数についての説明をしていて

num +=3 ・・・これで、出力する値についての説明をしている

JavaScriptの配列

このブログでは、JavaScriptで配列を取得するときの説明をする

目次

・配列の型

・配列の記入例

配列の型

※ifを使う

const(letでも可)　変数名　= ["配列名１","配列名２","配列名３"]

console.log(list)　※配列の内容を全て取得

console.log(list[2]) 　※配列の内容の３番目を取得（添字）

配列の記入例

const list = ["スガ","アベ","ノダ"]

console.log(list)

→(3) ["スガ","アベ","ノダ"]

console.log(list[2]) 

→ ["ノダ"]