JavaScript/Indexed Collections

カテゴリ:Book:JavaScript#Indexed%20Collections%20

Indexed Collections は、整数インデックスによってアクセス可能な順序付きデータコレクションを提供するJavaScriptのオブジェクトです。配列(Array)や型付き配列(TypedArray)などが含まれます[1]

説明

JavaScript におけるインデックス付きコレクションは、数値インデックスを使用して個々の要素にアクセスできるデータ構造です。これらのコレクションは、要素の順序が保持され、特定の位置の要素に効率的にアクセスできるように設計されています。JavaScriptでは主に配列(Array)と型付き配列(TypedArray)の2種類のインデックス付きコレクションが提供されています。

インデックス付きコレクションの種類

配列(Array)

Array オブジェクトは、複数の値を単一の変数に格納するために使用されるグローバルオブジェクトです。配列の各要素は任意の型(プリミティブ型、オブジェクト、関数など)を持つことができ、要素間のデータ型を混在させることができます。

型付き配列(TypedArray)

TypedArray オブジェクトは、バイナリデータバッファの配列のようなビューを提供します。通常のJavaScript配列とは異なり、型付き配列は特定の数値データ型(Int8、Uint8、Float32など)のみを格納でき、Webのパフォーマンスとメモリ効率を向上させるために設計されています。

配列の作成と操作

以下のプログラムは、配列の基本的な作成と操作を示しています。

// 配列の作成
const fruits = ['Apple', 'Banana', 'Cherry'];
const numbers = [1, 2, 3, 4, 5];
const mixed = [1, 'two', { three: 3 }, [4, 5]];

// 配列の要素へのアクセス
console.log(fruits[0]); // "Apple"
console.log(numbers[2]); // 3
console.log(mixed[3][1]); // 5

// 配列の長さ
console.log(fruits.length); // 3

// 配列の変更
fruits[1] = 'Blueberry';
console.log(fruits); // ["Apple", "Blueberry", "Cherry"]

// 配列への追加
fruits.push('Dragon fruit');
console.log(fruits); // ["Apple", "Blueberry", "Cherry", "Dragon fruit"]

// 配列からの削除
const lastFruit = fruits.pop();
console.log(lastFruit); // "Dragon fruit"
console.log(fruits); // ["Apple", "Blueberry", "Cherry"]

このプログラムでは、配列の作成、要素へのアクセス、長さの取得、要素の変更、追加、削除といった基本的な操作を行っています。

配列メソッドの例

以下のプログラムは、配列の様々なメソッドの使用例を示しています。

const numbers = [1, 2, 3, 4, 5];

// map: 各要素に関数を適用して新しい配列を作成
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// filter: 条件に一致する要素のみを含む新しい配列を作成
const even = numbers.filter(num => num % 2 === 0);
console.log(even); // [2, 4]

// reduce: 配列の要素を単一の値に減らす
const sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 15

// forEach: 各要素に対して関数を実行
let total = 0;
numbers.forEach(num => total += num);
console.log(total); // 15

// find: 条件に一致する最初の要素を返す
const found = numbers.find(num => num > 3);
console.log(found); // 4

// sort: 配列の要素をソート
const fruits = ['Banana', 'Orange', 'Apple'];
fruits.sort();
console.log(fruits); // ["Apple", "Banana", "Orange"]

このプログラムでは、mapfilterreduceforEachfindsort などの配列メソッドを使用して、配列を様々な方法で操作・処理しています。

型付き配列の使用例

以下のプログラムは、型付き配列の基本的な使用方法を示しています。

// ArrayBuffer の作成(バイト単位でサイズを指定)
const buffer = new ArrayBuffer(16);

// 型付き配列のビューを作成
const int32View = new Int32Array(buffer);
const float64View = new Float64Array(buffer);

// 値を設定
int32View[0] = 42;
float64View[1] = 3.14159;

// 値にアクセス
console.log(int32View[0]); // 42
console.log(float64View[1]); // 3.14159

// 別の型付き配列の例
const uint8Array = new Uint8Array([1, 2, 3, 4]);
console.log(uint8Array.length); // 4
console.log(uint8Array[2]); // 3

