javascript学習メモ

javascriptとNode.js、vue.js、react.jsを学習メモ
初心のことを忘れずに基本的なことをメモしています。

参考サイト

JavaScript

• paiza
  • paizaは初心者ifと変数ぐらいしかなかったので物足りない
• Progate
  • 変数、関数、引数、if for　など基本的なことはのっていた。（ただ全部やろうとすると有料…）
• JavaScript | MDN
  • mozillaのJavaScriptチュートリアル、わからないことはだいたいここで調べる

javascript

関数

• console.log()
  • テキスト表示
• process.stdout.write()
  • テキスト表示
• Math.randam()
  • 少数のランダムを表示
• parseInt()
  • 少数を切り捨て
  • * をつけることで数値を指定する
• Math.pow(底, 指数)
  • Math.pow(2, 3); //8が出力される
• trim()
  • 呼び出し元の文字列の両端から空白を取り除いた新しい文字列。

比較演算子

使用例	意味
a == b	a と b が等しい
a != b	a と b が等しくない
a === b	a と b が等しい（厳密に等しい）
a !== b	a と b が等しくない（厳密に等しくない）
a < b	a が b よりも小さい
a > b	a が b よりも大きい
a <= b	a が b 以下である
a >= b	a が b 以上である

javascriptの比較演算子は、2種類の書き方がある

JavaScript の比較には、厳密な (strict) ものと、型変換を伴うものがあります。厳密な比較 (例えば ===) では、オペランドが同じ型で、かつ内容が一致しているときだけ真になります。より一般的に使われる抽象的な (abstract) 比較 (例えば ==) では、比較の前にオペランドを同じ型に変換します。抽象的な関係比較 (例えば <=) では、比較の前に、まずオペランドをプリミティブな値に変換し、さらに同じ型に変換します。

参照 MDN-比較演算子

等しい (==)と厳密に等しい(===)の違い

等価演算子は、2つのオペランドが同じ型でないならばオペランドを変換して、それから厳密な比較を行います。両方のオペランドがオブジェクトならば、JavaScript は内部参照を比較するので、オペランドがメモリ内の同じオブジェクトを参照するときに等しくなります。

例 x == y

 1   ==  1        // true
 "1"  ==  1        // true この場合自動的に文字列"1"を数値1に変換してくれる
  1   == '1'       // true
  0   == false     // true
  0   == null      // false
 var object1 = {"value":"key"}, object2={"value":"key"};
 object1 == object2 // false
  0   == undefined // false> null  == undefined // true

例 x === y

3 === 3   // true
3 === '3' // false 文字列'3'を数値3に変換してくれないので、falseを返す
var object1 = {"value":"key"}, object2={"value":"key"};
object1 === object2 // false

条件（三項）演算子

条件 ? 値1 : 値2
条件が真の場合、演算子は値1の値を選択します。そうでない場合、値2の値を選択します。標準的な演算子を使用できる場所ならどこでも条件演算子を使用できます。

MDNから引用

const ageStatus = (age >= 18) ? 'adult' : 'kids';
console.log(ageStatus);

この場合、18以上ならadultが入り、18未満ならkidsが入る

論理演算子

演算子	使用法	説明
AND(&&)	expr1 && expr2	expr1 を false と見ることができる場合は、expr1 を返します。そうでない場合は、expr2 を返します。したがって、真偽値と共に使われた場合、 演算対象の両方が true ならば、&& は、true を返し、そうでなければ、false を返します。
OR (｜｜)	expr1 ｜｜ expr2	expr1 を true と見ることができる場合は、expr1 を返します。そうでない場合は、expr2 を返します。したがって、真偽値と共に使われた場合、 演算対象のどちらかが true ならば、
NOT (!)	!expr	単一の演算対象が true と見ることができる場合は、false を返します。そうでない場合は、true を返します。

if 文

if (条件式1) {
   実行式1
} else if (条件式2) {
   実行式2
}
...
else {
   どれにも当てはまらないときの実行式
}

複雑になってきたら、switch 文がある

