[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
ただいまコメントを受けつけておりません。
each 関数を使った計算の関数や検索の関数で期待した結果が返ってこない時の対処法。
each 関数が呼び出す callback 関数が返す値は、外側のスコープの関数 (その each 関数を呼んでいる関数) の返り値にはならない。そのため、each 関数を使った計算の関数や検索の関数で期待した結果が返ってこない、ということになってしまうことがある。
下記のコードを実行した際、 console には決められた条件の文字列が表示されることが期待される。しかし、実行すると undefined が返る。
// ＜Sample Code＞
/**
* 文字列の配列を受け取り、最初に見つかった長さが5である要素を返す
* @param {Array.<string>} array 検索対象の配列
* @return {string|undefined} 引数の中で最初に見つかった長さ5の要素 見つからなければ undefined
*/
var getLengthFive = function(array) {
array.forEach(function(v, i) {
if(v.length === 5) {
return v;
}
});
};
console.log(getLengthFive(["abc","de","abcde","ab"]));
上記間違った例10行目の return はどの関数の return だろうか。
return は forEach の引数となる関数 (下記例では isLengthFive) のものであり、
外側の関数 (getLengthFive) のものではない。
そのため、 getLengthFive は何も返すことなく終了する。
// ＜Sample Code＞
/**
* 文字列を受け取り、長さが5であれば引数を返す。そうでなければ undefined を返す
* @param {string} array 確認対象の文字列
* @return {string|undefined} 引数の中で最初に見つかった長さ5の要素 見つからなければ undefined
*/
var isLengthFive = function(v, i) {
if(v.length === 5) {
return v;
}
}
/**
* 文字列の配列を受け取り、最初に見つかった長さが5である要素を返す
* @param {Array.<string>} array 検索対象の配列
* @return {string|undefined} 引数の中で最初に見つかった長さ5の要素 見つからなければ undefined
*/
var getLengthFive = function(array) {
array.forEach(isLengthFive);
};
each 関数の利用をあきらめ、 for 文の内側でチェックを行う方法。この場合、 return は getLengthFive 関数の return として機能する。
そのため、 getLengthFive 関数は条件にマッチした文字列を返すことができる。
// ＜Sample Code＞
/**
* 文字列の配列を受け取り、最初に見つかった長さが5である要素を返す
* @param {Array.<string>} array 検索対象の配列
* @return {string|undefined} 引数の中で最初に見つかった長さ5の要素 見つからなければ undefined
*/
var getLengthFive = function(array) {
for(var i = 0; i < array.length; i++) {
if(array[i].length === 5) {
return array[i];
}
}
};
console.log(getLengthFive(["abc","de","abcde","ab"]));
Array の find 関数を使用する方法が好ましい。
しかしながら、find 関数が使えないブラウザも現時点では多い。
そのため代替手段として解決策１を使うのは手段の一つである。
// ＜Sample Code＞
/**
* 文字列の配列を受け取り、最初に見つかった長さが5である要素を返す
* @param {Array.<string>} array 検索対象の配列
* @return {string|undefined} 引数の中で最初に見つかった長さ5の要素 見つからなければ undefined
*/
var getLengthFive = function(array) {
return array.find(function(v, i) {
return v.length === 5;
});
};
forEach と find についての詳細は以下を参照。
ただいまコメントを受けつけておりません。