読者です 読者をやめる 読者になる 読者になる

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.jsjQueryオブジェクトなどの識別に用いる。

演算子

優先度

優先の高い順から記載

.  []  new  
()  
++  --  
 !   ~  +(単項)  -(単項)  typeof  void  delete  
%  *  /  
+(二項)  -(二項)
<<  >>  >>>  
<  <=  >  >=  
==  !==  ===  
&  
^  
|  
&&  
||  
?:  
=  +=  -=  *=  %=  <<=  >>=  >>>=  &=  ^=  |=
,

同値演算子

==と===があり、2つの違いは型変換をするか否か。

==を同値演算子またはEquals演算子、===を厳密な同値演算子と呼ぶ。

===の動作

  1. 型が異なる:false
  2. 両方がundefined値か両方がnull:true
  3. 両方が数値でどちらかがNaNまたは両方がNaN:false。
  4. 上記で値が等しい:true。異なる:false。
  5. 両方が文字列値で内容一致:true。異なる:false。
  6. 両方がオブジェクト参照で同一のオブジェクト:true。異る:false。

==の動作

  1. 両方が同じ型なら===と同じ動作。
  2. null値とundefine値:true。
  3. 数値と文字列の場合は文字列を数値に変換して比較。
  4. ブーリアン値と数値の場合はブーリアン値を数値に変換して比較。
  5. ブーリアン値と文字列値の場合は両方を数値にして比較。
  6. 数値とオブジェクト参照の場合はオブジェクト参照を数値に変換して比較。
  7. 文字列とオブジェクト参照の場合はオブジェクト参照を文字列に変換して比較。
  8. 上記以外:false。

比較演算子

>,<,<=,>=
  1. 文字列型の場合は文字コードにて比較
  2. 数値と数値で型変換可能:大小比較。
  3. どちらかがNaN:false。
  4. 文字列値と文字列値に変換可能:文字列大小比較。
  5. 数値もしくは文字列値に変換不可または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"]; // {}