配列リテラルの使用 | 配列の定義 | JavaScript 超完全入門 基本から発展までのすべて

配列リテラルとは？

JavaScriptで配列を定義する際に最も一般的な方法が、配列リテラルを使用する方法です。配列リテラルとは、角括弧[]を使用して、コンマで区切った値を含む構文です。配列リテラルを使うことで、簡潔に配列を作成することができます。

配列リテラルの例

const fruits = ["apple", "banana", "cherry"];

console.log(fruits);  // ["apple", "banana", "cherry"]
console.log(fruits[0]);  // "apple"

この例では、配列fruitsをリテラルで定義し、複数のフルーツの名前を含んでいます。配列の要素にはインデックスを使用してアクセスできます（最初の要素はインデックス0）。

配列の長さ

配列リテラルを使って作成された配列は、lengthプロパティを持ち、これを使って配列の要素数を取得することができます。

配列の長さを取得する例

const fruits = ["apple", "banana", "cherry"];

console.log(fruits.length);  // 3

この例では、fruits配列の長さが3であることがわかります。

配列の要素を操作する

配列リテラルを使用して作成された配列は、様々な操作が可能です。要素を追加したり、削除したり、特定の要素にアクセスすることができます。

配列に要素を追加する例

const fruits = ["apple", "banana", "cherry"];

// 配列に新しい要素を追加
fruits.push("orange");

console.log(fruits);  // ["apple", "banana", "cherry", "orange"]

この例では、pushメソッドを使ってfruits配列に新しい要素"orange"を追加しています。

配列リテラルの特性

配列リテラルは、簡単に定義できるため、複数のデータを管理するために広く使われます。また、配列の要素には異なるデータ型を混ぜて含めることができます。

異なるデータ型を含む配列の例

const mixedArray = ["apple", 42, true, { name: "banana" }];

console.log(mixedArray);
// ["apple", 42, true, { name: "banana" }]

この例では、文字列、数値、ブール値、そしてオブジェクトが同じ配列内に含まれています。JavaScriptの配列は異なるデータ型を持つ要素を格納できるため、柔軟に使用することができます。

配列リテラルの使用例とパフォーマンス

配列リテラルは、簡単で直感的に使える構文ですが、大量のデータや複雑な構造を持つ場合には、パフォーマンスに影響を与えることがあります。特に、pushやspliceなどのメソッドを頻繁に使用する場合は、パフォーマンスに注意が必要です。

パフォーマンスの違いの例

まとめ

JavaScriptの配列リテラルは、直感的で簡単に配列を作成する手法です。配列リテラルを使用すると、異なるデータ型を含む配列を定義でき、さまざまな方法で操作可能です。パフォーマンスの観点から、適切なメソッドを選んで効率よく操作することが重要です。