こんにちは、フロントエンドエンジニアのザワです。
Are you hungry? 急に何だよ、と思われるのも当然です。
人の欲求というのは限りないものです。求めることは成長するために必要なことですが、求めすぎることは時に自分を必要以上に追い詰める刃になりかねません。ということでハードルは高くしすぎず、いつも通りマイペースに一歩ずつ進もうと思う今日この頃です。
さて、今回のArrayシリーズは、Array.prototype.fillです。こちらも名前からするに想像しやすいですよね。
「満たす」という意味を持つfillのことですから、配列を何かで満たすことなんだろうなとイメージできます。
さっそく自分の幸福度を満たすべく、fillメソッドを紐解いていきます。
※ ここからの説明は個人的に調べて解釈したざっくりとした説明になります。詳しく知りたい方はこちらへどうぞ
Array.prototype.fill()メソッドとは
構文の解釈としては次のように捉えています。
「配列をある値で満たす。開始位置から、終了位置まで」
fillメソッドの第一引数は、設定したい値を指定します。第二引数には開始位置、第三引数には終了位置を指定します。開始位置、終了位置はオプションなので必要なときに指定しましょう。
さっそく例文を取り上げながら何パターンか見ていきたいと思います。
実装例文
まずは第一引数のみ指定したパターンです。
See the Pen
Array.prototype.fill() sample1 by Zawa (@sowork)
on CodePen.
今回はある日の食事を題材にしていきたいと思います。
シンプルな三品ですが、お腹ペコペコで極端な性格の私は、メニューをすべてステーキに替えてしまいました。食べる前の気合いは一丁前ですが、食べたあとに胃の重さに後悔するパターンです。
後悔を教訓にして、主食の白米は残してほかのメニューをステーキに替えてみます。
See the Pen
Array.prototype.fill() sample2 by Zawa (@sowork)
on CodePen.
第二引数の開始位置を指定したことで、白米とステーキ二人前にすることができました。これでも食べ過ぎと感じたので、ステーキは一人前にしたいところです。
おかずのほうれん草のお浸しをステーキに替えてみます。
See the Pen
Array.prototype.fill() sample3 by Zawa (@sowork)
on CodePen.
第三引数の終了位置を指定したことで、おかずのほうれん草のお浸しをステーキに変更することができました。
これで程よく胃袋を満たせます。
勢いだけではやっていけない年齢になったのか、いやいやまだいける、という自問自答を繰り返す日々はまだまだ続きそうです。
終わりに
今回のfillメソッドは構文自体は理解しやすかったのですが、いろいろと自分を見つめ直す感慨深い勉強の機会となりました。
これからも地道にコツコツと技術を高めていけたらなと思います。
それでは良い制作ライフを！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
