【広告 No.01】

2015年4月15日水曜日

【Javascript】Array.forEach()やArray.filter()のコールバック内で別配列の値や変数を使いたい

そもそもfor文(もしくはwhile文)で記述すればいいことですが、forEach()やfilter()を使った場合、コールバック内では別配列の値や変数がスコープの関係で参照できないということもあり、どうすればいいのかと悩んだ経緯があるのでそのロジックをメモしておきます。

【実現したいこと】

配列a[]、b[]があり、a[]の任意の値を使ってb[]を絞り込み、新たな配列c[]を生成したい。




フィルタリング値が固定なら容易な課題です。
var c = b.filter(function(v){
   return (v == '値');
});

しかし、汎用的に利用したい場合、固定値は極力避けたいわけですよ。「値」が変動する場合や任意のタイミングで変更したい場合などはどうすればいいの、となったわけですね。もちろん、その「値」はスコープの外で設定されたり変化したりします。

ま、そこで単純に考えたわけです。スコープの外にあるなら内側に入れればいいって。

var a = ['1','A','B','4','c'];
var b = ['a','A','b','4','C'];
b.unshift(a);
var c = b.filter(function(v,i,array){
   return (i > 0 && v == array[0][i-1]);
});
//['A','4']

あまりにもシンプルですが、3行目は別にpush()で末尾に追加しても、やろうとしていることは同じです。コールバック側では値、インデックス値、元配列を引数として利用できますので、元配列に追加して、追加した部分に対してフィルタリングやループ処理しましょう、というものです。

この方法は、その他の配列操作用の関数で利用できます。追加する値は、変数はもちろん、多次元配列やオブジェクトなど、配列で扱えるものなら利用可能で、複数設定も可能です。

以上、「Array.forEach()やArray.filter()のコールバック内で別配列の値や変数を使いたい」時のロジック例でした。

【参考サイト】