プログラミング、フリーダイビング、ブロックチェーンのブログ

プログラミング道場

【JavaScript入門】配列の基礎から応用までを説明

更新日:

記事の内容


この記事では、JavaScript言語でよく使う配列の基礎的な使い方から応用までを説明します。
簡単なサンプルも書くので、これさえ読めば配列の使い方はバッチリです!
また、応用編に関数型のJavaScriptの書き方も説明しています。
JavaScriptのコードは、ES6で書いています。

配列はどんな時に使うの?

配列とは複数のデータを扱うためのデータ型です。
そのため、実装中に、「同じようなことをしているかも?」と疑問に感じた時は、配列を使うことを検討してみましょう。
以下ような、「値を倍にするコード」を書く時を例にとって説明します。

配列を使ったコードの方が短いですし、新しい値を追加する時にも、配列に値を追加するだけで済みます。

ここがポイント!

  • 何度も同じ処理が出てきたら、配列を使うことを考えてみよう
  • 配列を使うと処理が短くなります
  • 配列を使うと、コードを変更しやすくなります

配列の書き方

では、実際に配列の書き方を見ていきます。
配列を作成する方法には、new Arrayと、[](角括弧)の2つがあります。

配列に値を格納することで、0から順番に0,1,2という添字(そえじ)が割り振られます。
添字とは、要素番号と考えて下さい。

ここがポイント!

  • 配列は、new Arrayか、[](角括弧)で作成できる
  • 配列に値を格納することで、0から順番に0,1,2という添字が割り振られる

配列の中身の見方と範囲で切り出す(slice)

配列に要素を追加、取り出す(push, unshift, pop, shift)

連想配列とは?

連想配列は、値を格納して自動的に添字の番号(0, 1, 2)が割り振られる配列とは異なります。
その代わりに、番号ではなくキーとなる名前をつけることができます。
番号の代わりにキーとなる名前をつけることにより、そのキーを指定して値を取り出すことができます。

連想配列の書き方と中身の確認

Mapを使う方が好ましいと思いますが、そこは現場ごとに意見が異なるかもしれません。

Mapを使う方法

オブジェクトを使う方法

連想配列の値を変更したり要素を追加する

Mapを使う方法

オブジェクトを使う方法

多次元配列とは?

多次元配列とは、配列の中に配列が入っている状態のことです。

多次元配列の書き方と中身の見方

応用編

配列の値を検索(some, every)

配列を結合(concat, apply)

配列の最大値と最小値を求める

配列の値を置換(fill)

配列の値を並び替える(sort, reverse)

配列の値をフィルタリング(filter, find, map)

関数型(filterなどの関数)の便利さを理解しよう

'100\t200\t300\t1\t2\t3';

この文字列を「\t」で分割して、100以上の数字だけを「,」だけで連結させてみます。
この問題を関数型と「for」の2つの方法で解答します。
最終的な出力は、以下のようになります。

100,200,300

メソッドを繋げて使おう(メソッドチェイン)

以下の文字列から、100より大きい数字を抽出して、降順で並べ替えてから、空白で繋げてます。

'99,100,201,101,9999,2,5,6'

出力結果

9999 201 101

まとめ

この記事では、JavaScriptの配列操作について説明しました。

Good luck for your engineer life!

JavaScriptをより詳しく勉強したい人は、この記事を読んで下さい

JavaScriptの学習でオススメの本と動画【2019年最新】

初心者向け いちばんやさしいJavaScriptの教本 プログラミング初心者にも簡単に理解できるような書き方がされていて、ページあたりの文字数や内容も少ないので、テンポよく勉強を進めることができます。 全体像を掴むには最適な本です。 ただし ...

続きを見る


30代からプログラミングを始めようか迷っている人は、この記事を読んで下さい

30代からプログラミングを始めることは可能なのか?【頑張ればギリギリセーフ】

エンジニアは人気の職種だと聞いていますが、若い人達が多い印象です。 30代から始めても間にあいますか? 2030年には79万人のエンジニアが不足 まずは、今後、10年間以上に渡るエンジニアの需給について確認しましょう。 自分の身を預けたいと ...

続きを見る


プログラミングスクールに行くか迷っている人は、この記事を読んで下さい

なんとなく、エンジニアになりたい人が無料のプログラミングスクールに行くべき理由【2019年12月の最新】

有料や無料のプログラミングスクールが多すぎて、どこにしようか迷っています。 無料のプログラミングスクールは、お得そうに見えますが、実際の所はどうですか? メリットやデメリットなどがあれば教えて下さい。 無料のスクールを推す理由 まずは、私が ...

続きを見る


自分がプログラミングスクールに行っても大丈夫か知りたい人は、この記事を読んで下さい

プログラミングスクールに通って挫折する人と上手くいく人の違い

スクールに通っている人の3パターン プログラミングスクールに通っている人のパターンを整理すると、以下の3パターンに分かれます。 それぞれのタイプの特徴を、もう少し詳細に説明していきます。 それぞれのタイプの特徴 大した努力をせずに文句ばかり ...

続きを見る


ゼロからWebエンジニアになりたい人は、この記事を読んで下さい

ゼロからWebエンジニアとして就職する方法【何もない自分に積み上げていく】

ちまたには、「エンジニアになるための情報」で溢れかえっています。 ジョージさんが考える「Webエンジニアになる方法」を教えて下さい。 私が定義するWebエンジニア まず、最初に以下の図を見て下さい。 これが、Web業界で働く人達の大分類です ...

続きを見る


独学で実務っぽい経験を積みたい人は、この記事を読んで下さい

エンジニアが独学で実務経験っぽいことを学ぶ方法

エンジニアとして就職するためには実務経験が大事だと聞いていますが、就職しないことには実務経験を積むことができません。 どうやって、最初の実務経験を積んだらいいでしょうか? スクールの理想と現実 これからプログラミングを学ぼうとしている人が描 ...

続きを見る

関連コンテンツ

-JavaScript, プログラミング

Copyright© プログラミング道場 , 2020 All Rights Reserved Powered by AFFINGER4.