// 型付き配列のメソッド
uint8Array.forEach((value, index) => {
  console.log(`uint8Array[${index}] = ${value}`);
});

// 型付き配列の範囲を抽出
const subArray = uint8Array.subarray(1, 3);
console.log(subArray); // Uint8Array [2, 3]

このプログラムでは、ArrayBuffer を作成し、それに対して Int32ArrayFloat64Array のビューを作成しています。また、Uint8Array を使用した例も示しています。型付き配列は、バイナリデータを効率的に処理するために使用されます。

Array.from() と Array.of() の使用例

以下のプログラムは、ES6で導入された Array.from()Array.of() メソッドの使用例を示しています。

// Array.from(): 配列のような/反復可能なオブジェクトから新しい配列を作成
const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const array1 = Array.from(arrayLike);
console.log(array1); // ["a", "b", "c"]

// マッピング関数を使用
const mapped = Array.from([1, 2, 3], x => x * 2);
console.log(mapped); // [2, 4, 6]

// 文字列から配列を作成
const chars = Array.from('hello');
console.log(chars); // ["h", "e", "l", "l", "o"]

// Array.of(): 引数から新しい配列を作成
const array2 = Array.of(1, 2, 3);
console.log(array2); // [1, 2, 3]

// 単一の引数でも配列を作成(Array() コンストラクタとは異なる)
const array3 = Array.of(5);
console.log(array3); // [5]

const array4 = Array(5); // 長さが5の空の配列を作成
console.log(array4); // [empty × 5]

このプログラムでは、Array.from() を使用して配列のようなオブジェクトや反復可能なオブジェクトから新しい配列を作成し、Array.of() を使用して引数から新しい配列を作成しています。

多次元配列

以下のプログラムは、多次元配列(配列の配列)の作成と操作を示しています。

// 2次元配列の作成
const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

// 要素へのアクセス
console.log(matrix[1][2]); // 6

// 行を反復処理
for (let i = 0; i < matrix.length; i++) {
  let row = '';
  for (let j = 0; j < matrix[i].length; j++) {
    row += matrix[i][j] + ' ';
  }
  console.log(row);
}
// 出力:
// "1 2 3 "
// "4 5 6 "
// "7 8 9 "

// 配列メソッドを使用した多次元配列の操作
const flattened = matrix.flat();
console.log(flattened); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

// 行と列を入れ替える(転置)
const transposed = matrix[0].map((_, colIndex) => 
  matrix.map(row => row[colIndex])
);
console.log(transposed); 
// [
//   [1, 4, 7],
//   [2, 5, 8],
//   [3, 6, 9]
// ]

このプログラムでは、2次元配列を作成し、要素へのアクセス、行の反復処理、flat() メソッドを使用した配列の平坦化、そして配列の転置操作を行っています。

注意点

  • インデックス: JavaScriptの配列インデックスは0から始まります。
  • スパース配列: JavaScriptの配列は疎(スパース)にすることができ、連続しないインデックスを持つことができます。
  • 長さ: length プロパティは配列の最大インデックス + 1 を返しますが、これは実際の要素数と異なる場合があります。
  • : 通常の配列は任意の型の要素を持つことができますが、型付き配列は特定の数値型のみを格納できます。
  • メモリ効率: 大量の数値データを扱う場合、型付き配列は通常の配列よりもメモリ効率が良く、パフォーマンスが向上します。
  • メソッド: 配列には多くの組み込みメソッドがあり、要素の追加、削除、検索、変換などの操作を行うことができます。
  • イテレーション: 配列を反復処理するには、for ループ、for...of ループ、または forEach メソッドを使用できます。

脚註

  1. インデックス付きコレクションは、数値インデックスを使用して要素にアクセスするデータ構造であり、JavaScriptではよく使用されるパターンです。

外部リンク

カテゴリ:Book:JavaScript#Indexed%20Collections%20 カテゴリ:JavaScript
カテゴリ:Book:JavaScript カテゴリ:JavaScript カテゴリ:Pages using the JsonConfig extension