switch (expression) {
  case value1: //ここはコロン
    // 式の結果が value1 にマッチする場合に実行する文
    break;
  case value2:
    // 式の結果が value2 にマッチする場合に実行する文
    break;
  ...
  default:
    // 式の値にマッチするものが存在しない場合に実行する文
    break;
}

繰り返し文（while）

while (条件式) {
  実行式
}

1. 条件式の真偽が判定されます。
2. 条件式がtrueのとき処理が実行され、falseのとき繰り返しが終了します。

注意

var i = 1;
while(i <= 5){
  console.log(i);
}//これだとi = 1 が永遠に続き、console.log(i);が無限ループする

var i = 1;
while(i <= 5){
  console.log(i);
  i = i + 1;
}//こうするとconsole.log(i);のあとに条件式はiに1が追加されるので抜け出せる

繰り返し文（for）

for (変数の定義; 条件式; 変数の更新) {
   実行式;
}

// 上のwhile式だと
for (var i = 0; i < 5; i = i + 1) {
   console.log(i);
}

// 計算式は、省略可能
for (var i = 0; i < 5; i ++) {
   console.log(i);
}

配列

var items = {値1,値2,値3}
console.log(item); //[値1,値2,値3]が出力される
console.log(item[0]); //値1が出力される

length

var items = {値1,値2,値3}
console.log(items.length); 4が出力される

push

var items = {値1,値2,値3}
items.push("値4");
console.log(items); [値1,値2,値3,値4]と値4が追加される

forとの組み合わせ

var items = {値1,値2,値3}
for(var i = 0;i < items.length; i++){
  console.log(items[i]) //値1　値2　値3が順番に出力される
}

連想配列

var items = {キー1:値1,キー2:値2,キー3:値3}
console.log(items.キー1); //値1が出力される
console.log(items.["キー1"]); //値1が出力される

関数

関数名()と書くことで、呼び出すことができる

function hoge() {
  console.log("Hello World");
}
hoge(); //Hello Worldと出力される

グローバル変数とローカル変数

グローバルスコープ

関数の外で定義された変数は、グローバルスコープというスコープを持ち、プログラムのどこでも使うことができます。
また、グローバルスコープを持つ変数のことをグローバル変数と呼びます。

ローカルスコープ

関数の中で定義された変数は、ローカルスコープというスコープを持ち、その変数が定義された関数の中でしか使うことができません。
また、ローカルスコープを持つ変数のことをローカル変数と呼びます。

var world = "Hello World"
function hoge() {
  var world = "Hello Japan"
  console.log(world);
}
hoge(); //Hello Japanと出力される
console.log(world); //Hello Worldと出力される

引数

引数に値を渡して関数を呼び出すには、「function 関数名(値)」と書きます。関数は指定した値を受け取り、その値は引数に代入されます。

function hoge(world) {
  console.log(world);
}
hoge("Hello World"); //Hello Worldと出力される

1. 関数hogeの呼び出し時に「"Hello World"」という値が渡され、引数worldに代入されています。
2. console.log(world)のworldに引数Hello Worldが代入される

複数の値も可能

function hoge(world,country) {
  console.log(world + "と" + country);
}
hoge("Hello World","Hello Japan"); //Hello WorldとHello Japanが出力される
function hoge(world,country) とhoge("Hello World","Hello Japan")は順番はそれぞれ第1引数（world）に"Hello World"、第2引数（country）に"Hello Japan"が代入される

return

関数の中でreturnを使うと、呼び出し元で値を受け取れるようになります。
「return 値」と書くことで、関数はその値を戻り値として返します。

returnは、戻り値を返すだけでなく、関数の処理を終了させる性質も持っています。

function hoge(world) {
  return "Hello World";
}
console.log(hoge("Hello World")); //Hello Worldと出力される

Map オブジェクト

Map オブジェクトは単純なキー/値写像（マップ）です。キーあるいは値として任意の値（オブジェクト、プリミティブ値とも）を使うことができます。

Map (MDN)

配列を使って処理

const numbers = [1,2,3,4,5];

const numbersResult = numbers.map(function( value ) {

    //配列の各要素を2倍にする
    return value * 2;

})

console.log( numbersResult );
# [2, 4, 6, 8, 10]と表示される