Written by Kasumi

JavaScriptで異なる配列を同じ関数に渡して処理を使い回す方法【applyメソッドが便利】

異なる配列を同じ関数に渡して処理を使い回したい。

本記事ではこのような悩みを解決。

実装例を元に解説します。

実装例

See the Pen
JavaScript 異なる配列を関数に渡して使い回す方法
by Kohei (@kouk05)
on CodePen.0

異なる配列を同じ関数に渡して処理を使い回す実装例です。

異なる配列groupA、groupBを用意。

HTML要素に、配列要素を全て出力する関数fnを用意。

上記処理を使い回して対象となる配列・HTML要素に対し関数を実行してます。

詳細は以下の通りです。

applyメソッドを使って関数を使い回す

// 配列
const arrayA = ["佐藤","鈴木","高橋"];
const arrayB = ["田中","伊藤","渡辺"];

// 使い回す関数
const fn = function () {
  for(let i = 0; i < arguments.length; i++) {
    let li = document.createElement("tr");
    li.innerHTML = arguments[i];
    this.appendChild(li);
  }
}

// 対象
const dataA = document.querySelector('.group01');
const dataB = document.querySelector('.group02');

// 関数実行
fn.apply(dataA,arrayA);
fn.apply(dataB,arrayB);

異なる配列を同じ関数に渡して処理を使い回すコード例です。

applyメソッドを使います。

使い方は以下の通りです。

使い回す関数.apply(関数処理の対象,関数で使う配列);

関数の実行時にapplyメソッドを連結。

applyメソッドの第一引数に関数処理の対象となる要素(関数のthis値)。

第二引数に関数で使う配列を指定。

以上で実装完了です。

まとめ

JavaScriptで異なる配列を同じ関数に渡して処理を使い回す方法について紹介しました。

以上で解説を終わります。

目次

関連記事

JavaScript

【JavaScript】fetchメソッドを使ってJSONを非同期で読み込み・HTMLに出力する方法

2023.01.02
3837
JavaScript

【JavaScript初心者向け】繰り返し処理を使い、配列要素を展開する方法

2022.08.24
560
JavaScript

【簡単】JavaScriptを使って任意の文字列を置換する方法

更新日:2022.09.09
750
JavaScript

Swiperでスライドの幅を固定・中央寄せにする方法

2023.10.04
1033