JavaScript メモ

# メモ JavaScript
* 次にふれる機会のための備忘録的に。。

## 規約

- (先頭大文字)キャメルケース
    - クラス名
- (先頭小文字)キャメルケース
    - オブジェクト名＝変数名、関数名
        - 関数名は「動詞＋目的語」
- 全て大文字のスネークケース
    - 定数
- 文末の`;` は省略可
    - 省略するか付与するかは統一した方がいい。プロジェクトの規約に従う。
- 文字列を囲う記号は シングルクオート と ダブルクオート どちらでも良い
    - 文中に表れない方を用いれば良い
    

## 宣言

### 変数

- `let` キーワード で宣言
    
    ```jsx
    let myValue
    ```
    
    - スコープ範囲：ブロック

- `var` キーワード宣言 は非推奨
    - スコープ範囲：関数

### 定数

- `const` キーワードで宣言
    
    ```jsx
    const min = 0
    ```
    
    - スコープ範囲：ブロック
    - 値への読み取り専用の参照を作る
        - 定数に保持されている値は不変ではない。
            - 定数に再代入はできないが、定数の中身がオブジェクトなら内容（プロパティなど）は変更可能

## コメント

- C++ と同じ
    - /* 複数行 */
    - // 行末まで

## 式と演算子

### 厳密等価演算子 `===`

- 左辺・右辺の型が異なると `false`
- 両辺がオブジェクトの場合、同じオブジェクトを示している時のみ true

### 等価演算子 `==`

- 左辺と右辺で型が異なる場合には、比較前に同じ型への変換を試みる
    - 文字列の"1" と 数値の 1 を 等価とする

### 三項演算子   condition `?` exprIfTrue `:` exprIfFalse

- false に見なされる値↓
    - null, NaN, 0, 空文字列 (""), undefined
- 連鎖 if ... else if ... else if ... else
    
    ```jsx
    function example(…) {
        return condition1 ? value1
             : condition2 ? value2
             : condition3 ? value3
             : value4;
    }
    ```
    

## 正規表現

### string.split()

- 正規表現を用いて文を分割する
    - 正規表現パターンの一部に `()` を用いると、マッチした部分文字列を記憶しておける

```jsx
const str = 'こちら\\p{person}でございます\\p{person}222';
const regexp = /\\p\{(.+?)\}/g;

const words = str.split(regexp);
console.log(words);
```

結果:  \\p{ `parson` } の parson も 分割後の結果に格納できる

```
Array ["こちら", "person", "でございます", "person", "222"]
```

## 関数

### 関数宣言 : function文

- 先頭に `function` キーワード

```jsx
function name([param[, param,[..., param]]]) {
   [statements]
}
```

- 関数宣言は、それを囲む関数やグローバルスコープの先頭に巻き上げられ、関数を宣言する前に使用が可能。

### 関数式 : function演算子

- `function` キーワードから開始せずに関数を含んでいる文が関数式
- ブロック内で関数を宣言する場合には 関数式 を用いる

```jsx
// 無名の関数式
var myFunction = function() {
    statements
}

// 名前付きの関数式
var myFunction = function namedFunction(){
    statements
}
```

- 名前付きの関数式を作ることのメリット
    - エラーに遭遇したとき、スタックトレースがその関数の名前を含めるため、エラーの発生源の特定が容易

### アロー関数式 `=>`

- function 式を短く記述できる

```jsx
// 下記の３式は同等
(param1, param2, …, paramN) => { return expression } 
(param1, param2, …, paramN) => { statements } 
(param1, param2, …, paramN) => expression

// 引数が 1 つしかない場合、丸括弧 () の使用は任意
(singleParam) => { statements }
singleParam => { statements }

// 引数がない場合、丸括弧は必須
() => { statements }

// リテラルオブジェクトを戻す際には ({ }) を用いる
() => ({ name: '名前', address: '住所' }) 
```

### 残余引数 `...`

- 関数の最後の引数に ... の接頭辞を付けると、その位置にある残りの引数を 配列 に入れる

```jsx
function myFun(a,  b, ...manyMoreArgs) {
  console.log("a", a)
  console.log("b", b)
  console.log("manyMoreArgs", manyMoreArgs)
}

myFun("one", "two", "three", "four", "five", "six")

// コンソール出力:
// a, one
// b, two
// manyMoreArgs, [three, four, five, six]
```

## 配列

### Array.filter(関数)

