JavaScriptの配列変数

配列は、複数の値を順序付けて格納できるデータ構造です。JavaScriptの配列には型がありません。数値、文字列、オブジェクトなど、異なる型の値をまとめて格納できます。

配列内の各要素には、0 から始まるインデックス(番号)が割り当てられており、このインデックスによって要素の順序が保持されます。後から要素を追加したり削除したりすることで、サイズを自由に変更できます。

配列の作成と初期化

let numbers = [1, 2, 3, 4, 5]; // 数値の配列
let fruits = ["Apple", "Banana", "Cherry"]; // 文字列の配列
let mixed = [1, "hello", true, { key: "value" }]; // 異なる型の要素を持つ配列
let emptyArray = []; // 空の配列

配列要素へのアクセス

let colors = ["Red", "Green", "Blue"];
console.log(colors[0]); // "Red"
console.log(colors[1]); // "Green"
console.log(colors[2]); // "Blue"
  • 配列のインデックスは 0 から始まります。
  • 存在しないインデックスを指定すると undefined になります。

配列の長さを取得

let items = ["A", "B", "C", "D"];
console.log(items.length); // 4

length プロパティを使って要素数を取得できます。

let count = [1,,3];           //配列の値をまばらに格納
console.log( count.length );  // => 3
console.log( count[1] );      // => undefined

let undefs = [,,];            //空要素の配列
console.log( undefs.length );  // => 2

値をまばらに格納することもできます。空の要素もインデックスされます。ただし、undefsのような場合、JavaScriptの配列リテラルでは最後の要素にカンマを入れてもいいことになっているので、lengthは[2]になります。

配列の要素を変更

let nums = [10, 20, 30];
nums[1] = 25; // 20 を 25 に変更
console.log(nums); // [10, 25, 30]

配列の操作

配列に要素を追加

let arr = [1, 2, 3];
arr.push(4); // 配列の末尾に追加
console.log(arr); // [1, 2, 3, 4]

arr.unshift(0); // 配列の先頭に追加
console.log(arr); // [0, 1, 2, 3, 4]

配列から要素を削除

let arr = [1, 2, 3, 4, 5];
arr.pop(); // 最後の要素を削除
console.log(arr); // [1, 2, 3, 4]

arr.shift(); // 最初の要素を削除
console.log(arr); // [2, 3, 4]

指定した位置の要素を削除・追加 (splice)

let arr = [1, 2, 3, 4, 5];
arr.splice(2, 1); // インデックス2の要素を削除
console.log(arr); // [1, 2, 4, 5]

arr.splice(1, 2, "A", "B"); // インデックス1から2つ削除し、"A"と"B"を追加
console.log(arr); // [1, "A", "B", 5]

配列をループ処理

for ループ

let numbers = [10, 20, 30, 40];
for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]); // 10, 20, 30, 40
}

forEach メソッド

let numbers = [10, 20, 30, 40];
numbers.forEach(num => console.log(num)); // 10, 20, 30, 40

for...of ループ

let numbers = [10, 20, 30, 40];
for (let num of numbers) {
    console.log(num); // 10, 20, 30, 40
}

配列の変換と検索

配列のマッピング (map)

let nums = [1, 2, 3, 4];
let squared = nums.map(n => n * n);
console.log(squared); // [1, 4, 9, 16]

条件に一致する要素を取得 (filter)

let evens = nums.filter(n => n % 2 === 0);
console.log(evens); // [2, 4]

要素の検索 (findfindIndex)

let num = nums.find(n => n > 2); // 最初に条件を満たす要素を返す
console.log(num); // 3

let index = nums.findIndex(n => n > 2); // 条件を満たす最初の要素のインデックスを返す
console.log(index); // 2

配列の結合と分割

concat メソッド

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let combined = arr1.concat(arr2);
console.log(combined); // [1, 2, 3, 4, 5, 6]

スプレッド構文

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let merged = [...arr1, ...arr2];
console.log(merged); // [1, 2, 3, 4, 5, 6]

配列名の先頭に3つのピリオド[…]を記述すると、配列要素が展開されます。この例の場合、[…arr1]の部分に配列arr1の要素、[…arr2]の部分に配列arr2の要素を連続して記述したことと同様の結果になります。

let hexNum = [..."0123456789ABCDEF"]; // 文字列を展開
console.log(hexNum);                  // => ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"]

スプレッド構文により文字列を1文字ずつ配列に展開することも可能です。

join メソッド

let words = ["Hello", "World"];
let sentence = words.join(" ");
console.log(sentence); // "Hello World"

Array()コンストラクタ

空の配列を作成

let arr = new Array();  // 空の配列を作成
console.log(arr);       // []

空の配列を指定数作成する

let arr = new Array(5);
console.log(arr);         // [ <5 empty slots> ]
console.log(arr.length);  // 5

複数の引数を渡す

let arr = new Array(1, 2, 3, 4, 5); // 要素を引数として渡します
console.log(arr);                   // => [1, 2, 3, 4, 5]

引数が 1つ以上 ある場合、それらの要素を持つ配列が作成されます。

文字列を渡す

let arr = new Array("hello");
console.log(arr); // => ["hello"]

引数が数値でない場合は、通常の配列として扱われます。

Array.of()

Array()コンストラクタでは、数値要素を1つ持つ配列を作ることができません。Array.of()関数は数値を1つ引数に入れることでを生成できます。常に渡された要素の配列を作るのがArray()関数です。

let arr1 = new Array(5);   // [ <5 empty slots> ] (長さ5の空配列)
let arr2 = Array.of(5);    // [5] (1要素の配列)

console.log(arr1.length); // 5
console.log(arr2.length); // 1

Array.from()

Array.from() は、配列ではない 配列風オブジェクト(array-like objects) や 反復可能オブジェクト(iterable objects) を、本物の配列に変換するためのメソッドです。

/*
「argumentsオブジェクト」は
配列風オブジェクト(array-like objects)であり、
関数に渡された引数の値を含んでおり、
関数内からアクセスすることができます。
*/

function example() {
  console.log(arguments); // 配列のようなオブジェクト
  let arr = Array.from(arguments);
  console.log(arr); // 配列に変換される
}

example(1, 2, 3, 4);
// Arguments [1, 2, 3, 4] (4)
// [1, 2, 3, 4]