🔄
【JavaScript】Array.fromで文字列と配列風オブジェクトから新しい配列を生成する方法
Array.fromメゾットについて
Array.fromメソッドは、文字列や配列風オブジェクトから新しい配列を生成する便利な方法を提供します。これを使用することで、非配列データを配列に変換し、JavaScriptでのさらなるデータ操作を容易にします。
Array.fromのサンプルコード
以下のサンプルコードでは、Array.fromを使用して文字列から配列を生成し、配列風オブジェクトを使って特定の計算を含む配列を生成する方法を示します。
処理の流れ(知りたい方はクリックしてください)
①文字列から配列生成: 文字列 'hello!' から配列を生成します。Array.fromは各文字を個別の要素として新しい配列に格納します。
②配列の出力: 生成された配列 ['h', 'e', 'l', 'l', 'o', '!'] をコンソールに出力します。
③配列風オブジェクトから配列生成: {length: 5} オブジェクトを使って、長さが5の配列を生成します。第二引数に与えられた関数により、各要素に (index + 1) * 2 の計算を施します。
④計算結果の配列出力: 計算後の配列 [2, 4, 6, 8, 10] をコンソールに出力します。
const str = 'hello!'
const length = 5
const strArray = Array.from(str)
console.log(strArray); // ['h', 'e', 'l', 'l', 'o', '!']
const numberArray = Array.from({length: length}, (_, index) => (index + 1) * 2)
console.log(numberArray); // [2, 4, 6, 8, 10]
実践的な応用例
文字列の配列化による操作
文字列から配列を生成し、その配列を使用して各文字に対する操作を行うことができます。例として、各文字を大文字に変換する処理を行います。
const message = 'hello world';
const letters = Array.from(message);
const uppercaseLetters = letters.map(letter => letter.toUpperCase());
console.log(uppercaseLetters); // ['H', 'E', 'L', 'L', 'O', ' ', 'W', 'O', 'R', 'L', 'D']
配列風オブジェクトから配列生成
配列風オブジェクトを使って、特定の計算式に基づく配列を生成します。この方法は、数列や初期値設定に役立ちます。
const size = 10;
const initialValue = 0;
const sequence = Array.from({length: size}, (_, index) => initialValue + index);
console.log(sequence); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
まとめ
似たようなメゾットや処理
Array.ofメゾット
Discussion