メモ JavaScript

次にふれる機会のための備忘録的に。。

規約

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

宣言

変数

let キーワードで宣言
```
let myValue
```
- スコープ範囲：ブロック
var キーワード宣言は非推奨
- スコープ範囲：関数

定数

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

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

式と演算子

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

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

等価演算子 `==`

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

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

false に見なされる値↓
- null, NaN, 0, 空文字列 (""), undefined

連鎖 if ... else if ... else if ... else

function example(…) {
    return condition1 ? value1
         : condition2 ? value2
         : condition3 ? value3
         : value4;
}

正規表現

string.split()

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

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 キーワード

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

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

関数式 : function演算子

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

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

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

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

アロー関数式 `=>`

function 式を短く記述できる

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

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

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

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

残余引数 `...`

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

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[, ...]]]])

既存の要素を取り除いたり、置き換えたり、新しい要素を追加したり、配列の内容を変更する

戻りは、取り除かれた要素を含む配列

/* 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(深さ値)

階層化された配列を、引数の深さまで、フラットにする

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 から配列の生成例

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 の使用

// 要素を操作するためのマップ関数として
// アロー関数を使用
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 ... ) に対して反復的な処理のループを作成
```
// 構文
for (variable of iterable) {
  statement
}
```

Array での例

const iterable = [10, 20, 30];

for (const value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

Map での例

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 のもの

JavaScript メモ