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

プログラミング道場

私がオススメするプログラミング教材です

私がおすすめするプログラミング教材のまとめ【書籍】

目次1 これからエンジニアになりたい人へ向けた本2 プログラミング言語3 アプリ開発4 サーバー、インフラ、セキュリティなど5 機械学習系6 ゲーム開発7 データベース8 デザイン9 組織作り10 自作シリーズ11 その他12 おまけ これ ...

続きを見る

【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をより詳しく勉強したい人には、この記事がオススメです

JavaScriptの学習でおすすめの本と動画【2024年最新】

目次1 フレームワークなどの情報2 動画教材3 初心者向け4 中級者向け5 まとめ フレームワークなどの情報 Node.jsについては、この記事を読んで下さい Reactについては、この記事を読んで下さい Vue.jsについては、この記事を ...

続きを見る


Node.jsをより詳しく勉強したい人には、この記事がオススメです

Node.jsの学習でおすすめの本と動画【2024年最新】

目次1 動画教材2 中級者向け 動画教材 Node.jsで学ぶWebシステムとソフトウェア開発基礎! ▼ 興味がある方は、画像をクリック 本コースではNode.jsの基礎に加え、Webシステムの仕組み、デスクトップアプリ開発、自動化ツールの ...

続きを見る


TypeScriptをより詳しく勉強したい人には、この記事がオススメです

TypeScriptの学習でおすすめの本と動画【2024年最新】

目次1 動画教材2 中級者向け 動画教材 【世界で7万人が受講】Understanding TypeScript 日本語版 ▼ 興味がある方は、画像をクリック JavaScriptのより優れたバージョンであるTypeScriptを基本から応 ...

続きを見る


Reactをより詳しく勉強したい人には、この記事がオススメです

Reactの学習でおすすめの本と動画【2024年最新】

目次1 動画教材2 初心者向け3 中級者向け 動画教材 【2023年最新】React(v18)完全入門ガイド|Hooks、Next.js、Redux、TypeScript ▼ 興味がある方は、画像をクリック HTML、CSS、JavaScr ...

続きを見る


Vue.jsをより詳しく勉強したい人には、この記事がオススメです

Vue.jsの学習でおすすめの本と動画【2024年最新】

目次1 動画教材2 中級者向け 動画教材 【Laravel】【Vue.js3】で【CRM(顧客管理システム)】をつくってみよう ▼ 興味がある方は、画像をクリック 受講者向けアンケートでご要望の多かった顧客管理システムを、Vue.js3 ( ...

続きを見る


Gitをより詳しく勉強したい人には、この記事がオススメです

Gitの学習でおすすめの本と動画【2024年最新】

目次1 動画教材2 漫画?でわかりやすく学ぶ入門書の定番3 初心者向け4 中級者向け5 上級者向け 動画教材 もう怖くないGit!チーム開発で必要なGitを完全マスター ▼ 興味がある方は、画像をクリック Gitの基本コマンド、ブランチやマ ...

続きを見る


関数型言語をより詳しく勉強したい人には、この記事がオススメです

関数型言語の学習でおすすめの本と動画【2024年最新】

目次1 動画教材2 初心者向け3 中級者向け 動画教材 The Complete Haskell Course: From Zero to Expert! ▼ 興味がある方は、画像をクリック 英語版です。 すべての人のためのモダンなHask ...

続きを見る


ゼロからWebエンジニアになりたい人には、この記事がオススメです

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

ちまたには、「エンジニアになるための情報」で溢れかえっています。 ジョージさんが考える「Webエンジニアになる方法」を教えて下さい。 目次1 私が定義するWebエンジニア2 必ずやるべきこと3 推奨されること4 まとめ 私が定義するWebエ ...

続きを見る


独学で実務っぽい経験を積みたい人には、この記事がオススメです

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

エンジニアとして就職するためには実務経験が大事だと聞いていますが、就職しないことには実務経験を積むことができません。 どうやって、最初の実務経験を積んだらいいでしょうか? 目次1 スクールの理想と現実2 IT業界が抱える矛盾点3 擬似的に実 ...

続きを見る

-JavaScript, プログラミング

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