【JavaScript】スプレッド構文とmapを使ってみる

  • このエントリーをはてなブックマークに追加

配列namesに格納した文字列の中で最長の文字列を求める
Math.maxとmapメソッドとスプレット構文を使用したが、このときmapメソッドにより新しく生成された配列は使用されないため、forEachを使用する方が良い気がする。
スプレット構文とmapを使用するパターンはあまりよくないパターンかもしれない。
やっぱり、このとき無駄な配列を生成しているからダメなコード例だな。


const names = ['url', 'scheme', 'slash', 'host', 'port', 'path', 'query', 'hash'];
//この場合、mapメソッドで新しく生成した配列を使用しない
const stringLengthMax = Math.max(...names.map(v => v.length));
let stringLengthMax2 = 0;

//forEachを使う
names.forEach(v => {if(stringLengthMax2 < v.length) stringLengthMax2 = v.length;});

console.log("stringLengthMax = " + stringLengthMax);//6
console.log("stringLengthMax2 = " + stringLengthMax2);//6



与えられた配列namesの中で最も長い文字列を見つける方法はreduceメソッドを使うとシンプルに実装できる。

reduceメソッドを使用して、アキュムレータ(accumulator)のprevと現在の変数currentを比較し、
より長い文字列を保持していくことで、最終的な最長の文字列を見つける。

アキュムレータ(accumulator)は、reduceメソッド内で使用される変数であり、
反復処理中に前の値を指す変数でもある。
reduceメソッドのコールバック関数内では、アキュムレータの値が更新され、次の反復ステップに引き継がれる。

最初のステップでは、初期値として空の文字列”がprevに代入される。
それ以降の各ステップでは、現在の変数currentとアキュムレータprevの値を比較し、より長い文字列をprevに格納する。

ただし、reduceメソッドは反復処理を進めるにつれてアキュムレータprevの値が更新され、
最終的には最後に比較された文字列が残る。しかし、それが必ずしも最長の文字列であるとは限らない。

以上の方法により、配列namesの中で最も長い文字列を求めることができる。


const names = ['url', 'scheme', 'slash', 'host', 'port', 'path', 'query', 'hash'];

const longestString = names.reduce((prev, current) => {
  return prev.length < current.length ? current : prev;
}, '');

const maxLength = longestString.length;

console.log("maxLength:" + maxLength);  // maxLength: 6

javascriptで次のようにnames配列に格納された文字列で一番… – Yahoo!知恵袋 ExternalLink

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*