記事の内容
この記事では、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などの関数)の便利さを理解しよう
この文字列を「\t」で分割して、100以上の数字だけを「,」だけで連結させてみます。
この問題を関数型と「for」の2つの方法で解答します。
最終的な出力は、以下のようになります。
メソッドを繋げて使おう(メソッドチェイン)
以下の文字列から、100より大きい数字を抽出して、降順で並べ替えてから、空白で繋げてます。
出力結果