builder Top
スクリプト言語
- grep
- JavaScript
- PHP
- sed
- grep
- ...

JavaScriptの技法：データ構造を配列で作成する

文：Nick Gibson（Builder AU）
翻訳校正：原井彰弘

2008/01/09 07:00

JavaScriptの配列オブジェクトは、一つの変数に複数のデータを割り当てる機能を強力にサポートしている。しかし、配列を利用すれば、それだけではなくスタックやキューといったデータ構造をアプリケーションで利用することも可能になる。

　スタックでは、pushメソッドはpopメソッドと共に使用される。popメソッドは同じく配列オブジェクトに存在するメソッドで、配列の最後の要素を削除してその値を返す機能を提供する。普通は、このとき配列に追加された最後の要素が取り出される。ちなみに、このメソッドも配列の長さに影響を与える（アイテムが削除されると配列の長さが1減る）。リストDの例では、popメソッドとpushメソッド双方を使用して、配列をスタックのデータ構造として使用している。

リストD

<html><head>
<title>JavaScript stack</title>
<script language="JavaScript">
function stackDemo() {
var i;
var stack = [];
stack.push(1);
stack.push(2);
i = stack.pop();
document.write(i + "<br />");
stack.push(3);
stack.push(4);
i = stack.pop();
document.write(i + "<br />");
i = stack.pop();
if (i != null) {
document.write(i + "<br />");
} }
</script></head><body>
<form name="frmStack">
<input name="btnStack" value="Stack" type="button" onClick="stackDemo();" />
</form></body></html>

　このコードを実行すると、以下の出力が生成される。

2
4
3

　ところで、これらのメソッドの機能は少々重複する。なぜなら、shiftメソッドとunshiftメソッドを用いてもスタックのデータ構造を実現することが可能だからだ。そこで、リストEではこのコードをshiftメソッドとunshiftメソッドの組み合わせで書き直している。

リストE

<html><head>
<title>JavaScript Stack</title>
<script language="JavaScript">
function stackDemo() {
var i;
var stack = [];
stack.unshift(1);
stack.unshift(2);
i = stack.shift();
document.write(i + "<br />");
stack.unshift(3);
stack.unshift(4);
i = stack.shift();
document.write(i + "<br />");
var i = stack.shift();
if (i != null) {
document.write(i + "<br />");
} }
</script></head><body>
<form name="frmStack2">
<input name="btnStack" value="Stack" type="button" onClick="stackDemo();" />
</form></body></html>

　また、先ほどのキューの例は、unshiftメソッドとpopメソッドを用いてリストFのように書き直すことも可能である。

リストF

<html><head>
<title>JavaScript Queue using unshift/pop</title>
<script language="JavaScript">
function queueDemo() {
var i;
var queue = [];
queue.unshift(1);
queue.unshift(2);
i = queue.pop();
document.write(i + "<br />");
queue.unshift(3);
queue.unshift(4);
i = queue.pop();
document.write(i + "<br />");
} }
</script></head><body>
<form name="frmQueue2">
<input name="btnQueue" value="Queue1" type="button" onClick="queueDemo();" />
</form></body></html>

選択肢は多数

　ほかの開発言語と同様に、JavaScriptにも特有の奇妙な動作が存在する。配列をさまざまな用途に利用できるのはそのよい例だろう。配列だけでスタックやキューといったデータ構造を簡単に利用できるのだ。ただし、これらのデータ構造は、ウェブアプリケーション構築時に自由に利用できる数多くの機能の一つにすぎない。