• JavaScript

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で異なる配列を同じ関数に渡して処理を使い回す方法について紹介しました。

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