魔法JS☆あれい 第7話「includesのsliceと向き合えますか？」

登場人物

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

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

第1部「ミューテーター・メソッド編」
* 第1話「popでpushした、ような……」
* 第2話「shiftはとってもunshiftって」
* 第3話「もうsortもreverseも怖くない」
* 第4話「fillも、spliceも、copyWithinもあるんだよ」

第2部「アクセサ・メソッド編」
* 第5話「joinなんて、concatなわけない」
* 第6話「indexOfなの絶対lastIndexOf」

includes()

イテレー太「さあ、惰性で戦いを続けるよ！」
あれい「堂々と言うんじゃねえよこの駄犬」
イ「さて、今回僕が魔法世界から召喚したデータは……これだ！」

items = [
  'ウォ一タ一', 'ワォ一リ一', 'ウォ一リ一',
  'ウォ一ソ一', 'ウォ一リ一', 'ウ才一リ一',
  'ウォ一リ一', 'チャ一リ一', 'チャ一ハン'
];

あ「前回と一緒じゃねえか。どれだけ引っ張るんだこのネタ」
イ「……果たして、本当にそうかな？」
あ「何だと」
イ「じゃあ、この配列の中に、『ウォーリー』という文字列があるかどうかを判定して、trueかfalseのいずれかの値をreturnして敵を倒してよ！」
あ「面倒くせえなあ……」

return items.includes('ウォーリー');
// false

あ「ねえのかよ」
イ「伸ばし棒（ー）に見える文字は全部漢数字の一だよ！」
あ「どれだけ手の混んだ嫌がらせだよ」

解説

includes() メソッドは、特定の要素が配列に含まれているかどうかを true または false で返します。与えられた要素が見つかるかどうかを計算するために、 SameValueZero (ゼロの同値) アルゴリズムを使用します。

（MDNより）

includes() メソッドは、ECMAScript 2016から追加された新しいメソッドです。「検索する値、開始位置」という引数を指定でき、指定した値が配列に含まれていればtrue、含まれていなければfalseを返します。また、開始位置を指定した場合は、その位置以降の要素のみを検索対象にします。

slice()

イ「じゃあ、次に魔法世界から召喚したデータは……これだよ！」

items = [
  'ウォーリー', 'ウォーリー', 'ウォーリー',
  'ウォーリー', 'ウォーリー', 'ウォーリー',
  'ウォーリー', 'ウォーリー', 'ウォーリー'
];

あ「もう全部ウォーリーじゃねえか」
イ「この中から、3番目、4番目、5番目のウォーリーだけを取り出して、それをreturnして敵を倒してよ！」
あ「他のウォーリーとそのウォーリーは何が違うんだよ」
イ「さあ、急いで！」
あ「面倒くせえなあ……」

return items.slice(2, 5);
// ['ウォーリー', 'ウォーリー', 'ウォーリー']

イ「やったね、あれい！　効いてるよ！」
あ「敵もよく判別がつくな」

解説

slice() メソッドは begin から end まで選択された配列の一部をシャローコピーして、新しい配列オブジェクトを返します (end は含まれません)。元の配列は変更されません。

（MDNより）

このメソッドは「開始位置、終了位置」という引数を指定できます。しかし、実際に返される値は「開始位置の要素」から「終了位置の直前の要素」であることに注意してください。また、終了位置を指定しない場合は配列の末尾までの要素が、開始位置も指定しない場合はすべての要素が返ります。
この特徴を利用して、引数を指定しないことで、配列をコピーして新しい配列を作成する、という用途にも使用できます。

次回予告

findとは違うメソッドになる、私はそう決めたんだ。
戻り値に要素なんていらない。
私だけは絶対にインデックス以外のものを返したりしない。

第8話 filterって、ほんとfindとfindIndex

※第2部「アクセサ・メソッド編」完結です。次回からは、第3部「イテレーション・メソッド編」がスタートします。