JavaScript メモ

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