JavaScript 多次元配列の初期化

多次元配列の初期化

const a = Array(3).fill(null);
const ma = a.map(a => a = Array(2).fill('hoge'));

console.log(ma);
// [["hoge", "hoge"], ["hoge", "hoge"], ["hoge", "hoge"]]

mapを使うとコンパクトにできる。

注意

const a = Array(3); //← .fill(null)を消すと
const ma = a.map(a => a = Array(2).fill('hoge'));

console.log(ma);
// Error: Cannot read property 'constructor' of undefined

.fill()を忘れると怒られる。

JavaScript 多次元配列の値渡し

基本

オブジェクト型(配列)は参照渡し

const a = [0,1,2];
const b = a;

//bはaを参照しているため、bを変えるとaも変わる。
b[0] = 3;
console.log(a) // [3,1,2]
console.log(b) // [3,1,2] 

JavaScriptでは、オブジェクト型は参照渡しとなる。(プリミティブ型は値渡し)

オブジェクト型(配列)を値渡し

const a = [0,1,2];
const b = [...a];

//aを値渡ししたため、bを変えてもaは変わらない
b[0] = 3;
console.log(a) // [0,1,2]
console.log(b) // [3,1,2]

//連想配列は対応してません

スプレッド演算子を利用することで値渡しを行うことができる。

多次元配列で値渡し

const a = [[0,1],[0,1],[0,1]];
const b = [...a]; 

b[0][0] = 3;
console.log(a) // [[3,1],[0,1],[0,1]]
console.log(b) // [[3,1],[0,1],[0,1]]

多次元配列でこのようにしても、値渡しができない。 これはJavaScriptの多次元配列の仕様によるものである。

JavaScriptでは、多次元配列という構文が用意されておらず、配列の要素に別の配列リテラルを格納することで、多次元配列として扱っている。

つまり以下の状態である。

const a = [[0,1],[0,1],[0,1]];
// a = [Array [0, 1], Array [0, 1], Array [0, 1]]

なので先ほどのように多次元配列の値渡しをしたい場合は、配列の要素に対して変数を宣言して変更を加える必要がある。

const a = [[0,1],[0,1],[0,1]]
const b = [...a]; 
const c = [...a[0]];

c[0] = 3;
b[0] = c;

console.log(a) // [[0,1],[0,1],[0,1]]
console.log(b) // [[3,1],[0,1],[0,1]]

目的地までのルート上でレストランが見つかるサービスサイト「Ruran」をリリースしました。

f:id:koyamathu:20180125173002j:plain:w1000

Ruranとは?

 Ruranとは、ルート沿いのレストランが簡単に見つかるサービスです。 www.ru-ran.com

Ruranを開発したきっかけ

 皆さんは、旅行やドライブの際、ルート沿いの地名でレストラン検索したりしていませんか。
 私はアウトドアが好きでよく車で遠出します。そしてそういう時には「高速道路に乗る前にレストランによっておきたいな」「旅館に向かう道のりで昼食を食べたいな」などと思うことがあります。しかし今までのサービスでは、ルート沿いのレストランを細かく検索することや見つけたレストランをそのまま予約することが困難でした。そこで私は、同じ思いをしている人の旅行やドライブでのレストラン探しを便利にしたいと思い、目的地までの途中でレストランが探しやすくなるサービス「Ruran」を開発しました。

Ruranのいいところ

・ルート沿いのレストランが簡単に見つかります。
出発地と目的地を入力して検索すると、ルート沿いのレストランが表示されます。

・今まで探しにくかったレストランが見つかります。
「ルートから1000m」「和食」「駐車場あり」など、条件を絞って検索できます。

・見つけたレストランを予約できます。
予約ボタンを押すと、予約サイトに移動します。

PCとモバイルで使えます!

f:id:koyamathu:20180206144129p:plain

使い方

1. 出発地と目的地を入力します。 f:id:koyamathu:20180206124141p:plain:w1000

2. 検索ボタンをクリックすると、ルート検索が行えます。 f:id:koyamathu:20180206124142p:plain:w1000

3. レストランアイコンをクリックすると、レストランの情報が見れます。予約ボタンをクリックすると情報元のサイトに移動できます。 f:id:koyamathu:20180206124145p:plain:w1000

4. 詳細検索を押すと条件を絞ったレストラン検索が行えます。 f:id:koyamathu:20180206125431p:plain:w1000

あなたのレストラン探しをもっと便利にします。
ぜひ使ってみてください。

www.ru-ran.com