JavaScriptのArray.fromメソッド：詳細ガイド

JavaScriptの`Array.from`メソッド：詳細ガイド

Array.fromメソッドとは？

Array.fromは、引数として渡されたオブジェクトを新しい配列に変換する静的メソッドです。このメソッドは、配列以外にも、文字列、数値セット、ジェネレータなど、さまざまな種類のオブジェクトを変換することができます。

基本的な構文は以下の通りです。

Array.from(iterableObject, [mapFunction]);

iterableObject: 変換対象のオブジェクト
mapFunction: (オプション) 各要素を変換するために使用される関数

基本的な使い方

Array.fromの最も基本的な使い方は、配列類似オブジェクトを新しい配列に変換することです。

const numbers = [1, 2, 3, 4, 5];
const newArray = Array.from(numbers);
console.log(newArray); // [1, 2, 3, 4, 5]

この例では、numbers配列がArray.fromに渡され、その結果、新しい配列newArrayが作成されます。newArrayは元の配列とまったく同じ内容になります。

mapFunctionを使った要素の変換

mapFunctionオプションパラメータを使用すると、Array.fromで各要素を変換することができます。この関数は、イテレータ内の各値に対して順番に呼び出され、その戻り値が新しい配列の要素となります。

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = Array.from(numbers, x => x * x);
console.log(squaredNumbers); // [1, 4, 9, 16, 25]

上記の例では、mapFunctionは渡された各数値を二乗し、その結果がsquaredNumbers配列に格納されます。

イテレータオブジェクトの変換

Array.fromは、配列以外にも、文字列、数値セット、ジェネレータなど、さまざまな種類のイテレータオブジェクトを変換することができます。

例：文字列から配列を作成

const str = "Hello, World!";
const letters = Array.from(str);
console.log(letters); // ['H', 'e', 'l', 'l', 'o', ',', ' ', 'W', 'o', 'r', 'l', 'd', '!']

例：数値セットから配列を作成

const set = new Set([1, 2, 3, 4, 5]);
const arrayFromSet = Array.from(set);
console.log(arrayFromSet); // [1, 2, 3, 4, 5]

例：ジェネレータから配列を作成

function* range(start, end) {
  for (let i = start; i <= end; i++) {
    yield i;
  }
}

const numbers = Array.from(range(1, 10));
console.log(numbers); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

高度な応用例

Array.fromは、さまざまな高度な操作にも利用できます。

例：空の要素を持つ配列を作成

const length = 5;
const emptyArray = Array.from({ length });
console.log(emptyArray); // [undefined, undefined, undefined, undefined, undefined]

例：特定の値で初期化された配列を作成

const length = 5;
const filledArray = Array.from({ length }, () => 7);
console.log(filledArray); // [7, 7, 7, 7, 7]

例：2つの配列を連結

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = Array.from(array1, ...array2);
console.log(combinedArray); // [1, 2

const numbers = [1, 2, 3, 4, 5];
const newArray = Array.from(numbers);
console.log(newArray); // [1, 2, 3, 4, 5]

この例では、mapFunctionを使用して、Array.fromで各要素を二乗する方法を示します。

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = Array.from(numbers, x => x * x);
console.log(squaredNumbers); // [1, 4, 9, 16, 25]

const str = "Hello, World!";
const letters = Array.from(str);
console.log(letters); // ['H', 'e', 'l', 'l', 'o', ',', ' ', 'W', 'o', 'r', 'l', 'd', '!']

const set = new Set([1, 2, 3, 4, 5]);
const arrayFromSet = Array.from(set);
console.log(arrayFromSet); // [1, 2, 3, 4, 5]

function* range(start, end) {
  for (let i = start; i <= end; i++) {
    yield i;
  }
}

const numbers = Array.from(range(1, 10));
console.log(numbers); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

const length = 5;
const emptyArray = Array.from({ length });
console.log(emptyArray); // [undefined, undefined, undefined, undefined, undefined]

