配列基本編（結合・検索・追加・削除）

はじめに

初めまして
今回は「配列」の使い方についてアウトプットするために詳しく書きたいと思います。

そもそも配列とは

簡潔にいうと配列とは、複数の値を1つのデータのように取り扱うことができる物です。
通常はconst text = 'こんにちは'のように文字列や数値などの値を1つの変数に格納していきます。しかし数が増えてくると1つ1つ変数名をつけるのが大変になってしまうような時に、配列データを作成することで大量の値を1つのデータのように扱えるわけです。

配列の使い方

配列を宣言する方法

JavaScriptで配列を使うためには2種類の方法があります。

1. 配列コンストラクタ「Array」を使う方法です。「配列コンストラクタ」を使う場合は、「new」を使ってArray()の引数へ格納したい文字列を設定します
2. 配列リテラル「[]」を使う方法です。「配列リテラル」を使う場合は、[ ]を使ってそのまま文字列を設定すればOKです！

具体例で説明します。

//①Arrayを使う例
const array1 = new Array('イヌ', 'オオカミ', 'ハムスター');
 
//②配列リテラルの例
const array2 = ['イヌ', 'オオカミ', 'ハムスター'];
 
console.log( array1 );//['イヌ', 'オオカミ', 'ハムスター']
console.log( array2 );//['イヌ', 'オオカミ', 'ハムスター']

どちらの方法でも同じ配列データが作成できているのを確認できますが、この2種類の方法はいくつか相違点があるのですが、最も違うのは1つだけの数値を格納しようとした時に発生します。例で紹介します。

var array1 = new Array(5);
var array2 = [5];
console.log( array1 );//[empty × 5]
console.log( array2 );//[5]

• どちらの宣言方法にも「5」という数値を設定していますが実行結果は異なっています。
• 実は、配列コンストラクタで「new Array(5)」と記述すると「5つ分の配列要素を用意する」という意味になるのです。

JavaScriptで配列を宣言（作成）する時は、特に理由がない限り「配列リテラル」を使うようにしましょう！

配列の要素を取得する方法

• 取得したい配列変数の要素番号を[]で指定することで、その要素の中身を取得することができます。

• 注意点として、要素番号（インデックス）は0番から始まるということです。
  (例）

let textArr = ['イヌ', 'オオカミ', 'ハムスター'];
console.log(textArr[0]); //イヌ

配列の要素を検索する方法(indexOf)

配列内にある各要素のデータを簡単に検索できる方法が「indexOf()」メソッドがあるのでご紹介します。

• 「indexOf()」は、指定した「値」が配列データに存在する場合にその場所を**「インデックス番号」**で取得できる機能を持っています。
• 配列データに対して「indexOf('')」を記述することで、その文字列が存在するかを確認しています。

(例）

let textArr = ['イヌ', 'オオカミ', 'ハムスター'];
let result = textArr.indexOf('ハムスター');
console.log( result ); //2

配列の要素を追加する方法

先頭に追加(unshift)

先頭に追加する場合は.unshift('')で追加できます。
(例）

let textarr = ['イヌ', 'オオカミ', 'ハムスター'];
textArr.unshift('キリン');
console.log(textArr);//['キリン','イヌ', 'オオカミ', 'ハムスター']

末尾に追加(push)

末尾に追加する場合は.push('')で追加できます。
(例）

let textArr = ['イヌ', 'オオカミ', 'ハムスター'];
textArr.push('キリン');
console.log(textArr);//['イヌ', 'オオカミ', 'ハムスター','キリン']

指定した位置に追加 (splice)

spliceは文字を追加するでけではなく、指定した場所の文字を消すこともできます。
.splice(,,)で追加できます。
言葉では難しいので例で詳しく説明します。

//text2番目にヒヨコを挿入
let textArr = ['イヌ', 'オオカミ', 'ハムスター','キリン','ネズミ'];
textArr.splice(1,0,'ヒヨコ');
console.log(textArr);//['イヌ','ヒヨコ' ,'オオカミ', 'ハムスター','キリン','ネズミ']

//text3番目から2つ削除しヒヨコを挿入
let textArr = ['イヌ', 'オオカミ', 'ハムスター','キリン','ネズミ'];
textArr.splice(2,2,'ヒヨコ');
console.log(textArr);//['イヌ', 'オオカミ', 'ヒヨコ', 'ネズミ' ]

要素の削除

配列の要素を削除する(delete)

delete([])と書いて削除できます。
(例）

//二番目を削除
let textArr = ['イヌ', 'オオカミ', 'ハムスター'];
delete textArr[1]
console.log(textArr);//['イヌ', 'ハムスター']

先頭を削除 (shift)

.shift()で削除できます。
(例）

let textArr = ['イヌ', 'オオカミ', 'ハムスター'];
textArr.shift('');
console.log(textArr);//['オオカミ', 'ハムスター']

末尾を削除する(pop)

.pop()で削除できます。
(例）

let textArr = ['イヌ', 'オオカミ', 'ハムスター'];
textArr.pop('');
console.log(textArr);//['イヌ', 'オオカミ']

指定した位置から削除(splice)

先ほど使ったspliceでできます。
.splice(,)と書いて削除できます。
(例）

//text2番目から３個削除
let textArr = ['イヌ', 'オオカミ', 'ハムスター','キリン','ネズミ'];
textArr.splice(1,3);
console.log(textArr);//['イヌ','ネズミ']

配列の全要素を削除（length）

.length=0で削除できます。
(例）

let textArr = ['イヌ', 'オオカミ', 'ハムスター'];
textArr.lengt=0;
console.log(textArr);//[]

最後に

今回は配列の使い方、要素の検索、追加、削除についてお話ししました。
今回書けなかったその他の要素については次回かこうと思っています。
基本となる部分で私自身も書いていて為になったのでぜひ、使ってみてください。

参考リンク

JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除。
【JavaScript】入門配列の使い方と操作まとめ（初期化・追加・結合・検索・削除）