JavaScript
基本
- 大文字と小文字を区別する。
- 文末にはセミコロンを使う(単独の文の場合はあってもなくてもよい)。
- 変数の型は自動で変わる。
- 足し算のみでストリング型と数値型の結合を担う。引き算などは文字列が数であれば計算されてしまう。
- バッククォートで囲んだ文字列に${変数}と書いて足し算を用いてつなぐ必要がなくなる。
データ型
| 型 | 備考 |
|---|---|
| Boolean | 真偽値。trueまたはfalse。 |
| null | |
| undefined | |
| Number | 数値。20や3.1415など。 |
| BigInt | 長整数。9007199254740992nなど。 |
| String | 文字列。"Hello"など。 |
| Symbol | |
| Object | オブジェクト。 |
予約語
- await
- break
- case
- catch
- class
- const
- continue
- debugger
- default
- delete
- do
- else
- enum
- export
- extends
- false
- finally
- for
- function
- if
- import
- in
- instanceof
- new
- null
- return
- super
- switch
- this
- throw
- true
- try
- typeof
- var
- void
- while
- with
- yield
strictモードでの予約語
- let
- static
- implements
- interface
- package
- private
- protected
- public
trueやfalseの代わりになる値
falseになる値
- false
- 0
- -0
- 0n
- "" (空文字)
- null
- undefined
- NaN
trueになる値
- true
- 43
- 'Red'
- [3, 4]
特殊文字のエスケープ
| 文字 | 意味 |
|---|---|
| \0 | ヌル文字 |
| \b | バックスペース |
| \f | 改ページ |
| \n | 改行 |
| \r | 復帰 |
| \t | タブ |
| \v | 垂直タブ |
| \' | アポストロフィ |
| \" | ダブルクォーテーション |
| \\ | バックスラッシュ |
| \uXXXX | Unicodeエスケープシーケンス |
式と演算子
論理演算
三つ以上でもカッコは要らない。
a == 1 && b == 1
c == 1 || d == 1
文と宣言
コメントアウト
// コメント
/*
複数行コメント
*/
変数定義
varは基本の変数、letは宣言した場所のスコープブロック内でのみ定義され、constは定数で後から中身を変更できない。
var a;といったように初期値なしで定義した場合、中身の値はundefinedになる。
var a = 1;
let b = 1;
const c = 1;
変数の命名規則
- Unicode文字、_、$が使える。
- 大文字と小文字を区別。
- 頭文字に数字は使えない。
- 予約語は使えない。
分割代入
let [a, b, c] = [1, 2];
// a=1, b=2, c=undefined.
let vv = new Vec3(3, 4, 5);
let {x, y, z: z_} = vv;
// "let [x, y, z_] = [vv.x, vv.y, vv.z];" と同じ
多重代入
let a; let b; let c;
a = b = c = 10;
条件分岐
if(条件) {
/* --- 処理 --- */
} else {
/* --- 処理 --- */
}
if(条件) {
/* --- 処理 --- */
} else if(条件) {
/* --- 処理 --- */
} else {
/* --- 処理 --- */
}
switch文
switch(変数) {
case 値1: case 値2:
// 値1か値2のときここが実行される
break;
case 値3:
// 値3のときにここが実行される
break;
case 値4: {
// カッコを使うことができる
} break;
default:
// 値1 ~ 4のいずれでもない時にここが実行される
}
繰り返し処理
for(let k=0; k<5; k++) {
/* --- 処理 --- */
}
// iには'a', 'b', 'c'が順に入る
for(let i of ['a', 'b', 'c']) {
console.log(i);
}
// iには'a', 'b', 'c'が順に入る
for(let i in {a: 1, b: 2, c: 3}) {
console.log(i);
}
ループの途中から脱出
for(let i=0; i<3; i++) {
for(let j=3; j>0; j--) {
if(i == j) break;
console.log(i, j);
}
// 脱出先はここ
}
/*
(i,j) =
(0,3), (0,2), (0,1),
(1,3), (1,2),
(2,3)
*/
ループを1回スキップ
for(let i=0; i<3; i++) {
for(let j=3; j>0; j--) {
if(i == j) continue;
console.log(i, j);
}
}
/*
(i,j) =
(0,3), (0,2), (0,1),
(1,3), (1,2),
(2,3), (2,1)
*/
ラベル
ラベルをつけてbreakやcontinueをどの階層のforやwhileに対するものか指定できる。
egLabel: for(let i=0; i<3; i++) {
for(let j=3; j>0; j--) {
if(i == j) break egLabel;
console.log(i, j);
}
}
// 脱出先はここ
/*
(i,j) =
(0,3), (0,2), (0,1),
(1,3), (1,2)
*/
応用
for文のカッコの中は毎ループ左から処理され、変数は前回のループの内容を保持する。
// # 例1 フィボナッチ数列
for(let i=j=1, c=n=0; n<0; c=j, j+=i, i=c, n++){
console.log(i)
}
// # 例2 RegExp.exec()の処理 (2つ目のセミコロンは必須)
for(let i;(i=reg.exec(str));) {
console.log(i);
}
条件がfalseになるまで繰り返す
while(条件) {
/* --- 処理 --- */
}
do {
/* --- 処理 --- */
} while(条件);
do文はあとで条件が検証されるので、通常のwhile文と違って必ず1回は実行される。
例外処理
try {
/* --- 処理 --- */
} catch(e) {
/* --- 処理 --- */
}
エラー
| エラー | 概要 |
|---|---|
| Error | 一般的なエラー |
| EvalError | eval関数のエラー |
| InternalError | 内部エラー |
| RangeError | 範囲エラー |
| ReferenceError | 参照エラー |
| SyntaxError | 構文エラー |
| TypeError | 型エラー |
| URIError | encodeURIまたはdecodeURIのエラー |
関数
下の「関数式」では「関数の巻き上げ」に対応しておらず、関数の定義より下でないとその関数が使えない。
// 関数リテラル
function f(x) {
/* --- 処理 --- */
return 戻り値;
};
// 関数式
var g = function() {
/* --- 処理 --- */
return 戻り値;
};
アロー関数
// アロー関数
(x, y) => x + y;
// 従来の関数
function f(x, y) {
return x + y;
}
任意の数の変数をもつ関数
function sum(...num) {
return num.reduce((sum, k) => sum + k);
}
クラス
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
new演算子
const square = new Rectangle(3, 4);
console.log(square.width); // 4
値と型
型を取得
出力される値自体はstring型。
console.log(typeof 100); // "number"数値
number型に対して、「0o～」で8進数、「0x～」で16進数、「0b～」で2進数。
整数部分がゼロの場合は省略できる。eまたはEで指数表現ができる。
3.1415926
-.123456789
-3.1E+12
.1e-23
メソッド
| 名前 | 概要 | 使い方 | 例 |
|---|---|---|---|
| toString | 基数表現の文字列へ変換 | (数).toString(基数) | (3).toString(2) // -> "11" |
| toExponential | 指数表現の文字列へ変換 | (数).toExponential(小数部分の桁数) | (100).toExponential(2) // -> "1.00e+2" |
| toFixed | 有効数字を指定した文字列へ変換 | (数).toFixed(小数部分の桁数) | (3.1415).toFixed(2) // -> "3.14" |
| toLocaleString | カンマで桁区切りした文字列へ変換 | (数).toLocaleString() | (100000).toLocaleString() // -> "100,000" |
| parseInt | 文字列を整数に変換 | Number.parseInt(文字列, 基数?) | Number.parseInt("123") // -> 123 |
| parseFloat | 文字列を小数に変換 | Number.parseFloat(文字列, 基数?) | Number.parseFloat("1.23") // -> 1.23 |
| isNaN | 値がNaNかつ数値であるかどうか | Number.isNaN(値) | Number.isNaN(12) // -> false |
文字列
文字列のn文字目は配列のように取得できる。
console.log('0123456789'[5]) // -> '5'メソッド
| 名前 | 概要 | 使い方 | 例 |
|---|---|---|---|
| length | 文字列の長さ | 文字列.length | 'abcde'.length // -> 5 |
| split | 指定した文字列で分割 | 文字列.split(区切り文字) | 'a,bc,d,ef,'.split(',') // -> ['a', 'bc', 'd', 'ef', ''] |
| replace | 文字列の一部を置換する。 置換後の文字列には$を使って特殊な文字列を指定できる [☆]。 | 文字列.replace(置換する文字列, 置換後の文字列) | 'abcde'.replace('cd', 'X') // -> 'abXe' |
| repeat | 文字列を繰り返す | 文字列.repeat(回数) | '無駄'.repeat(2).repeat(3) // -> '無駄無駄無駄無駄無駄無駄' |
| slice | 文字列の一部を切り出す。終了indexの文字は含まない。 | 文字列.slice(開始index, 終了index?) | '012345678'.slice(3, 7) // -> '3456' |
| substr | 文字列の一部を切り出す。文字数を指定できる。 | 文字列.substr(開始index, 文字数) | '012345678'.substr(2, 5) // -> '23456' |
| includes | 指定した文字列が元の文字列に含まれるかどうか | 文字列.includes(探す文字列) | 'abcdef'.includes('cd') // -> true |
| startsWith | 元の文字列が指定した文字列で始まっているかどうか | 文字列.startsWith(文字列) | 'abcdef'.startsWith('abc') // -> true |
| endsWith | 元の文字列が指定した文字列で終わっているかどうか | 文字列.endsWith(文字列) | 'abcdef'.endsWith('abc') // -> false |
| trim | 先頭と末尾の空白を取り除く | 文字列.trim() | ' abc '.trim() // -> 'abc' |
| trimStart | 先頭の空白だけを取り除く | 文字列.trimStart() | ' abc '.trimStart() // -> 'abc ' |
| trimEnd | 末尾の空白だけを取り除く | 文字列.trimEnd() | ' abc '.trimEnd() // -> ' abc' |
| padStart | 指定した文字数まで空白で埋める | 文字列.padStart(長さ, 文字列?) | '123'.padStart(5, '0') // -> '00123' |
[☆]
| 記号 | 概要 |
|---|---|
| $& | マッチした部分文字列 |
| $` | マッチした部分の前の文字列 |
| $' | マッチした部分の後の文字列 |
| $$ | $のエスケープ |
| $1, $2, ... | 正規表現で指定したときに使う |
オブジェクト
let food = {type: 'fruits', color: 'red', taste: 'sweet'};
console.log(food.type); // -> 'fruits'
プロパティを削除するときはdelete演算子を使う。
let obj = {a: 1, x: 0, b: 2};
delete obj.x;
console.log(obj); // -> {a: 1, b: 2}
メソッド
| 名前 | 概要 | 使い方 | 例 |
|---|---|---|---|
| keys | キーの一覧を配列にする | Object.keys(オブジェクト) | Object.keys({a: 1, b: 2, c: 3}) // -> ['a', 'b', 'c'] |
| values | 値の一覧を配列にする | Object.values(オブジェクト) | Object.values({a: 1, b: 2, c: 3}) // -> [1, 2, 3] |
| entries | キーと値の組を配列にする | Object.entries(オブジェクト) | Object.entries({a: 1, b: 2, c: 3}) // -> [['a', 1], ['b', 2], ['c', 3]] |
| freeze | 変更を禁止する | Object.freeze(オブジェクト) |
let obj = {a: 1, b: 2};
Object.freeze(obj);
obj.c = 3; // エラーにはならない
console.log(obj); // -> {a: 1, b: 2}
|
| assign | 複数のオブジェクトを結合する | Object.assign(コピー先, 結合元1, 結合元2, ...) | Object.assign({a: 1, b: 2}, {c: 3}) // -> {a: 1, b: 2, c: 3} |
配列
let a = ['apple', 'banana', 'lemmon'];
let b = ['dog', , 'cat'];
console.log(a[0]); // -> 'apple'
console.log(b[1]); // -> undefined
スプレッド演算子を使って要素をばらして代入ができる。
let a = [4, 5];
let b = [1, 2, 3, ...a];
console.log(a); // -> [1, 2, 3, 4, 5]
// 総和を計算するsumが定義されているとする
sum(1, 2, 3, 4, 5) // -> 15
sum(...b) // -> 15
簡単なメソッド
| 名前 | 概要 | 使い方 | 例 |
|---|---|---|---|
| isArray | 配列かどうかを判定する | Array.isArray(配列) | Array.isArray({0: 'a', 1: 'b'}) // -> false |
| push | 末尾に要素を追加する | 配列.push(値1, 値2, ...) |
let a = [1, 2];
a.push(3); // -> 3 == a.length
console.log(a); // -> [1, 2, 3]
|
| unshift | 先頭に要素を追加する | 配列.unshift(値1, 値2, ...) |
let a = [2, 3];
a.unshift(1); // -> 3 == a.length
console.log(a); // -> [1, 2, 3]
|
| pop | 末尾の要素を削除する | 配列.pop() |
let a = [1, 2, 3];
a.pop(); // -> 3
console.log(a); // -> [1, 2]
a.length = 1; // lengthは書き換えられる
console.log(a); // -> [1]
|
| shift | 先頭の要素を削除する | 配列.shift() |
let a = [1, 2, 3];
a.shift(); // -> 1
console.log(a); // -> [2, 3]
|
| splice | 一部を削除・置き換える | 配列.splice(開始index, 要素数, 置き換え1, ...) |
let a = [0, 1, 2, 0, 5];
a.splice(0, 1); // -> [0]
console.log(a); // -> [1, 2, 0, 5]
a.splice(2, 1, ...[3, 4]); // -> [0]
console.log(a); // -> [1, 2, 3, 4, 5]
|
| concat | 複数の配列を結合する | 配列.concat(配列, 配列, ...) | [1].concat([2, 3], [4]) // -> [1, 2, 3, 4] |
| indexOf | 値を先頭から検索する | 配列.indexOf(値, 開始index) | ['a', 'b', 'c'].indexOf('c') // -> 2 |
| lastIndexOf | 値を末尾から検索する(開始indexから左に検索する) | 配列.lastIndexOf(値, 開始index) | ['a', 'b', 'c'].lastIndexOf('c', 0) // -> -1 |
| slice | 配列の一部を切り出す(終了indexの要素は含まない) | 配列.slice(開始index, 終了index) | [1, 2, 3, 4, 5].slice(1, 3) // -> [2, 3] |
| join | 区切り文字を挟んで値を結合し、文字列に変換する | 配列.join(区切り文字) | ['a', 'b', 'c'].join(', ') // -> 'a, b, c' |
| reverse | 値を逆順にする | 配列.reverse() | [1, 2, 3].reverse() // -> [3, 2, 1] |
コールバックを使うメソッド
| 名前 | 概要 | 使い方 | 例 |
|---|---|---|---|
| forEach | 各要素ごとに処理をする | 配列.forEach((値, index, 元の配列) => callback) |
let a = ['a', 'b', 'c'];
a.forEach(x => console.log(x))
// -> 'a'
// -> 'b'
// -> 'c'
|
| findIndex | 条件を満たす要素を検索し、indexを返す。 | 配列.findIndex((値, index, 元の配列) => callback) | ['a', 'b', 'c'].findIndex(x => x == 'c') // -> 2 |
| find | 条件を満たす要素を検索し、見つけた要素を返す | 配列.find((値, index, 元の配列) => callback) | ['apple', 'banana', 'cherry'].find(x => x.includes('na')) // -> 'banana' |
| some | 少なくとも1つの要素が条件を満たすかどうか | 配列.some((値, index, 元の配列) => callback) | [1, 2, 3].some(x => x%2 == 0) // -> true |
| every | すべての要素が条件を満たすかどうか | 配列.every((値, index, 元の配列) => callback) | [1, 2, 3].every(x => x%2 == 0) // -> false |
| sort | 要素を並び替える | 配列.sort((要素1, 要素2) => callback) | ['bad', 'act', 'bed'].sort((x,y) => (x>y)?1:-1) // -> ['act', 'bad', 'bed'] |
| map | すべての要素に処理をして要素を書き換える | 配列.map((値, index, 元の配列) => callback) | [1, 2, 3].map(x => x**2) // -> [1, 4, 9] |
| filter | 条件を満たさない要素を削除する | 配列.filter((値, index, 元の配列) => callback) | [1, 2, 3].filter(x => x%2==0) // -> [2] |
| reduce | 累積計算をする | 配列.reduce((途中までの値, 値, index, 元の配列) => callback) | [1, 2, 3].reduce((sum, k) => sum + k) // -> 6 |
正規表現
フラグ
| フラグ | 概要 | プロパティ |
|---|---|---|
| d | 部分文字列の一致のインデックスを生成します。 | hasIndices |
| g | グローバル検索です。 | global |
| i | 大文字小文字を区別しない検索です。 | ignoreCase |
| m | 改行文字を^および$と一致させます。 | multiline |
| s | .を改行文字と一致させます。 | dotAll |
| u | "Unicode"です。 パターンをUnicodeコードポイントの並びとして扱います。 | unicode |
| v | uモードをアップグレードし、もっと多くのUnicode機能を使用可能にします。 | unicodeSets |
| y | 対象とする文字列の現在位置から始めて一致する「粘着」(sticky)検索を行います。 | sticky |
記号
アサーション
| 記号 | 名前 | 概要 |
|---|---|---|
| ^, $ | 入力境界アサーション | 現在の位置が入力の開始または終了であること、またはmフラグが設定されている場合は、行の開始または終了であることを表します。 |
| (?=...), (?!...) | 先読みアサーション | 現在の位置が特定のパターンの後に来ること、または来ないことを表します。 |
| (?<=...), (?<!...) | 後読みアサーション | 現在の位置が特定のパターンの前に来ること、または来ないことを表します。 |
| \b, \B | 単語境界アサーション | 現在の位置が単語境界であることを表します。 |
アトム
| 記号 | 名前 | 概要 |
|---|---|---|
| \1, \2 | 後方参照 | その前でキャプチャグループに一致し、捕捉されたサブパターンに一致します。 |
| (...) | キャプチャグループ | サブパターンに一致し、一致した情報を記憶します。 |
| [...], [^...] | 文字クラス | ある文字集合に含まれる、または含まれない文字と一致します。vフラグを有効にすると、可変長の文字列にも一致するように使用することができます。 |
| \d, \D, \w, \\W, \s, \S | 文字クラスエスケープ | あらかじめ設定された文字集合に含まれる、または含まれない文字と一致します。 |
| \n, \u{...} | 文字エスケープ | リテラル形式では表現しにくい文字と一致します。 |
| a, b | リテラル文字 | 特定の文字と一致します。 |
| \k名前 | 名前付き後方参照 | その前で名前付きキャプチャグループに一致し、捕捉されたサブパターンに一致します。 |
| (?名前...) | 名前付きキャプチャグループ | サブパターンに一致し、一致した情報を記憶します。このグループは、パターン内のインデックスではなく、独自の名前で識別することができます。 |
| (?:...) | 非キャプチャグループ | 一致した情報を記憶することなく、サブパターンに一致します。 |
| \p{...}, \P{...} | Unicode文字クラスエスケープ | Unicodeプロパティを指定します。vフラグを有効にすると、可変長の文字列にも一致するように使用することができます。 |
| . | ワイルドカード | sフラグが設定されていない限り、改行以外の文字と一致します。 |
その他
| 記号 | 名前 | 概要 |
|---|---|---|
| | | 論理和 | |文字で区切られた選択肢の集合のいずれかと一致します。 |
| *, +, ?, {n}, {n,}, {n,m} | 修飾子 | アトムに一定回数一致します。 |