JavaScriptで特定のサイズのバイナリスパイラル配列を作成する方法
問題の概要
数値 n を受け取るJavaScript関数を作成します。この関数は N × N の順序を持つ2次元配列(ネストされた配列)を構築して返します。配列の中で、1 は [0, 0] の位置から始まる渦巻き状(スパイラル)の位置すべてに配置され、それ以外の位置には 0 が入ります。
例えば、n = 5 の場合、出力は次のようになります。
[
[ 1, 1, 1, 1, 1 ],
[ 0, 0, 0, 0, 1 ],
[ 1, 1, 1, 0, 1 ],
[ 1, 0, 0, 0, 1 ],
[ 1, 1, 1, 1, 1 ]
]
実装コード
以下が実際のコードです。
const num = 5;
const spiralize = (num = 1) => {
const arr = [];
let x, y;
// num x num の2次元配列を 0 で初期化
for (x = 0; x < num; x++) {
arr[x] = Array.from({
length: num,
}).fill(0);
}
// 渦巻きの走査範囲を管理する変数
let left = 0;
let right = num;
let top = 0;
let bottom = num;
x = left;
y = top;
const h = Math.floor(num / 2);
// 境界が交差するまで渦巻き状に走査
while (left < right && top < bottom) {
// 左から右へ
while (y < right) {
arr[x][y] = 1;
y++;
}
y--;
x++;
top += 2;
if (top >= bottom) break;
// 上から下へ
while (x < bottom) {
arr[x][y] = 1;
x++;
}
x--;
y--;
right -= 2;
if (left >= right) break;
// 右から左へ
while (y >= left) {
arr[x][y] = 1;
y--;
}
y++;
x--;
bottom -= 2;
if (top >= bottom) break;
// 下から上へ
while (x >= top) {
arr[x][y] = 1;
x--;
}
x++;
y++;
left += 2;
}
// 偶数サイズの場合は中心を調整
if (num % 2 == 0) arr[h][h] = 1;
return arr;
};
console.log(spiralize(num));
コードのポイント
このアルゴリズムの核となるのは、left・right・top・bottom の4つの境界変数による走査範囲の管理です。各ループで1周分の渦巻きを描いた後、対応する境界値を 2 ずつ狭めることで、内側へと螺旋を進めていきます。境界どうしが交差した時点でループを終了し、偶数サイズの場合のみ中心座標を補正しています。
計算量は配列の要素数に比例する O(N²) であり、余分なメモリもほぼ不要なため、効率的な実装といえます。
出力結果
コンソールへの出力は以下の通りです。
[
[ 1, 1, 1, 1, 1 ],
[ 0, 0, 0, 0, 1 ],
[ 1, 1, 1, 0, 1 ],
[ 1, 0, 0, 0, 1 ],
[ 1, 1, 1, 1, 1 ]
]
-
JavaScriptのslice()メソッドとは?配列から要素を抽出する方法を実例付きで解説
slice()メソッドの基本JavaScriptのslice()メソッドは、配列の中から指定した範囲の要素を選び出し、新しい配列として返すメソッドです。元の配列は変更されずそのまま残るため、安全に部分的なデータを取り出したい場合に活用できます。基本構文array.slice(start, end)start:抽出を開始する位置を示す整数(インデックス番号)です。end:抽出を終了する位置を示す整数で、この位置にある要素自体は結果に含まれません。それでは、実際にslice()メソッドをJavaScriptで使ってみましょう。例1:配列の一部を切り取って表示する<!DOCTYPE html&
-
JavaScriptでnewキーワードを使って配列を作成する方法
JavaScriptでは、newキーワードとArray()コンストラクタを使用することで、簡単に配列を作成できます。本記事では、実際に動作するサンプルコードとともに、その基本的な使い方を解説します。 サンプルコード 以下は、newキーワードを使用してJavaScriptの配列を作成するコード例です。 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-sca