魔法JS☆あれい 第4話「fillも、spliceも、copyWithinもあるんだよ」

登場人物

丹生（にゅう）あれい
魔法少女「魔法（マジカル）JS（女子小学生）☆あれい」として活動中。

イテレー太
正体不明の魔法生物。

• 第1話「popでpushした、ような……」
• 第2話「shiftはとってもunshiftって」
• 第3話「もうsortもreverseも怖くない」

fill()

イテレー太「さて、魔法生物である僕が魔法世界から召喚したデータを、魔法少女であるあれいの配列魔法を使って、敵の弱点に合わせた値に変換してreturnする事でダメージを与えて敵を倒す、という設定でやってる戦闘の真っ最中だよ！」
あれい「どれだけ説明的なんだよこの駄犬」
イ「さて、今回僕が魔法世界から召喚したデータは……ああっ！　しまった！」
あ「どうした駄犬」
イ「うっかりして、女子小学生に見せたら確実にお縄になるデータを召喚しちゃったよ！」

items = ['自', '主', '規', '制'];

あ「何やらかしてんだよポンコツ」
イ「どうしよう！　全国の健全な青少年に深刻な悪影響を与えちゃうよ！」
あ「まずは目の前の子供への悪影響を心配しろよ」
イ「お願い！　あれいの配列魔法で、当たり障りのないデータに変換してよ！」
あ「女子小学生に尻拭いさせるんじゃねえ」
イ「頼むよ！　正体不明の魔法生物なのに警察のご厄介になっちゃうよ！」
あ「面倒くせえなあ……」

return items.fill('■');
// ['■', '■', '■', '■']

イ「良かった！　女子小学生に見せられないデータが全部黒塗りになったよ！　助かった！」
あ「捕まったら目の部分を黒塗りしてやるよ」

解説

fill() メソッドは、配列中の開始位置から終了位置までの要素を固定値で設定します。その際、終了位置は含まれません。

（[MDN]https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/fillより）

「fill」とは「満たす」「埋める」というような意味です。
このメソッドは、「値、開始位置、終了位置」という3つの引数を指定できます。1番目の引数で指定した値で、配列の要素を満たすように置き換えます。また、開始位置を指定した場合は開始位置から配列の末尾まで、終了位置も指定した場合は開始位置から終了位置までを置き換えます。
いずれの場合も、配列の要素数が変化することはありません。

splice()

イ「さあ、気を取り直して、次の敵だよ！」
あ「まだ何とも戦ってねえよ」
イ「今回僕が魔法世界から召喚したデータは、これだ！」

items = ['ち', 'ゃ', 'ん', 'こ'];

イ「そして、今回の敵の弱点は、『2番目の要素』だよ！　さあ、あれい、2番目の要素をreturnして……あああっ！！」
あ「今度は何だよ」
イ「大変だ！　2番目の要素を取り除いたら、とても卑猥な言葉が残っちゃうよ！」
あ「お前絶対ワザとだろ」
イ「頼むよあれい！　取り除いた後の要素を、何か健全な言葉に置き換えておいてよ！」
あ「面倒くせえなあ……」

return items.splice(1, 1, "○");
// ["ゃ"]
console.log(items);
// ["ち", "○", "ん", "こ"]

イ「なんだか、余計にイヤらしくなった気がするよ」
あ「うるせえよ」

解説

splice() メソッドは、 (in place で) 既存の要素を取り除いたり、置き換えたり、新しい要素を追加したりすることで、配列の内容を変更します。

（MDNより）

「splice」とは、「継ぎ合わせる」「接合する」というような意味があるそうです。配列の要素を足したり引いたりして、新しい配列として継ぎ合わせる……といったイメージでしょうか。なんだか盆栽みたいです。
このメソッドは「開始位置、取り除く要素の数、追加する要素1、追加する要素2…」という引数を指定できます。この引数によって、要素の数を変動させることができます。
また、戻り値は「取り除かれた要素」になります。

copyWithin()

イ「さて、数々の試練を乗り越えたところで、今日最後の敵だよ！」
あ「全部お前が自分で蒔いた種だけどな」
イ「今回僕が魔法世界から召喚したデータは、これだ！」

items = ['ち', 'ん', 'あ', 'つ'];

あ「すでに嫌な予感しかしないぞ」
イ「さあ、あれい、1番目と2番目の要素を、3番目と4番目の要素に上書きして、敵に見せつけてやってよ！」
あ「お前ついに本性フルオープンだな。そろそろ利用規約の第8条に抵触するぞ」
イ「さ、さあ、あれい！　は、早く！！」
あ「何興奮してんだよド変態が」

return items.copyWithin(0, 2, 4);
// ["あ", "つ", "あ", "つ"]

イ「あ、あれ？　注文と違うよ？　熱々の鍋が召喚されたよ？」
あ「これはお前にぶつけるからいいんだよ」
イ「ギャーーー！！！」

解説

copyWithin() メソッドは、サイズを変更せずに、配列の一部を同じ配列内の別の場所にシャローコピーして返します。

（MDNより）

「within」とは「…の範囲内で」「……を越えずに」という意味です。その名の通り、配列内の要素を、要素の数が変わらない範囲でコピー・ペーストし、変更後の配列を返すメソッドです。
このメソッドは、「ペーストの開始位置、コピーの開始位置、コピーの終了位置」という引数を指定できます。コピーの終了位置を指定しない場合はコピーの開始位置から末尾までの要素、コピーの開始位置も指定しなかった場合はすべての要素がコピーされます。ペーストされた際、配列の要素数を超えた分は切り捨てられます。

次回予告

連結しちゃってますね、私。
これからも配列の要素は、この魔法メソッドjoinちゃんがガンガン連結しまくっちゃいますからね！

第5話 joinなんて、concatなわけない

※第1部「ミューテーター・メソッド編」完結です。次回からは、第2部「アクセサ・メソッド編」がスタートします。