#この記事について
プログラミング学習中に悩んだmapメソッドについて
自分なりに納得したので、忘れないようにメモを残して置こうと思う。
なので具体的なmapメソッドの使いかたは書いていません。
あくまで自分用のメモです。
##悩んだ問題
javascriptの複数検索ができるようにする問題で
mapの引数で呼び出している関数の書き方について
var list = $("#list");
function appendList(word) {
var item = $('<li class="list">').append(word);
list.append(item);
}
//↓ここ
function editElement(element) {
var result = "^" + element;
return result;
}
$("#submit").on("click", function() {
var input = $("#keyword").val();
var inputs = input.split(" ");
var newInputs = inputs.map(editElement);//←ここ
var reg = RegExp(newInputs.join("|"));
$(".list").remove();
$.each(fruits, function(i, fruit) {
if (fruit.match(reg)) {
appendList(fruit);
}
});
if ($(".list").length === 0) {
appendList("一致する果物はありませんでした");
}
});
##悩んだ理由
関数のeditElementは引数として(element)を持っているので、呼び出し元のmapの引数でもeditElementに引数を持たせる必要がある。なのにmapの引数ではeditElementに引数を持たせていない。
そう考えていたため、上記の書き方がなぜ正しいのか分からなかった。
##解決
そこでmapメソッドについて調べたところ
mapの構文は以下のようになる。
var array = [ 配列データ ];
array.map( コールバック関数(function( value )) );
つまり今回の問題でいうと
function editElement(element)がコールバック関数
に該当し、elementはvalueを指すことになる。
そのためelementはinputs配列のひとつずつの要素にあたり
その要素、ひとつずつに"^"を連結していることになる。
よって今回の問題で行うべき、複数の入力された値に対して
前方一致の条件を追加していることになることが分かった。