【JavaScript】JavaScriptの基本構文

学習中に忘れてしまうことがありましたので、書き留めます。
特に初学者の方の参考になればと思います。
JavaScriptES6

コンソール出力

nicotine.js

console.log("文字列");

コメントアウト

nicotine.js

//コメント

変数の定義

nicotine.js

let 変数名 = 値1;
//値を上書き
変数名 = 値2;

定数の定義

nicotine.js

const 定数名 = 値;
//上書きできない

テンプレートリテラル

nicotine.js

//変数を文字列に連結
console.log(`こんにちは、${変数名}さん`);

条件分岐

nicotine.js

//if文
if (条件式){
    処理;
} ←セミコロン不要

//switch文
switch (条件の値){
    case 値1:
        処理;
        break;
    case 値2:
        処理;
        break;
    default:
        処理
        break;
}

比較演算子

• 等号　===
• 不等号　!==

繰り返し処理

nicotine.js

//while文
while(条件式){
    処理;
    インクリメント;
}
//for文
for(変数定義; 条件式; インクリメント){
    処理;
}

配列

nicotine.js

//定義
const 配列名 = [値, 値, 値];
//値の参照
let 変数名 = 配列名[インデックス番号];
//値が無ければundefinedを返す
//undefinedは条件分岐ではfalse扱い

//配列の長さ
配列名.length;

オブジェクト

nicotine.js

//定義
const オブジェクト名 = {プロパティ1:値1, プロパティ2:値2};
//値の参照
オブジェクト名.プロパティ
//値が無ければundefinedを返す
//undefinedは条件分岐ではfalse扱い

配列、オブジェクトの組み合わせ

nicotine.js

//定義
const 配列名 = [
    {プロパティ:値, プロパティ:値},
    {プロパティ:値, プロパティ:値}
    ];
//値の参照
配列名[インデックス番号].プロパティ;

関数

nicotine.js

//定義
const 関数名 = (引数名)=>{
    処理;
};
//オブジェクトに定義
const 定数名 = {
    プロパティ: ()=>{
        処理;
    }
};
//呼び出し
関数名(引数);
//オブジェクトに定義した場合
定数名.プロパティ();

クラス

nicotine.js

//定義
class クラス名 {}
//インスタンス生成
const 定数名 = new クラス名();
//コンストラクタ
class クラス名{
    constructor(引数){
        this.プロパティ = 値;
    }
}
//インスタンスのプロパティ参照
インスタンス名.プロパティ
//メソッド定義
class クラス名{
    constructor(引数){
        this.プロパティ = 値;
    }
    メソッド名(){
        処理;
    }
}
//メソッドの呼び出し
インスタンス.メソッド();
//メソッド内でのインスタンスのプロパティ参照
this.プロパティ
//クラス継承
class 子クラス名 extends 親クラス名{}
//コンストラクタのオーバーライド
constructor(引数1, 引数2, 引数3){
    super(引数1, 引数2)
    this.プロパティ = 引数3;
}

ファイルの分割

nicotine.js

//デフォルトエクスポート
    //クラス
    export default クラス名;
    //値
    export default 値;
    //ファイルがインポートされると自動でインポートされる
    //エクスポート時とインポート時の名前が違っても良い
    //一つのファイルに一つの値のみ
//名前付きエクスポート
export{値1,値2};

//デフォルトインポート
import 名前(クラス名) from "ファイル";
//名前付きエクスポート
import {値1,値2} from "ファイル";

パッケージのインポート

nicotine.js

import 定数名 from "パッケージ名";

配列操作

nicotine.js

//値の追加
配列名.push(値);
//配列繰り返し
配列名.forEach((変数名)=>{
    処理;
});
//find(条件に合う一つ目の要素取得)
const 定数名 = 配列名.find((変数名)=>{
    return 条件式;
});
//オブジェクトにも使える

//filter(条件に合う要素全ての要素取得)
const 配列名 = 配列名.filter((変数名)=>{
    return 条件式;
});
//配列として取得
//オブジェクトにも使える

//map(配列の全ての要素に処理を行い、新しい配列に取得)
const 新配列名 = 配列名.map((変数名)=>{
    return 処理;
});