jQueryでの.map()の使い方を書いていきます。
HTMLから取得したデータで配列を作りたいと思って調べると、.map()というメソッドが出てきました。
結果、無事に思ったような配列が作れたので、備忘録として残しておきます。
実務では、作った配列を再度HTML要素内に出力する必要があったので、作成した配列を出力する方法も書いておきます。
.map()メソッドとは。
.map()は、HTML要素や配列・オブジェクトに繰り返し処理を実行して、新たに作成した配列を返してくれます。
例えば、以下のようなHTML要素があるとします。
<input class="text" value="テキストA">
<input class="text" value="テキストB">
<input class="text" value="テキストC">上記の要素に対して、.map()を使って配列を作ってみます。
let array = $('.text').map(function(index, el) {
return el.value;
});
console.log(array);inputタグに特に意味はありません！
私が実務で使用したときに、たまたまinputタグだっただけです。
pタグなどでも構いません。
出力内容は、以下の通りです。
//コンソール
[テキストA,テキストB,テキストC]上記のように「該当のタグから」指定した要素を取得して、新しい配列として返してくれます。
取得した配列は、テキストとして変換してHTML要素の中に出力したりなど、配列を利用してさまざまなことが行えます。
私は、実務で以下のように.gat()を使用して、inputタグのvalueの値に出力して使いました。
HTML
//取得元
<input class="text" value="テキストA">
<input class="text" value="テキストB">
<input class="text" value="テキストC">
//出力先
<input class="all_text" value="">jQery
let array = $('.text').map(function(index, el) {
return el.value;
}).get();
$('.all_text').val(array);ここで、調べていて疑問に思ったのが、.get()も配列を作って返してくれます。
つまり、やってくれることは.map()と同じです。
ただ、上記の記述の場合、.get()をつけないと、inputタグのvalueへ出力することができませんでした。
生成される配列の種類が違うのか、それともメソッド自体の問題なのか、また調べて記事にしたいと思います。
.map()の構文
前置きが長くなりましたが、以下が.map()の構文です。
$('HTML要素').map(function(index, element) {
return （実行したい処理）
});indexでindex番号を、elementでHTML要素を取得できます。
returnで処理した値を返してあげることで、配列として取得することができます。
さきほど、以下の処理で配列として出力できたのは、returnで返してあげたからです。
let array = $('.text').map(function(index, el) {
return el.value;
});
console.log(array);＄.map()で配列やオブジェクトに対して処理を行う。
実務で使いませんでしたが、調べていたら出てきたので書いておきます。
$.map()は、既にある配列に対して、なにかしら手を加えたい場合に使います。
＄.map()の構文
まずは、構文をみてみましょう。
$.map(配列もしくは、オブジェクト, function(value, index) {
return （実行したい処理）
});以上が、構文です。
対象としたい配列を第一引数に指定します。
//配列を定義
let array = [テキストA,テキストB,テキストC];
//第一引数に配列を指定。
$.map(array, function(value, index) {
return （実行したい処理）
});配列を定義して、第一引数に指定したら、実行したい処理を書いて、returnで返してあげます。
let result = $.map(array, function(value, index) {
return '処理した' + value + 'です！'
});
console.log(result);上記とすることで、以下のように配列に手を加えることができます。
[処理したテキストAです！,処理したテキストBです！,処理したテキストCです！].map()と同じでreturnするのを忘れないようにしてください！