LoginSignup
0
0

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-03-21

登場人物

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

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

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

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

includes()

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

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

あ「前回と一緒じゃねえか。どれだけ引っ張るんだこのネタ」
イ「……果たして、本当にそうかな?」
あ「何だと」
イ「じゃあ、この配列の中に、『ウォーリー』という文字列があるかどうかを判定して、truefalseのいずれかの値を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部「イテレーション・メソッド編」がスタートします。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0