const length = 5;
const filledArray = Array.from({ length }, () => 7);
console.log(filledArray); // [7, 7, 7, 7, 7]

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = Array.from(array1, ...array2);
console.log(combinedArray); // [1, 2, 3, 4, 5, 6]

部分配列を作成

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const subArray = Array.from(numbers, 2, 5); // start: 2, end: 5 (exclusive)
console.log(subArray); // [3, 4, 5]

逆順に要素を並べた配列を作成

`Array.from`の代替方法

スプレッド構文

スプレッド構文は、配列を新しい配列に展開したり、他の配列に結合したりする際に便利な方法です。構文は次のとおりです。

const newArray = [...iterableObject];

利点:

シンプルで読みやすい構文
Array.fromよりも多くのブラウザでサポートされている

欠点:

mapFunctionのような要素変換機能がない
イテレータオブジェクトのみを処理できる

例:

const numbers = [1, 2, 3, 4, 5];
const newArray = [...numbers];
console.log(newArray); // [1, 2, 3, 4, 5]

slice()とforEach()の組み合わせ

この方法は、より古いブラウザで使用できますが、少し冗長です。

const iterableObject = [1, 2, 3, 4, 5];
const newArray = [];

iterableObject.forEach(function(value) {
  newArray.push(value);
});

console.log(newArray); // [1, 2, 3, 4, 5]

ほとんどのブラウザで動作

冗長で読みづらいコード

手動ループ

これは最も基本的な方法ですが、非効率的で冗長です。

const iterableObject = [1, 2, 3, 4, 5];
const newArray = [];

for (let i = 0; i < iterableObject.length; i++) {
  newArray.push(iterableObject[i]);
}

console.log(newArray); // [1, 2, 3, 4, 5]

すべてのブラウザで動作

非効率的で冗長

Array.fromは、多くの場合、配列類似オブジェクトやイテレータから新しい配列を作成するための最良の方法です。しかし、スプレッド構文やslice()とforEach()の組み合わせなどの代替方法の方が、状況によっては適切な場合があります。

JavaScript の Date.setUTCFullYear メソッド：詳細ガイド

メソッドの構文:引数:yearValue: 設定する年の数値。monthValue (オプション): 設定する月の数値 (0から11までの範囲)。デフォルトは現在の月です。戻り値:このメソッドは、変更された Date オブジェクトを返します。

JavaScript の Date.setUTCMilliseconds メソッドの詳細解説

Date. setUTCMilliseconds() メソッドは、JavaScript の Date オブジェクトにおいて、協定世界時 (UTC) を基準としたミリ秒数を設定するために使用されます。つまり、このメソッドを用いることで、特定の瞬間をミリ秒単位の精度で表現することが可能になります。

JavaScript の Date.setUTCSeconds メソッド

Date. setUTCSeconds メソッドは、JavaScript の Date オブジェクトにおいて、秒単位で協定世界時 (UTC) を設定するためのものです。UTCは、世界共通の時間を指す基準であり、国際的な時刻管理に使用されています。

JavaScript の Date.toLocaleString メソッド：詳細解説

基本的な動作上記コードは、現在の日付と時刻を新しい Date オブジェクトとして作成し、toLocaleString メソッドを使用してロケール設定に基づいた文字列に変換します。結果は、ユーザーのロケール設定に応じて、日付、曜日、時刻、およびタイムゾーン情報を含む、言語表現の文字列になります。

JavaScript の Date.toTimeString メソッド：詳細解説

Date. toTimeString() メソッドは、JavaScript における Date オブジェクトの時刻部分を、英語表記の文字列として返します。これは、現在時刻や特定の時点における時刻情報を取り扱う際に役立ちます。構文戻り値日付オブジェクトの時刻部分を、HH:MM:SS GMT±xxxx (TZ) の形式で表した文字列 HH: 2桁の営業時間 (必要に応じて先頭に0を付加)GMT±xxxx: グリニッジ標準時 (GMT) とのオフセット (正負、時差、およびオプションの分)(TZ): タイムゾーン略称 (省略可能)

JavaScriptのArray.fromメソッド：詳細ガイド