javascript 基本その2 基本操作

昨日に続いて、javascriptの投稿です。
Node.jsについても投稿したいところですが、混乱してきそうなので
学んできたことを順番に投稿していこうと思います。

条件分岐

javascriptではif構文を使用します。

条件分岐

if (条件式1) {
  // 条件式1がtrueのときの処理
} else if (条件式2) {
  // 条件式1がfalseで条件式2がtrueのときの処理
} else {
  // 条件式1も条件式2もfalseのときの処理
}

// ()が条件、{}が処理内容を記述する形です。

条件分岐の例

let num = 60;

if (num % 15 == 0) {
  console.log(num + 'は3と5の倍数です');
} else if (num % 3 == 0) {
  console.log(num + 'は3の倍数です');
} else if (num % 5 == 0) {
  console.log(num + 'は5の倍数です');
} else {
  console.log(num + 'は3の倍数でも、5の倍数でもありません');
}

配列

Rubyと同様に配列が扱えます。

配列の例

let list = ['a', 'b', 'c', 'd', 'e'];
console.log(list);

//これで　["a", "b", "c", "d", "e"]が出力されます。

配列の要素を取得

配列は0から始まります。
基本左から欲しい要素-1で取得します。

let list = ['a', 'b', 'c', 'd', 'e'];
console.log(list[2]);

// これで 2: c が出力されます。

配列の要素数を取得する

Rubyと同様にlengthメソッドが利用できます。

let list = ['a', 'b', 'c', 'd', 'e'];
console.log(list.length);
// これで length: 5 が出力されます。

配列の要素を追加する

Rubyと同様にpushメソッドが利用できます。

let list = ['a', 'b', 'c', 'd', 'e'];
list.push('f');
console.log(list);
// これで ["a", "b", "c", "d", "e","f"] が出力されます。

配列の要素を削除する

popメソッドは配列の最後の要素を取り除きます
shiftメソッドは配列の先頭の要素を取り除きます。
Rubyでは取り除く要素数を指定できますが、JavaScriptではできません。

popメソッド

let list = ['a', 'b', 'c', 'd', 'e'];
list.pop();
// これで　["a", "b", "c", "d"]が出力されます。

shiftメソッド

let list = ['a', 'b', 'c', 'd', 'e'];
list.shift();
// これで　["b", "c", "d", "e"]が出力されます。

オブジェクト

オブジェクトはデータのまとまりのことです。
配列は順番でデータを管理しますが、オブジェクトは名前と値をセットにしてデータを管理します。

オブジェクトを作成するには波カッコ{}を用います。

作成

let obj = {}; 

オブジェクトはデータを名前と値をセットで管理します。
このセットをプロパティと言います。

例

let obj = { name: 'gimei' }; //これでプロパティが設定されました。

プロパティの値を取得

値を取得

let obj = { name: 'gimei', age: 25, address: 'tokyo' };
console.log(obj.name);

//これでgimeiが出力されます。

プロパティの値を変更

オブジェクトに対してプロパティ名を続けて記載することで値を取り出すことができます。

値を取得

let obj = { name: 'gimei', age: 25, address: 'tokyo' };
obj.name = 'gimei2';
console.log(obj.name);

//これでgimei2が出力されます。

繰り返し処理

繰り返しはfor文を使います。

繰り返し処理

for (初期値; 繰り返す回数の条件; 初期値への毎回の処理) {
  // 繰り返す処理の内容
}

//もう少し詳しく書くと

for (let i = 0; i < 繰り返す回数; i = i + 1) {
  // 繰り返す処理の内容
}

繰り返し処の例

num = 1;
for (let i = 0; i < 10; i += 1) {
  console.log(num + '回目の出力')
  num +=  1
}

これで下記のような出力がされます。
1回目の出力
2回目の出力
~
10回目の出力

関数を定義

Rubyでは def ~ end で囲むことで関数を定義しましたが
JavaScriptで関数を定義するにはfunction文を使います。

関数の定義

function 関数名(引数) {
  // 処理の内容
}

関数の定義の例

function sayHello(){
  console.log('hello');
}
//関数を一つ定義

function sayName(name){
  console.log(name);
}
//関数を二つ目定義

let myName = 'gimei'; 
//変数に値を設定
sayHello();
sayName(myName);
//下二行でそれぞれ関数を出力

//hello,gimeiが出力される。

関数の戻り値を明示

Rubyでは関数における最後の戻り値が関数の戻り値として処理されましたが
JavaScriptではreturnを用いて明示する必要があります。

戻り値

function calc(num1,num2){
  return num1*num2; //ここに注目、
}

let num1 = 3;
let num2 = 4;
console.log(calc(num1,num2));

//12と出力

悪い例

function calc(num1,num2){
  num1*num2; //returnがないので値を返さない。
}

let num1 = 3;
let num2 = 4;
console.log(calc(num1,num2));

//出力されず。

無名関数を定義

JavaScriptにおける関数の定義には2種類の方法があります。
関数宣言と呼ばれ、これまで学んで来た方法で、
無名関数と呼ばれ、コードの中に書き込む関数式と呼ばれる方法です。

関数定義

// 関数宣言
function hello(){
  console.log('hello');
}

// 関数式（無名関数）
let hello = function(){　　//helloがletに定義され、functionにはなくなってます。
    console.log('hello');
}
//関数名が変数名に定義される形です。

無名関数

let hello = function(){
    console.log('hello');
}

hello();
//これでhelloが出力されます。

関数宣言と無名関数の違い

読み込まれる順番が違い
間違えると出力されません。

関数宣言は先に読み込まれるために、
このような事象が発生します。一方で、関数式であれば先に読み込まれることはありません。

関数宣言

hello();

function hello(){
    console.log('hello');
}
// helloとエラー無く出力
// 関数宣言は先に読み込まれるためです。

無名関数

hello();

let hello = function(){
    console.log('hello');
};
// hello is not a function...といった形でエラーが表示されます。
// 関数宣言がないためこうなります。