HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
All web technology
Learn web development
Discover our tools
Get to know MDN better
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
View in English Always switch to English
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年9月.
Array.from() 静的メソッドは、反復可能オブジェクトや配列風オブジェクトからシャローコピーされた、新しい Array インスタンスを生成します。
Array.from()
Array
console.log(Array.from("foo")); // 予想される結果: Array ["f", "o", "o"] console.log(Array.from([1, 2, 3], (x) => x + x)); // 予想される結果: Array [2, 4, 6]
Array.from(items) Array.from(items, mapFn) Array.from(items, mapFn, thisArg)
items
配列に変換する反復可能オブジェクトまたは配列風オブジェクト。
mapFn
配列の各要素に対して呼び出す関数です。指定された場合、配列に追加されるすべての値は最初にこの関数に渡され、代わりに mapFn の返値が配列に追加されます。この関数は以下の引数で呼び出されます。
element
配列内で現在処理中の要素です。
index
配列内で現在処理中の要素のインデックスです。
thisArg
mapFn を実行する時に this として使用する値です。
this
新しい Array インスタンス。
Array.from() は、以下のものから Array を生成します。
Map
Set
length
反復可能オブジェクトでも配列風でもない普通のオブジェクトを配列に変換するには（プロパティのキー、値、またはその両方を列挙して） Object.keys()、Object.values()、Object.entries() のいずれかを使用してください。非同期反復可能オブジェクトを配列に変換するには、Array.fromAsync()を使用します。
Object.keys()
Object.values()
Object.entries()
Array.fromAsync()
Array.from() は疎配列を作成しません。 items オブジェクトのインデックスプロパティが欠けている場合、新しい配列では undefined になります。
undefined
Array.from() にはオプションで mapFn という引数があり、 map() と同様に、作成する配列のそれぞれの要素に対して関数を実行することができます。より明確には、Array.from(obj, mapFn, thisArg) は Array.from(obj).map(mapFn, thisArg) と同じ結果を保有します。ただし、Array.from(obj).map(mapFn, thisArg) は中間配列を作成せず、mapFn は配列全体を持たずに 2 つの引数 (element, index) を受け取るだけです。
map()
Array.from(obj, mapFn, thisArg)
Array.from(obj).map(mapFn, thisArg)
メモ: この動作は型付き配列にとってより重要です。なぜなら、中間の配列は適切な型を入力するために必然的に値が切り捨てられるからです。 Array.from() は TypedArray.from() と同じシグネチャを持つために実装します。
TypedArray.from()
Array.from() メソッドは汎用ファクトリーメソッドです。例えば、 Array のサブクラスが from() メソッドを継承した場合、継承した from() メソッドは Array インスタンスではなく、サブクラスの新しいインスタンスを返します。実際には、新しい配列の長さを表す単一の引数を受け入れるコンストラクター関数を this 値として指定することができます。反復可能オブジェクトが items として渡された場合、コンストラクターは引数なしで呼び出されます。配列風のオブジェクトが渡された場合、コンストラクターは配列風オブジェクトの正規化された長さで呼び出されます。最終的な length は反復処理が完了したときに再び設定されます。もし this の値がコンストラクター関数でない場合、代わりにプレーンな Array コンストラクターが使用されます。
from()
Array.from("foo"); // [ "f", "o", "o" ]
const set = new Set(["foo", "bar", "baz", "foo"]); Array.from(set); // [ "foo", "bar", "baz" ]
const map = new Map([ [1, 2], [2, 4], [4, 8], ]); Array.from(map); // [[1, 2], [2, 4], [4, 8]] const mapper = new Map([ ["1", "a"], ["2", "b"], ]); Array.from(mapper.values()); // ['a', 'b']; Array.from(mapper.keys()); // ['1', '2'];
// DOM 要素のプロパティに基づく配列を作成します。 const images = document.querySelectorAll("img"); const sources = Array.from(images, (image) => image.src); const insecureSources = sources.filter((link) => link.startsWith("http://"));
function f() { return Array.from(arguments); } f(1, 2, 3); // [ 1, 2, 3 ]
// 要素を操作するためのマップ関数として // アロー関数を使用 Array.from([1, 2, 3], (x) => x + x); // [2, 4, 6] // 連番の生成 // 配列はそれぞれの場所が `undefined` で初期化されるため、 // 以下の `v` の値は `undefined` になる Array.from({ length: 5 }, (v, i) => i); // [0, 1, 2, 3, 4]
// 連番の生成関数（Python や Clojure などでよく "range" と呼ばれる） const range = (start, stop, step) => Array.from( { length: Math.ceil((stop - start) / step) }, (_, i) => start + i * step, ); // 0 （を含む）から 5 （を含まない）までの数値の列を生成し、1 ずつ増加させる range(0, 5, 1); // [0, 1, 2, 3, 4] // 1 （を含む） 10 （を含まない）までの数値の列を生成し、2 ずつ増加させる range(1, 10, 2); // [1, 3, 5, 7, 9] // ラテンアルファベットを、アルファベット順の列として生成する range("A".charCodeAt(0), "Z".charCodeAt(0) + 1, 1).map((x) => String.fromCharCode(x), ); // ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
from() メソッドは、新しい配列の長さを表す単一の引数を受け入れるコンストラクター関数で呼び出すことができます。
function NotArray(len) { console.log("NotArray called with length", len); } // 反復可能 console.log(Array.from.call(NotArray, new Set(["foo", "bar", "baz"]))); // NotArray を length が undefined のままで呼び出し // NotArray { '0': 'foo', '1': 'bar', '2': 'baz', length: 3 } // 配列風 console.log(Array.from.call(NotArray, { length: 1, 0: "foo" })); // NotArray called with length 1 // NotArray { '0': 'foo', length: 1 }
this の値がコンストラクターでない場合は、プレーンな Array オブジェクトを返します。
console.log(Array.from.call({}, { length: 1, 0: "foo" })); // [ 'foo' ]
Enable JavaScript to view this browser compatibility table.
Array.from
core-js
Array()
Array.of()
Array.prototype.map()