JavaScript基礎勉強
以前とあるWikiにまとめていたものをブログへ移植。
そしてそのWikiは削除。二重管理イクナイ。
内容は5年前ほどの勉強時のまとめなのでご注意を。
変数
変数宣言
宣言
var foo;
複数宣言
var foo,var
代入宣言
var foo = 5;
定数宣言
ECMAScript規格に定数の構文はありませんが、JS独自拡張。 規格に存在しないので動作に明確な仕様はない。
宣言
const FOO = 'FOO';
慣例として定数名は大文字で定義。
関数
関数
構文
function 関数名(引数,引数...){ 処理 }
宣言
function foo(){ alert('bar'); };
呼び出し
foo();
関数リテラル
関数はオブジェクトとして扱われ、変数への格納も可能。
構文
function(引数,引数..){ 処理 }
用例
var foo = function(bar){ alert(bar); } foo('hello'); // 呼び出し
オブジェクト
名前と値のペアの事を指し、連想配列のような扱いをする。
備考
クラスのようなものは存在するが、JSには言語仕様上クラスは存在しない。
(一般的にクラスと言っても差し支えない)
特徴
- プロパティ値に関数の指定
- プロトタイプチェーン
オブジェクトリテラル
構文
{プロパティ名:プロパティ値,プロパティ名:プロパティ値,プロパティ名:プロパティ値..}
プロパティアクセス
ドット演算
var foo = {bar : 'hello'}; foo.bar;
入れ子
var foo = {bar : {hello : 'world'}}; foo.bar.hello
代入
foo.bar.hello = 'hello!'; 存在しないプロパティ名を指定して代入する事で新規プロパティを追加。 foo.new = 'world'
ブラケット
var foo = {bar : 'hello'}; foo['bar'];
文字列でのアクセス
var name = 'bar'; foo[name]; // barにアクセスし'hello'の文字列が戻る
追加
foo['new'] = 'world';
メソッド
プロパティに関数を持たせる
foo.fn = function(bar){return 'hello ' + bar;}; alert(foo.fn('world')); // 'hello world'
配列
JSは組込み型として配列型は持たないがArrayは存在する。
配列リテラルにて配列を宣言できる。
構文
var 配列名 = [値,値,値...]
用例
var arr = [ 10, 20, 30]; arr[0]; // 10
変数、計算式、異なる型も扱う事が可能
var val = 100; var arr = [ val, 'magic', val + 30];
複数代入
var a, b; [a, b] = [1, 2];
型
文字列
文字をシングルクォーテーションまたはダブルクォーテーションで囲む
var str1 = 'single'; var str2 = "double";
JSはシングルクォーテーションとダブルクォーテーションではエスケープシーケンスの動作は変わらない。
エスケープシーケンス
シーケンス | 内訳 |
---|---|
\n | LF |
\t | タブ |
\b | ベル |
\r | CR |
\f | フィード |
\v | 垂直タブ |
\ | バックスラッシュ |
\' | シングルクォート |
\" | ダブルクォート |
演算
var str1 = 'foo'; var str2 = 'bar'; str1 + str2; // foobar
JSの文字列型は不変型なので文字列の値は変更できない。
var ref = str1; ref; // 'foo' str1 += 'hello'; // 'foohello' ref; // 'foo'を参照
比較
==,!=
暗黙的に型変換を行なって比較
===,!==
型変換せずに比較
比較基準
文字列同士でも大小の比較が可能。
比較順序(Unicode)は下記。
- アルファベットは辞書順(ABC)
- 大文字は小文字より前(ABC…abc…)
- 数字や記号はアルファベットより前(123…ABC…abc)
- 平仮名は片仮名より前(あいう..アイウ)
- 漢字は平仮名、片仮名より後(あいう..アイウ…亜)
- 漢字の並び順はコード体系に従う
Stringクラス
文字列型とは別にStringクラスが存在する。
var str = 'abc'; str.length; // 3 'abc'.length; // 3
上記はstr(文字列型)へのプロパティアクセスに見えるが文字列値からStringオブジェクトへの暗黙的な型変換が行われている。
「strや文字列型」へのプロパティへのアクセスではなく、「Stringクラスのインスタンス」のlengthプロパティにアクセスしている。
明示的な宣言
var str = new String('abc');
比較
var str1 = new String('abc'); var str2 = new String('abc'); str1 == str2; // false str1 === str2 // false
参照先が異なるのでfalseとなる。
var str1 = new String('abc'); var str2 = 'abc' str1 == str2 // true str1 === str2 // false
==では暗黙的な型変換が行われるのでtrueとなる。
Stringクラスの機能
プロパティ名 | 機能 |
---|---|
length | 文字列長を返却。 |
charAt(pos) | インデックス指定で1文字返却。範囲外は空白文字列。 |
concat([str,str,str..]) | 文字列連結。 |
indexOf(searchString[,pos]) | searchStringで最初に見つかるインデックスを返却。posは開始位置。 |
match(regexp) | 正規表現のマッチ結果を返却。 |
replace(searchVal,replaceVal) | searchValをreplaceValで置換した値を返却。 |
search(regexp) | 正規表現マッチ位置のインデックスを返却。 |
slice(start,end) | startからendまで指定したインデックスの文字列を返却。負数で逆インデックス。 |
split(separator,limit) | separatorで分割して文字列値の配列を返す。(正規表現可) |
substr(start,end) | startからendの部分文字列を返却。負数を指定できるのはstartのみ。 |
substring(start,end) | sliceの負数を指定できないバージョン。 |
toLowerCase() | 小文字に変換 |
toUpperCase() | 大文字に変換 |
toString() | Stringインスタンスを文字列型に変換。 |
valueOf() | Stringインスタンスを文字列型に変換。 |
trim() | 文字列前後の空白除去 |
trimLeft() | 左側の空白除去 |
trinRight() | 右側の空白除去 |
型変換
意図通りの変換は結果省略
String(10);
10.toString();
暗黙的な変換
'foo' + 10; // foo10 10 + 'foo'; // 10foo
最短表記
10+'';
数値
内部数値は64bitの浮動小数点。
誤差に注意。
数値リテラル
記法 | 解釈 |
---|---|
0 | 整数 |
5 | 整数 |
-5 | 負の整数 |
0xff or 0Xff | 16進数 |
5.05 | 実数 |
.05 | 実数(0.05) |
5e2 | 5*10の2乗 |
5.05e2 | 5.051010 |
5.05e-2 | 5.05のマイナス2乗=0.0505 |
Numberクラスの機能
文字列と同様にクラスが用意されており、暗黙的な型変換が行われる。
プロパティ名 | 機能 |
---|---|
MAX_VALUE | 64bit浮動小数点の最大値 |
MIN_VALUE | 64bit浮動小数点の最小値 |
NaN | Not A Number |
POSITIVE_INFINITY | 正の無限大 |
NEGATIVE_INFINITY | 負の無限大 |
toExponential(fractionDigits) | 小数点以下の桁数を指定し、指数表示の文字列値に変換。 |
toFixed(fractionDigits) | 小数点以下の桁数を指定し、小数点表示の文字列値に変換。 |
toPrecision(precision) | 有効桁数を指定し、小数点表示の文字列値に変換。 |
valueOf() | Numberインスタンスから数値に変換。 |
境界値
Number.MAX_VALUE;
1/0.0; // infinity 1%0.0; // NaN 0.0/0.0; // NaN 0.0%0.0; // NaN
NaN
何が入ってるかわからない数値という事。
NaN == NaN; // false isNaN(NaN); // true
不明な数値と不明な数値を比較してもわからないのでfalse。
isNaNは引数がNaNまたは数値に変換してNaNならtrue。
型変換
- 数値に変換できない文字列はNaN
- 空の文字列は0
- 意図通りの変換は結果省略
Number()
Number('10'); Number('10foo'); // NaN
parseInt()
parseInt('10'); parseInt('10foo'); // 10 parseInt('foo'); // NaN parseInt('ff',16); // 255 parseInt('0xff',16); // 255 parseInt('0.1'); // 0 parseFloat('0.1');
1の補数(~)
1の補数への変換を二回行う事でNumber型へと変換できる。
~~'10'; ~~'10a'; // 0 ~~'a'; // 0
2147483647を超えると-2147483648になるので注意。
暗黙的な変換
'10' - 1 // 9 '10' + 1 // '101' '10' - '1' // 9 10 + '1' // '101'
最短表記
+'10'
真偽値
typeof true; // boolean
文字列値への変換
true.toString();
型変換
if文やwhile文の条件内では暗黙的な型変換が行われている。
falseになる値
- 0
- NaN
- null
- undefined
- ‘’(空文字列)
明示的な変換
!!
!!10; // true !!'foo'; // true !!0; // false(上記)
暗黙的な変換
オブジェクト型はtrueに変換される。
if(new Boolean(false)); // true if(Boolean(false)); // false if(new Number(0)); // true if(Number(0)); // false if(new String('')); // true if(String('')); // false
null, undefined
null
「参照なし」を意味する。
typeof null; // object
undefined
未定義を意味する。
- 未初期化の変数
- 未定義または存在しないプロパティへアクセス
- 引数のない関数の呼び出し alert();
- return文の無い、又はreturn文に何も指定のない関数の戻り値
- void演算子の評価結果
注意
if(null == undefined); // true if(null === undefined); // false
予約語
現在の予約語
- break
- do
- instanceof
- typeof
- case
- else
- new
- var
- catch
- finally
- return
- void
- continue
- for
- switch
- while
- default
- if
- throw
- delete
- in
- try
- null
- true
- false
将来の予約後
- class
- enum
- extends
- super
- const
- export
- import
- implements
- let
- pricate
- public
- yield
- instance
- package
- protected
- static
識別子
大文字と小文字は区別して解釈。
- 英文字
- 数字
- _(内部的識別子に用いる)
- $ prototype.jsやjQueryオブジェクトなどの識別に用いる。
演算子
優先度
優先の高い順から記載
. [] new () ++ -- ! ~ +(単項) -(単項) typeof void delete % * / +(二項) -(二項) << >> >>> < <= > >= == !== === & ^ | && || ?: = += -= *= %= <<= >>= >>>= &= ^= |= ,
同値演算子
==と===があり、2つの違いは型変換をするか否か。
==を同値演算子またはEquals演算子、===を厳密な同値演算子と呼ぶ。
===の動作
- 型が異なる:false
- 両方がundefined値か両方がnull:true
- 両方が数値でどちらかがNaNまたは両方がNaN:false。
- 上記で値が等しい:true。異なる:false。
- 両方が文字列値で内容一致:true。異なる:false。
- 両方がオブジェクト参照で同一のオブジェクト:true。異る:false。
==の動作
- 両方が同じ型なら===と同じ動作。
- null値とundefine値:true。
- 数値と文字列の場合は文字列を数値に変換して比較。
- ブーリアン値と数値の場合はブーリアン値を数値に変換して比較。
- ブーリアン値と文字列値の場合は両方を数値にして比較。
- 数値とオブジェクト参照の場合はオブジェクト参照を数値に変換して比較。
- 文字列とオブジェクト参照の場合はオブジェクト参照を文字列に変換して比較。
- 上記以外:false。
比較演算子
>,<,<=,>=
- 文字列型の場合は文字コードにて比較
- 数値と数値で型変換可能:大小比較。
- どちらかがNaN:false。
- 文字列値と文字列値に変換可能:文字列大小比較。
- 数値もしくは文字列値に変換不可またはNaNに変換:false。
in演算子
連想配列のkeyが存在するかを判定する。
var obj = {a : 1}; 'a' in obj; // true
instanceof演算子
左辺にオブジェクト、右辺にコンストラクタを指定。
左辺が右辺のコンストラクタで生成している場合はtrueを返却。
プロトタイプチェーンで判定。
var obj = {}; obj instanceof Object; // true var objStr = new String('foo'); objStr instanceof String; // true var str = 'bar'; str instanceof String; // false (string型であり、Stringインスタンスではない為) var NewClass = function() {}; var nc = new NewClass(); nc instanceof NewClass; // true nc instanceof String; // false
isPrototypeOfなんてメソッドもあるが、そのうち。
ビット演算子
32ビットの整数値に変換してから演算を行う。
だいたいの言語では高速に動作するが、
jsでは基本的に浮動小数点を利用するので変換処理があり低速になる。
& // AND 1 & 1; // 1 1 & 2; // 0 | // OR 1 | 1; // 1 1 | 2; // 3 ^ // XOR 1 ^ 1; // 0 1 ^ 2; // 3 << // 左シフト 1 << 1; // 2 >> // 右シフト 2 >> 1; // 1 >>> // 右シフトだが、最左ビットを0にする 2 >>> 1; // 1 -1 >>> 1; // 2147483647 ~ // 1の補数 ~1; // -2
代入演算子
var x,y,z; x = y = z = 0; if (x = y) { // x == y のミスなのかわからないのでほんとやめてほしい }
条件演算子
&& // AND || // OR bool ? val1 : val2; // 三項演算子
初期化としての利用
var isBool = init && true; // initがtrueならtrueを設定 var isObj = init || {}; // initがnullやundefinedなら{}を設定
new演算子
オブジェクトの生成を行います。
var Cls = function(arg1, arg2) { this.p1 = arg1; this.p2 = arg2; }; var cls = new Cls(1,2); // Cls {p1: 1, p2: 2}
delete演算子
オブジェクトのプロパティを削除する
var obj = { foo : 1, bar : 2} delete obj.foo; // {bar: 2} delete obj["bar"]; // {}