初心者が JavaScript で配列をより上手に使用するにはどうすればよいでしょうか? （ソースコード）

この記事の内容は、初心者が JavaScript で配列をより効果的に使用する方法についてです。 （ソースコード）、それは確かな参考値を持っています、それがあなたに役立つことを願っています。

Array.filter の代わりに Array.find を使用する

Array.filter は非常に便利なメソッドです。コールバック関数を通じて元の配列をフィルタリングし、フィルタリングされた項目を新しい配列として返します。その名前が示すように、このメソッドはフィルタリングに使用され、(一般的に言えば) より短い長さの新しい配列が生成されます。

ただし、コールバック関数でフィルタリングすると項目だけが残ることがわかっている場合は、Array.filter の使用はお勧めしません。例: 配列をフィルタリングするには、フィルタ条件として一意の ID に等しいを使用します。この例では、Array.filter は項目を 1 つだけ含む新しい配列を返します。ただし、特定の ID を持つ項目を取得しようとしているだけなので、この新しい配列は役に立ちません。

パフォーマンスについて話しましょう。コールバック関数のフィルター基準に一致するすべての項目を取得するには、Array.filter が配列全体を走査する必要があります。元の配列に数千の項目がある場合、コールバック関数をかなりの回数実行する必要があります。

これらの状況を回避するには、Array.find を使用することをお勧めします。 Array.filter と同様にコールバック関数が必要ですが、条件を満たす最初の項目のみを返します。コールバック関数のフィルター条件を満たす最初の要素が見つかると、下方向の検索が直ちに停止されます。配列全体を反復処理する必要はもうありません。

'use strict';
const characters =[
  { id:1, name:'ironman'},
  { id:2, name:'black_widow'},
  { id:3, name:'captain_america'},
  { id:4, name:'captain_america'},
];
function getCharacter(name){
  return character => character.name === name;
}
console.log(characters.filter(getCharacter('captain_america')));
// [
//   { id: 3, name: 'captain_america' },
//   { id: 4, name: 'captain_america' },
// ]
console.log(characters.find(getCharacter('captain_america')));
// { id: 3, name: 'captain_america' }

Array.find の代わりに Array.some を使用します

私もこの間違いをよく犯すことを認めます。そこで友人が、より良い方法を見つけるために MDN のドキュメントを調べてみたらどうかと提案してくれました。実際、(このエラーは) 上記の Array.indexOf/Array.includes の例と非常に似ています。

上記の例では、Array.find がパラメーターとしてコールバック関数を必要とし、(修飾された) 最初の要素を返すことがわかります。しかし、要素が配列内に存在するかどうかを知る必要がある場合、Array.find が最良の選択でしょうか?ブール値ではなく要素を返すため、必ずしもそうではありません。

以下の例では、必要なブール値を返す Array.some を使用することをお勧めします。

'use strict';
const characters =[
  { id:1, name:'ironman', env:'marvel'},
  { id:2, name:'black_widow', env:'marvel'},
  { id:3, name:'wonder_woman', env:'dc_comics'},
];
function hasCharacterFrom(env){
  return character => character.env === env;
}
console.log(characters.find(hasCharacterFrom('marvel')));
// { id: 1, name: 'ironman', env: 'marvel' }
console.log(characters.some(hasCharacterFrom('marvel')));
// true

Array.some と Array.includes の使用の違いを追加します。どちらも配列内に項目が存在するかどうかを示すブール値を返し、対応する項目が見つかると配列の走査を停止します。違いは、Array.some のパラメータがコールバック関数であるのに対し、Array.includes のパラメータは値であることです (2 番目のオプションのパラメータは考慮されません)。

値を持つ項目が配列内に存在するかどうかを知りたいとします。コード [].includes(value) を記述するか、 item => item === value を配列に渡すことができます。 .some をコールバック関数として使用します。 Array.includes は使いやすく、Array.some はより制御しやすいです。

Array.filter と Array.map を組み合わせる代わりに Array.reduce を使用する

実際、Array.reduce は理解するのが簡単ではありません。ただし、最初に Array.filter を使用して元の配列をフィルターし、次に (結果に対して) Array.map を呼び出した場合 (新しい配列を取得するため)。これには何か問題があると思われますか?

これの問題は、配列を 2 回走査していることです。 1 回目は、元の配列をフィルターして、少し短い長さの新しい配列を取得します。2 回目のトラバーサル (翻訳者注: Array.map) は、Array.filter によって返された新しい配列を処理し、新しい配列を再度作成します。最終結果を得るために、2 つの配列メソッドを組み合わせて使用​​しました。各メソッドには独自のコールバック関数があり、Array.map で使用される一時配列は Array.filter によって提供されますが、これは (一般的に) 再利用できません。

このような非効率的なシナリオを回避するには、Array.reduce を使用することをお勧めします。結果は同じですが、コードは改善されています。 Array.reduce を使用すると、フィルタリングおよび削減された項目をアキュムレータに入れることができます。アキュムレータには、インクリメントされる数値、塗りつぶされるオブジェクト、結合される文字列または配列などを指定できます。

上記の例では Array.map を使用しましたが、(さらに) アキュムレータが結合される配列である Array.reduce を使用することをお勧めします。次の例では、変数 env の値に応じて、それをアキュムレータに追加するか、アキュムレータを変更しないままにします (つまり、何もしません)。

'use strict';
const characters =[
  { name:'ironman', env:'marvel'},
  { name:'black_widow', env:'marvel'},
  { name:'wonder_woman', env:'dc_comics'},
];
console.log(
  characters    .filter(character => character.env ==='marvel')
    .map(character =>Object.assign({}, character,{ alsoSeenIn:['Avengers']}))
);
// [
//   { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] },
//   { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] }
// ]
console.log(
  characters    .reduce((acc, character)=>{
      return character.env ==='marvel'
        ? acc.concat(Object.assign({}, character,{ alsoSeenIn:['Avengers']}))
        : acc;
    },[])
)
// [
//   { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] },
//   { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] }
// ]

上記は、初心者が JavaScript で配列をより効果的に使用できる方法です。 (ソース コード) の完全な紹介。JavaScript ビデオ チュートリアル について詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。

以上が初心者が JavaScript で配列をより上手に使用するにはどうすればよいでしょうか? （ソースコード）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。