Programming Self-Study Notebook

勉強したことを忘れないように! 思い出せるように!!

JavaScriptの文法(変数・定数・リテラル・データ型)

f:id:overworker:20200406080809j:plain:h250

「変数と定数」と「リテラル

リテラル
数値リテラル
(numeric literal)
文字列リテラル
(string literal)
宣言(declaration) let 変数(variable) 数値変数 文字列変数
const 定数(constant) 数値定数 文字列定数
// 数値リテラル
    // 定数
    const a = 1;

    // 変数
    let b = 2;

// 文字列リテラル
    // 定数
    const c = "3";

    // 変数
    let d = "4";

プリミティブ型とオブジェクト

プリミティブ型 オブジェクト
・数値(Number)
・文字列(String)
・論理値(boolean)
・null
・undefined
・シンボル(Symbol)
・配列(Array)
・日時(Date)
正規表現(RegExp)
・マップ(Map)
・ウィークマップ(WeakMap)
・セット(Set)
・ウィークセット(WeakSet)

数値

  • JavaScriptは数値を表す型が一つしかない。
  • 数値リテラル:10進数(整数、小数、10を底とした指数表現)、2進数、8進数、16進数

  • 特殊表現:Infiity、-Infinity、Nan

文字列

引用符

  • 引用符には”(ダブルクォート)'(シングルクォート)がある。

  • 文字列リテラルとして”(ダブルクォート)を使用している場合、文字列の内部で'(シングルクォート)が利用できる。

consst message = "I'm happy!";
  • 文字列リテラルとして'(シングルクォート)を使用している場合、文字列の内部で”(ダブルクォート)が利用できる。
consst message = '"Me too"';

エスケープ

  • \(バックスラッシュ)を使用すると、引用符エスケープすることができる。
consst message = "\"I'm happy!\" \"Me too\"";

テンプレートリテラル

