この記事の内容

JavaScriptの各種演算子について
JavaScriptの配列と連想配列の特徴

目次

(1) 学習環境の構築と基本的な書き方
(2) 変数とデータ型
(3) 演算子および配列 <-- この記事の内容
(4) 制御構文と関数
(5) 関数の応用1
(6) 関数の応用2
(7) オブジェクトの基礎
(8) JavaScriptのオブジェクト指向プログラミング1 概要
(9) JavaScriptのオブジェクト指向プログラミング2 オブジェクトの作り方と継承
(10) JavaScriptのオブジェクト指向プログラミング3 多態性
(11) JavaScriptのオブジェクト指向プログラミング4 カプセル化
(12) ES6の新機能について

演算子

引き続き、基本的な文法について。ここでは演算子の話を。

算術演算子

演算子	説明
+	数値の足し算
-	数値の引き算
*	数値の掛け算
/	数値の割り算
%	数値の剰余算（割り算の余り）

なお、文字列に対して + を用いると、文字列の連結になる。

bs03_01.js

console.log(123 + 456);        // 579 と表示される
console.log("123" + "456");    // 123456 と表示される

代入演算子

演算子	説明	利用例
=	右辺のデータを左辺の変数に代入する	a = 1;
+=	左辺の変数に格納されたデータに、右辺の数値を加算して代入する	a += 1;
-=	左辺の変数に格納されたデータに、右辺の数値を減算して代入する	a -= 1;
*=	左辺の変数に格納されたデータに、右辺の数値を乗算して代入する	a *= 1;
/=	左辺の変数に格納されたデータに、右辺の数値を余算して代入する	a /= 1;
%=	左辺の変数に格納されたデータに、右辺の数値を剰余算して代入する	a %= 1;
++	変数に格納されたデータに1加算する（インクリメント）	a++;
--	変数に格納されたデータに1減算する（デクリメント）	a--;

※比較演算子と論理については、後の記事で。

配列

次に、通常の配列について。ここでいう「通常の」配列というのは、他の言語にもあるような、複数のデータを格納できる変数で、 a[0] 、 a[1] 、 a[2] ... のようにインデックスが0番目から並んでいるものを指す。

配列の基本的な使い方

利用例を下記に示す。

bs03_02.js

var num = [ 10, 20, 30 ];
console.log(num[0]);        // 10 と表示される
console.log(num[1]);        // 20 と表示される
console.log(num[2]);        // 30 と表示される
console.log(num[3]);        // データが無いため undefined と表示される

配列要素の追加と上書き

JavaScriptの配列は自由に拡張できる。既存要素の上書きも可能。

bs03_03.js

var num = [ 10, 20, 30 ];
num[2] = 40;
num[3] = 50;
console.log(num[2]);        // 40 と表示される
console.log(num[3]);        // 50 と表示される

多次元配列

多次元配列も可能。

bs03_04.js

var num = [[ 10, 20, 30 ], [ 40, 50, 60]];
console.log(num[0][0]);        // 10 と表示される
console.log(num[0][1]);        // 20 と表示される
console.log(num[0][2]);        // 30 と表示される
console.log(num[1][0]);        // 40 と表示される
console.log(num[1][1]);        // 50 と表示される
console.log(num[1][2]);        // 60 と表示される

配列要素数の取得

JavaScriptでは、通常の配列は Array 型のオブジェクトになる（Arrayオブジェクトについて詳細は後の記事で）。配列に要素が何個入っているかを調べるには、Arrayオブジェクトが持つlengthプロパティを参照すれば良い。

bs03_05.js

var num = [ 10, 20, 30 ];
num[3] = 40;
console.log(num.length);    // 4 と表示される

連想配列

JavaScriptでは連想配列（キーの文字列と値をペアで格納する配列）は、Arrayのような専用の型（オブジェクト）が存在しているわけではない。代わりにObject型のオブジェクトとして扱う。

補足：オブジェクトとは何だったか

オブジェクト指向プログラミング言語における「オブジェクト」とは、簡単にまとめると、

属性（プロパティ）を持つ
振る舞い（メソッド）を持つ
1つのオブジェクトと全く同じオブジェクトは存在しない
1つのオブジェクトは他のオブジェクトと関連性を持たせられる

このような性質をもつ。JavaScriptにおけるオブジェクト指向プログラミングについて詳細は後の記事に譲るとして、ここでは「プロパティ」に注目して、どのように連想配列をして Object 型のオブジェクトを扱うかを見ていく。

連想配列の基本的な使い方

bs03_06.js

// nameは文字列型、ageは数値型、といったことが可能
var myself = {
  "name"      : "田中 太郎",
  "age"       : 25,
  "seibetsu"  : "男性"
};

// プロパティを参照する記述方法は2種類
console.log(myself.name);           // 田中 太郎 と表示される
console.log(myself["seibetsu"]);    // 男性 と表示される

// 参照したいキー名が入った変数をキーとして指定したい場合は [] の方を使う
var pt = "age";
console.log(myself[pt]);            // 25 と表示される

連想配列要素の追加と上書き

連想配列も自由に要素を追加できる。既存要素の値の上書きも可能。

bs03_07.js

var myself = {
  "name"      : "田中 太郎",
  "age"       : 25,
  "seibetsu"  : "男性"
};

myself.age  = 30;
myself.pref = "東京都";

console.log(myself.age);     // 30 と表示される
console.log(myself.pref);    // 東京都 と表示される

次回予告

制御構文