こんにちは。フロントエンドエンジニアのザワです。肌寒くなってきたきましたが、いかがお過ごしでしょうか。
さて、普段からJavaScriptを触っていながら、配列についてはぜんぜん知らないなと思った今日この頃、あらためて配列を知っていこうと思い立ったわけです。JavaScriptの配列にまつわるメソッドはたくさんあるので、気が向いたときに少しずつシリーズにしてお送りしていく予定です。
ここでは、言語仕様に関する詳しい説明はしません。広く浅く、なにをするメソッドなのか、実際に使う場面になったときに思い出せる引き出しを増やす目的でやっていきます。
今回はArray.fromメソッドを見ていきます。では早速いってみましょう！
※ここからの説明は個人的に調べて解釈したざっくりとした説明になります。詳しく知りたい方はこちらへどうぞ！
Array.fromメソッドとは
Array.fromメソッドとは、「array-likeオブジェクト」や「iterableオブジェクト」から配列を作るメソッドです。
ん？ array-likeオブジェクト？ iterableオブジェクトってなんだろう？
先にこの2つを探ってみたいと思います。
array-likeオブジェクト
配列といえば、0からはじまる添字を持っています。添字を持っている、lengthプロパティも参照できる、ただし、配列が持つほかのメソッドは使えないのがarray-likeオブジェクトです。
たとえば、関数に渡された引数を持つローカルオブジェクトであるargumentsオブジェクトがそれにあたります。
const obj = returnArg(1,2,3);
console.log(obj.join('')); //エラーが起こる
function returnArg(){
return arguments;
}iterableオブジェクト
iterableオブジェクトとは、iteratorメソッドを持つオブジェクトです。
iteratorメソッドについて掘っていくと、長くなりそうなので、ここでは、下記のようにtypeof演算子で調べるとfunctionが返ってくるものとします。
const str = 'abcd';
console.log(typeof str[Symbol.iterator]);文字列を例として挙げましたが、ほかのiterableオブジェクトについてはこちらを参照してください。
Array.fromメソッドを使ってみる
さて、本題に戻りましょう。前述したargumentsオブジェクト、文字列をArray.fromに渡した結果を見てみます。
const obj = returnArg(1,2,3);
console.log(Array.from(obj)); //結果は、[1,2,3]
function returnArg(){
return arguments;
}配列が返ってきました。argumentsオブジェクトのままではjoinメソッドを使ったときにエラーが返ってきていました。配列に変換したいま、あらためて使ってみましょう。
const obj = returnArg(1,2,3);
const arr = Array.from(obj);
console.log(arr.join('')); //結果は、123
function returnArg(){
return arguments;
}joinされましたね。素晴らしい。
次に、文字列を配列に変換してみましょう。
const str = 'abcd';
console.log(Array.from(str)); //結果は、["a", "b", "c", "d"]配列に変換されました。気持ちいいですね。
おわりに
言語仕様に苦手意識を持つ私にとって、この連載ははっきりいって苦行です。
得意なことを伸ばした方が良いという話も聞きますが、苦手なことがちょっぴり得意になれば世界が広がるかもしれません。急に得意になることは難しいかもしれませんが、少しずつ自分の武器を増やして戦えるフロントエンドを目指しましょう！ それでは、良い制作ライフを！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