\(バッククォート)`を使用することで、文字列の中に変数を埋め込むようなテンプレートを作ることができる。

let month = 7;
let day = 11;
console.log(`今日は${month}月${day}日です。`);  //今日は7月11日です。

複数行にわたる文字列

  • ES2015から複数行にわたるコメントがサポートされるようになりました。
  • 「文字列の改行部分に改行コードを挿入する」と「画面(エディター)上の改行をエスケープする」を実施する必要があります。

  • 私が好きな方法は方法③です。

    • あえて複数行のコメントを使用する必要は無いと思います。
    // 方法①:3行のコメントを1行のコードにする場合
/*
閑さや
岩にしみ入
蝉の声
*/

    const comment1 = '閑さや\n岩にしみ入\n蝉の声';
    console.log(comment1);

    // 方法②:3行のコメントを3行のコードにする場合
    //        ->インデントがあるので、構造が分かりにくくなる)
/*
閑さや
岩にしみ入
蝉の声
*/

    const comment2 = '閑さや\n\
岩にしみ入\n\
蝉の声';
console.log(comment2);

    // 方法③:3行のコメントを1行のコード×3にする場合
/*
閑さや
岩にしみ入
蝉の声
*/

    const comment3 =  '閑さや\n' +
                      '岩にしみ入\n' +
                      '蝉の声';
    console.log(comment3);

文字列としての数値

  • 数を含む文字列は、処理系が自動で数値へ変換することがある。
  • 数は、処理系が自動で文字列へ変換することがある。
// ---------- 
// 文字列としての数値(足し算)
// ---------- 
const comment1 = 4+ '4';
console.log(comment1);        // '44'

const comment2 = 4+ '04';
console.log(comment2);        // '404'

const comment3 = '40'+4;
console.log(comment3);        // '404'

const comment4 = '4'+4;
console.log(comment4);        // '44'

// ---------- 
// 文字列としての数値(引き算)
// ---------- 
const comment5 = 4 - '04';
console.log(comment5);        // 0

const comment6 = '04' - 4;
console.log(comment6);        // 0

// ---------- 
// 文字列としての数値(かけ算)
// ---------- 
const comment7 = 4 * '04';
console.log(comment7);        // 16

const comment8 = '04' * 4;
console.log(comment8);        // 16

// ---------- 
// 文字列としての数値(わり算)
// ---------- 
const comment9 = 4 / '04';
console.log(comment9);        // 1

const comment10 = '04' / 4;
console.log(comment10);       // 1

論理値

  • ture/falseのいずれか

シンボル

  • 作成したシンボル(symbol)はユニークであり、他のシンボルと同じになることはない
  • プリミティブであり、リテラルによる表現を持たない

nullとundefined

  • null
    • データ型の一つ
  • undefined
    • まだ値を指定していないことを表す

オブジェクト

オブジェクトのプロパティ(またはメンバー)にアクセスする方法

const profile = {};

profile.name = "taro";
profile['sex'] = 'male';
profile["age"] = 25;
console.log(profile);//{name: "taro", sex: "male", age: 25}

生成時に値を指定しする方法

  • 最後のプロパティを追加した後にも,をつけることができます。
  • Internet Exprorerの以前のバージョンでは、構文的に問題ないはずの上記表現がErrorになていたらしい。
  • ブラウザの種類に依存しないコードを作成するために、昔は最後のプロパティに,をつけない慣例がありました。

  • JSONとしては、最後のプロパティの後に,をつけることが禁止されています。

const profile = {
    name : 'taro',
    sex : 'male',
    age : 25,
};
console.log(profile);//{name: "taro", sex: "male", age: 25}

プロパティに関数を持たせる

const profile = {};
profile.name = function(){return 'taro';}
console.log(profile);         // {name: ƒ}
console.log(profile.name);    // ƒ (){return 'taro';}
console.log(profile.name());  // taro

プロパティを削除する

const profile = {
    name : 'taro',
    sex : 'male',
    age : 25,
};
console.log(profile);//{name: "taro", sex: "male", age: 25}

delete profile.sex;
console.log(profile);//{name: "taro", age: 25}

配列

  • 固定長ではない
    • 追加、削除が可能
    • 個々の要素の型は同じである必要は無い
    • 添え字は0から始まる
const array =[1,'2','3','四'];
console.log(array[0]);    // 1
console.log(array[1]);    // 2
console.log(array[2]);    // 3
console.log(array[3]);    // 四
console.log(array[4]);    // undfined
console.log(array);       // [1, "2", "3", "四"]
array[6] = 'add';
console.log(array);       // [1, "2", "3", "四", empty × 2, "add"]

日時

  • 日時を扱うオブジェクト
  • JavaからJavaScriptへ引き継がれた機能の一つ
  • 日時処理はmomentjsを使うことを進めます
const now = new Date();
console.log(now);                    //Sun Jul 12 2020 16:00:10 GMT+0900 (日本標準時)
console.log(date.getFullYear());     // 2020
console.log(date.getMonth());        // 6 (0から始まる)
console.log(date.getDate());         // 12 
console.log(date.getDay());          // 0 (0:日曜日~6:土曜日)
console.log(date.getHours());        // 16
console.log(date.getMinutes());      // 0
console.log(date.getSeconds());      // 10
console.log(date.getMilliseconds()); // 339

正規表現

  • 文字列に対し、検索や置換を行うときに便利

MapとSet

名称 関係する型 (Weakなモノ)
Map オブジェクト WeakMap
Set 配列 WeakSet

データの型変換

数値への変換

Numberオブジェクトのコンストラクタを使用する

  • 数値変換できない文字列を変換しようとした場合はNaNとなる
const input = '123.456';
console.log(input);        // '123.456'
const check = Number(input);
console.log(check);        // 123.456

const input2 = '123';
const check2 = Number(input2);
console.log(check2);    // NaN

parseInt(),parseFloat()を使用する。

  • 数値以外が混ざっていても無視されます。
    • 無視のされ方は、確認しましょう。
const input1 = '7月';
console.log(parseInt(input1,10));    // 7
const input2 = '7月12日';
console.log(parseInt(input2,10));    // 7

文字列への変換

  • toString()を使用する。
const now = new Date();
console.log(now);                    // Sun Jul 12 2020 16:00:10 GMT+0900 (日本標準時)
console.log(now.toString());         // Sun Jul 12 2020 16:00:10 GMT+0900 (日本標準時)

const array =[1,'2','3','四'];
console.log(array.toString());      // 1,2,3,四

論理値への変換

  • Booleanコンストラクタを使う
const n = 1;
const flag = Boolean(n);
console.log(n);      // 1
console.log(flag);   // true

参考文献