Firefox 32 で Array.from が実装された

Firefox ECMAScript

Array-like な値をArrayに変換するメソッドです。

引数は

  1. arrayLike: Array-likeなオブジェクト
  2. mapfn:(Optional) Array.prototype.map に渡すような function
  3. thisArg:(Optional) 同上

Array-likeなオブジェクトとは以下の様なもの

  • @@iteratorのイテレータを持つもの
  • lengthプロパティを持つもの

lengthプロパティを持つものより、@@iteratorの方が優先度が高いので注意

使用例

思いつくものをテキトウに

HTMLCollection, NodeList に対して、forEach, map, filter 等の適用

jQueryとやらがあるから別に…と思われそうだけど。

// fooClassの要素のタグ名を抽出
var tagNames = Array.from(document.querySelectorAll(".fooClass"), node => node.localName);
// 普通にmapを使っても良い
var tagNames = Array.from(document.querySelectorAll(".fooClass")).map(node => node.localName);

// 属性を付けてみたり
Array.from(document.querySelectorAll(".fooClass")).forEach(node => node.setAttribute("hidden", "true"))
文字列生成

forEach, map, filter は Sparse-Array（lengthのみを持つArray, Array(10) とかか生成されたArrayのこと）との相性が悪かったが、Array.fromを使用するとindex値の方は与えられるので以下の様なことも。

Array.from(Array(26), (v, i) => String.fromCharCode(i + 97)).join(""); // => "abc....xyz"

ま、ArrayComprehensionを使うともう少し短くかけるんだけどね。

[for (i of Array(26).keys()) String.fromCharCode(i + 97)].join("")
文字列分割

Array-likeなオブジェクトと言ってきたけど、文字列も行ける

var charList = Array.from("abcd");

文字列も@@iteratorを持つので、イテレータが使用され、サロゲートペアにも対応することになる。その分、"str".split("")より良いと思われる。