- 与えられた関数で全要素をテストし、結果がtrueとなった要素で新しい配列を生成する

### Array.map(関数)

- 与えられた関数を配列の全要素に対して呼び出し、その結果から新しい配列を生成する

### Array.forEach(関数)

- 与えられた関数を配列の全要素に対して呼び出す。新しい配列は生成しない
    - チェーン 不可。チェーンの最後に副作用を生じさせる用途に用いるのがセオリー

### Array.find(関数)

- 与えられた関数がtrue となる最初の値を戻す

### Array.some(関数)

- 与えられた関数でtrue となる要素があるか ブール値を戻す

### Array.every(関数)

- 与えられた関数で全要素がtrue となるか ブール値を戻す

### Array.includes(検索値)

- 引数の検索値が配列に含まれてるか ブール値を戻す

### Array.indexOf(検索値)

- 引数の検索値と同じ内容を持つ最初の要素の インデックスを戻す

### Array.slice([start[, end]])

- start から end まで (end は含まれない) で選択された要素を、新しい配列にコピーする

### Array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

- 既存の要素を取り除いたり、置き換えたり、新しい要素を追加したり、配列の内容を変更する
- 戻りは、取り除かれた要素を含む配列
    
    ```jsx
    /* index 3 の位置 (4番目の要素) から一つ取り除く*/
    let myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon']
    let removed = myFish.splice(3, 1)
    
    // removed は ["mandarin"]
    // myFish は ["angel", "clown", "drum", "sturgeon"]
    ```
    

### Array.push([element1[, ...[, elementN]]])

- 配列の末尾に 1 つ以上の要素を追加する。新しい要素数を戻す

### Array.pop()

- 配列から `最後` の要素を取り除く。戻り値はその要素
    - push と組み合わせると fifo となる

### Array.shift()

- 配列から `先頭` の要素を取り除く。戻り値はその要素
    - push と組み合わせて queue となる

### Array.sort([compareFunction])

- 配列内をソートする。

### Array.flat(深さ値)

- 階層化された配列を、引数の深さまで、フラットにする
    
    ```jsx
    const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
    arr4.flat(Infinity);
    // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    ```
    

### Array.form(arrayLike[, mapFn[, thisArg]])

- 反復可能オブジェクト( 例: String, Array, Map, Set ... )から、新規Array インスタンスを生成
- Map から 配列の生成例
    
    ```jsx
    const map = new Map([[1, 2], [2, 4], [4, 8]]);
    Array.from(map);
    // [[1, 2], [2, 4], [4, 8]]
    
    const mapper = new Map([['1', 'a'], ['2', 'b']]);
    Array.from(mapper.values());
    // ['a', 'b'];
    
    Array.from(mapper.keys());
    // ['1', '2'];
    ```
    
- アロー関数と Array.from の使用
    
    ```jsx
    // 要素を操作するためのマップ関数として
    // アロー関数を使用
    Array.from([1, 2, 3], x => x + x);      
    // [2, 4, 6]
    
    // 連番の生成
    // 配列はそれぞれの場所が `undefined` で初期化されるため、
    // 以下の `v` の値は `undefined` になる
    Array.from({length: 5}, (v, i) => i);
    // [0, 1, 2, 3, 4]
    ```
    

## Map

- キーと値のペアを保持し、キー最初の挿入時の順序を記憶する

## Set

- あらゆる型で一意の値を格納する

## 反復処理

### for ... of

- 反復可能オブジェクト( 例: String, Array, Map, Set ... ) に対して反復的な処理のループを作成
    
    ```jsx
    // 構文
    for (variable of iterable) {
      statement
    }
    ```
    
- Array での例
    
    ```jsx
    const iterable = [10, 20, 30];
    
    for (const value of iterable) {
      console.log(value);
    }
    // 10
    // 20
    // 30
    ```
    
- Map での例
    
    ```jsx
    const iterable = new Map([['a', 1], ['b', 2], ['c', 3]]);
    
    for (const entry of iterable) {
      console.log(entry);
    }
    // ['a', 1]
    // ['b', 2]
    // ['c', 3]
    
    for (const [key, value] of iterable) {
      console.log(value);
    }
    // 1
    // 2
    // 3 
    ```
    

## Object

?? json 記述との違い? function 周りが違う? 

## Class

?? object の一種? , 

?? 特殊な関数とはどういう意味?

?? provase ? 

?? getter setter は class のもの ? object のもの