javascript

JavaScript配列の追加や削除などわかりやすく解説【初心者必見】

javascript配列

今回は配列編ということで、JavaScriptの配列について紹介していきます!

ここを読み終わる頃には、配列は扱えるようになっているでしょう!配列の考え方はどんなプログラミング言語でもほぼ一緒なので、1つ覚えておくと他の言語をした時には頭に入りやすくなっていると思います!

ここでは基礎的なJavascriptの配列を教えます。深く学べばもっといろんな方法があるのですが、使いやすく学びやすそうなものをピックアップしてます。

配列とは何か?

配列ってなんだ?って思う人多いです。ここでは軽く説明します。

配列は、簡単にいうと箱みたいなのがなのがいつくか繋がっていて、その中に値が入っているって感じです。わかりやすく書くと↓みたいな感じです!

番号は1番最初が『0』から始まります。困惑しやすいんですけど、0スタート!

そして、箱の中には何が入っているのかわかりません。数値かもしれないし、文字かもしれないし、入っていないかもしれないという事を覚えておいてください。

そして、プログラミングではその箱にどんどん値を詰め込んだり、出したり、消したりと色々できるんです!

1つ1つ値を名前を付けて管理しては、かなりの数になるのでまとめて一括りにして名前をつけて配列として管理することができるんですね!

次からJavaScriptでの配列の扱い方について説明していきます!

配列の作り方

配列を作る基本的な部分を紹介します!

習うより慣れろというので、とりあえずやってみましょう!まずは変数の宣言とともに[ ]このカギカッコを入れます。こんな感じです。

配列に追加の仕方

配列の追加には3つあります。

追加方法

  • push【後ろに追加】
  • unshift【前に追加】
  • splice【指定した場所に】

1つずつ紹介していきます。

push

pushのイメージ的にはこんな感じです。

unshift

unshiftは先頭に値を入れる感じです。イメージはこんな感じ。

splice

spliceは指定した場所に挿入可能!置き換えなんかも可能!

splice(場所, 置き換えたい数, 入れたい値 )こんな風にできるできます!イメージでは、splice(1, 0, “ココ”);みたいな感じです。

配列の中身を消すには?

消すのも追加と結構似ているので、一気に紹介します!

配列を消す方法

  • pop【最後を削除】
  • shift【先頭を削除】
  • splice【指定した場所を削除】
  • []【中身をからにする】

pop

イメージ的にはこんな感じで、最後の値を消せます!

shift

先頭を削除イメージ的には↓

splice

指定した場所を削除↓

splice(1,1);

[]

配列の中身を空にできます。イメージ的には↓な感じで配列内に何もない。

 

配列の中身を検索

検索方法はいくつかありますが、配列の中の検索をしたいということを前提で2つピックアップしました!

配列の検索

  • find
  • filter

find

findは配列の中から1番最初に見つかった値を1つだけ取ってきます。例は下のようになります。

filter

filterは主に条件に一致したものすべて取り出せます。例はこちら

 

配列の検索方法はいろんなものがあるので、もっと詳しく知りたい人はもっと調べてくださいね!今回は基本的なのを紹介してます!

配列の中身をループで取り出すには?

その前に、ここで使う配列の長さを調べる方法も紹介します!
lengthというのを変数名の後につけるだけで、配列の長さがわかります。例えばこんな感じです。

let array = [1, 2, 3];
console.log(array.length); 出てくる答えは3です!

こんな感じで簡単に長さを取り出せます!

そして、中身を取り出すには、配列をループで1つずつ取り出すのが1番簡単です!2つの方法があるので紹介します。

 まとめ

JavaScriptの配列と言ってもめっちゃ奥が深いので、自分が実際使うときによく調べてそれを使ったらその状況では1番効果的なのか?などをよく考えて使うといいと思います!

最初のうちは調べながらでしょうけど、使っているうちにどんどんわかってくると思うのでどんどん使って身につけましょう!

軽く触りだけの配列編でしたが、ここまでくれば簡単な配列は取り扱えるはずです!もっと詳しく調べたい人は調べてね!

【経験談】おすすめのプログラミングスクールと選び方