JavaScriptで二次元配列の追加の方法とは【メンターが回答】

「JavaScriptの二次元配列の追加の仕方」という質問にTechAcademyの現役エンジニアが解決方法を回答しています。追加したい配列を作成してpushする方法についてぜひ理解しておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

※TechAcademyに実際に寄せられた質問に現役エンジニアのメンターが回答しました。

 

田島悠介

質問に対して現役のエンジニアが回答していくシリーズだね!

大石ゆかり

今回はどういう質問でしょうか?

田島悠介

JavaScriptの二次元配列の追加の仕方についてだね!実際に回答してもらった内容を紹介するね!

大石ゆかり

お願いします!

質問

次のような配列を作成します。

ticks = [[1, "A"],
  [2, "B"],
  [3, "C"],
  [4, "D"],
  [5, "E"],
  [6, "F"]];

これに、何らかのコマンドを入力して、ticks.push( )を二次元配列でも同じように追加したいです。

以下のような結果にしたいと思っています。

ticks = [[1, "A"],
  [2, "B"],
  [3, "C"],
  [4, "D"],
  [5, "E"],
  [6, "F"],
  [7, "G"]];

 

自分で試したこと

追加部分だけを作りましたが、上手くいきませんでした。

ticks.puts(plas);

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

メンターからの回答

これに、何らかのコマンドを入力して、ticks.push( )を二次元でもやりたいです。

JavaScriptでは、二次元配列でも同じように追加したい配列を作成してpushすることができます。

ticks = [[1, "A"],
  [2, "B"],
  [3, "C"],
  [4, "D"],
  [5, "E"],
  [6, "F"]];

なので、上記の配列に[7, “G”]という配列を追加したいときは以下のようなプログラムで実現できます。

ticks.push([7, "G"]);

その結果を出力すると、想定どおり以下のような結果になります。

ticks = [[1, "A"],
  [2, "B"],
  [3, "C"],
  [4, "D"],
  [5, "E"],
  [6, "F"],
  [7, "G"]];

 

先頭に追加する

元データ

ticks = [
  [1, "A"], 
  [2, "B"], 
  [3, "C"], 
  [4, "D"], 
  [5, "E"], 
  [6, "F"]];

 

追加コード

ticks.unshift([0, "Z"]);

 

表示結果

ticks = [
  [0, "Z"],
  [1, "A"], 
  [2, "B"], 
  [3, "C"], 
  [4, "D"], 
  [5, "E"], 
  [6, "F"]];

 

解説

ticks.unshift([0, “Z”]);という処理を行うことで、ticks配列の先頭にunshift処理でデータを追加します。先頭に[0, “Z”]が追加されました。

 

先頭の要素を削除

元データ

ticks = [
  [1, "A"], 
  [2, "B"], 
  [3, "C"], 
  [4, "D"], 
  [5, "E"], 
  [6, "F"]];

 

追加コード

ticks.shift();

 

表示結果

ticks = [
  [2, "B"], 
  [3, "C"], 
  [4, "D"], 
  [5, "E"], 
  [6, "F"]];

 

解説

ticks.shift();という処理を行うことで、ticks配列の先頭データを削除することができます。

 

以上、JavaScriptの二次元配列の追加の仕方について解説しました。

TechAcademyでは、現役JavaScriptエンジニアのメンターが質問にすぐ回答します。

 

回答してくれたメンター

武田 勝輝(たけだ しょうき)

HaskellやLispなど関数型プログラミング言語を使用した数値計算システム開発業務に従事。

 

田島悠介

JavaScriptの二次元配列の追加の仕方について解説したよ。

大石ゆかり

簡単に追加出来るんですね。

田島悠介

そうそう。組み込みの関数(メソッド)で簡単に追加できるんだ。

大石ゆかり

わかりました。ありがとうございます!

他にもJavaScriptでグローバル変数を取得する方法についてメンターが回答しているので、合わせてご覧ください。

TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサービスを開発することが可能です。

独学に限界を感じている場合はご検討ください。