HTML・配列・オブジェクトの要素に処理をして配列を返すjQueryのmapメソッド
30 回閲覧されました
みなさんこんにちは、jonioです。
今回はjQueryのmapメソッドのメモになります。
mapメソッドとは
HTML・配列・オブジェクトに何らかの処理をして配列にして返すメソッドです。
基本の形
HTMLの場合は下記になります。
HTML.map(function(index, element) {
return 処理
})配列の場合は下記になります。
$.map(array, function(value, index) {
return 処理;
});オブジェクトの場合は下記になります。
$.map(obj, function(value, index) {
return 処理;
});indexは要素に対するインデックス番号でelement・valueは要素の1つ1つになります。
HTML・配列・オブジェクトの場合をそれぞれ見ていきます。
HTMLの場合
HTMLを下記とします。
<p>HTML1</p>
<p>HTML2</p>
<p>HTML3</p>mapメソッドを適用します。
const result = $('p').map(function(index, element) {
return index + ':' + element.innerHTML;
});出力結果は「[“0:HTML1”, “1:HTML2”, “2:HTML3”]」です。
配列の場合
配列を下記とします。
const array = ['リンゴ', 'バナナ', 'イチゴ', 'メロン'];mapメソッドを適用します。
const result = $.map(array, function(value, index) {
return value + 'です';
});出力結果は「[“リンゴです”, “バナナです”, “イチゴです”, “メロンです”]」です。
オブジェクトの場合
オブジェクトを下記とします。
const obj = {name: 'あべいさぢ', age: 30, area: 'Tokyo'};mapメソッドを適用します。
const result = $.map(obj, function(value, index) {
return value;
});出力結果は「[“あべいさぢ”, “30”, “Tokyo”]」です。
オブジェクトの場合はvalueを配列の要素にします。