2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

mapメソッドについて 自分用メモ javascript

Last updated at Posted at 2019-08-02

#この記事について
プログラミング学習中に悩んだ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配列のひとつずつの要素にあたり
その要素、ひとつずつに"^"を連結していることになる。

よって今回の問題で行うべき、複数の入力された値に対して
前方一致の条件を追加していることになることが分かった。

2
1
1

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
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?