Q&A
「仮引数」の対語は「実引数」です。
前提・実現したいこと
下記コードのeditElementメソッドについてです。
var newInputs = inputs.map(editElement)でfunction editElement(element) を呼んでいますが、
editElementメソッドの仮引数elementに対する本引数はどこにあるのでしょうか？
どういう時に引数を書かずにメソッドを記載して良いのでしょうか？
発生している問題・エラーメッセージ
仮引数elementに対応する本引数が無い。
var newInputs = inputs.map(editElement)がどうやってeditElementメソッドに
引数をわたしているのかが分からない。
function editElement(element) を呼んでいますが、
editElementメソッドの仮引数elementに対する本引数はどこにあるのでしょうか？
また、どういう時に引数を書かずにメソッドを記載して良いのでしょうか？
該当のソースコード
JavaScript
1var fruits = ['apple', 'apricot', 'avocado', 'blueberry', 'cherry', 'coconut', 'cranberry', 'dragonfruit', 'durian', 'grape', 'grapefruit', 'guava', 'kiwi fruit', 'lemon', 'lime', 'lychee', 'mango', 'melon', 'watermelon', 'miracle fruit', 'orange', 'bloodorange','clementine','mandarine','tangerine','papaya','passionfruit','peach','pear','persimmon','physalis','plum/prune','pineapple','pomegranate','raspberry','rambutan','star fruit','strawberry']; 2 3$(function() { 4 var list = $("#list"); 5 6 function appendList(word) { 7 var item = $('<li class="list">').append(word); 8 list.append(item); 9 } 10 11 **function editElement(element) {** 12 var result = "^" + element; 13 return result; 14 } 15 16 $("#submit").on("click", function() { 17 var input = $("#keyword").val(); 18 var inputs = input.split(" "); 19 var newInputs = inputs.map(**editElement**); 20 var reg = RegExp(newInputs.join("|")); 21 22 $(".list").remove(); 23 24 $.each(fruits, function(i, fruit) { 25 if (fruit.match(reg)) { 26 appendList(fruit); 27 } 28 }); 29 30 if ($(".list").length === 0) { 31 appendList("一致する果物はありませんでした"); 32 } 33 }); 34}); 35
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8" /> 5 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 6 <script src="main.js"></script> 7 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 8 <link rel="stylesheet" type="text/css" href="style.css"> 9 </head> 10 <body> 11 <div class="form-group"> 12 <input type='text' id="keyword" class="form-control" placeholder="好きなフルーツを入力してください"> 13 <button type="button" id="submit" class="btn">検索</button> 14 </div> 15 <ul id="list"></p> 16 </body> 17</html>
試したこと
var newInputs = inputs.map(editElement)を
var newInputs = inputs.map(function(element)と書き換えたらうまくいった。
どうぞ宜しくお願い致します。
回答2件
0
javascript
1var callback=(...x)=>{console.log(x);return x[0]*100;}; 2var a=[1,2,3]; 3var b= a.map(callback); 4console.log(b);
mapはコールバックに対して強制的に3つの引数を渡します
- １つ目がカレントの値
- ２つ目がカレントのインデックス
- ３つ目がその配列自身
コールバック側でスキなように加工して戻り値を戻せばそれが新たな配列になります
投稿2019/07/04 00:30
編集2019/07/04 00:32
総合スコア114829
0
var newInputs = inputs.map(editElement)でfunction editElement(element)を呼んでいますが、
それは、呼んでいません。
呼んでいるのはinputs.mapです。editElementは引数です。
editElementメソッドの仮引数elementに対する本引数はどこにあるのでしょうか？
おそらく、inputs.mapの中で与えられていると思います。
「コールバック関数」や「高階関数」でググってみてください。
追記
失礼しました。inputsはArrayなのですね。
では、こちらをご参照ください。
Array.prototype.map() - JavaScript | MDN
Array.prototype.map()は第1引数に関数オブジェクトを取り、その関数オブジェクトをArrayの要素をひとつづつ引数として与え繰り返し呼び出します。
なので、「本引数はどこにあるのでしょうか？」の答えはやはり、「inputs.mapの中で与えられている」です。
投稿2019/07/03 11:03
編集2019/07/03 11:11
総合スコア36104
あなたの回答
tips
プレビュー
