JavaScriptで配列データを扱う(追加、結合、取得、削除、更新)

シェアする

今回は、JavaScriptの配列(Array)の操作方法について紹介します。
紹介するのは配列の要素の追加、結合、取得、削除、更新となります。

要素の追加

配列の先頭に要素を追加

上記のプログラムを実行すると、[‘b’, ‘c’,’d’]の配列が[‘a’, ‘b’, ‘c’,’d’]となります。

配列の末尾に要素を追加する(結合)

上記のプログラムを実行すると、[‘b’, ‘c’,’d’]の配列が[‘a’, ‘b’, ‘c’, ‘d’, ‘a’]となります。

配列の要素を指定した位置に一つ以上追加 – splice

上記のプログラムを実行すると、[‘a’, ‘b’, ‘c’]の配列が、[‘a’, ‘1’, ‘b’, ‘c’]となります。

上記のプログラムを実行すると、[‘a’, ‘b’, ‘c’]の配列が、[‘a’, ‘b’, ‘c’, ‘1’, ‘2’]となります。

=>詳細はこちらをご覧ください。

配列の結合

非破壊的な結合- concat

[‘a’, ‘b’, ‘c’]に’d’の要素を配列の最後に追加します。配列変数arrayの内容に変化はありません。

破壊的な結合

上記のプログラムを事項すると配列変数、array1にarray2の配列の要素が追加され、array1の内容が変わります。
これを破壊的な結合と言います。

配列の要素の取得

配列の要素の取得

配列のkeyを指定し代入すると配列の要素の値を取得することが出来ます。

配列の末尾を取得

配列の長さから-1したkeyの配列の要素が配列の末尾の値となります。

配列の数を取得

lengthメソッドでarrayの数を取得することが出来ます。

値から最初に見つかったのkeyの値を取得 – indexOf

下記のように’b’の要素が配列に複数あっても最初に見つかった配列のkeyを返すので同じ結果となります。

値から最後のkeyを取得 – lastIndexOf

配列の値からkeyを取得します。複数以上の同じ値が存在する場合、最後の値のkeyを取得します。

複数以上の同じ値が存在する場合、最後の値のkeyを取得します。なので下記のように記述しても結果は同じです。

指定した位置から、一つ以上の値(配列)を取得 – slice

指定した位置から、一つ以上の値(配列)を取得します。sliceの第一引数の位置から、第二引数の位置までを取得します。
第一引数以上、第二引数未満の配列を取得します。

配列の要素の削除

先頭を削除 – shift

配列の先頭を削除します。

末尾を削除する – pop

配列の末尾を削除します。

指定した位置から一つ以上の値を削除 – splice

配列の指定した位置から一つ以上の値を削除します。

配列の全要素を削除(全削除) – []

[]と配列に空の配列を代入すると配列を削除することが出来ます。
ちなみにJavaScriptでは、{}が空のオブジェクトです。

配列の要素の更新

JavaScriptの配列の要素の更新は、下記のように配列のkeyを指定して代入します。

シェアする

フォローする