JavaScript 配列メソッドの誤った使用例を 4 つ共有する

初めて JavaScript を学んだとき、私は深く勉強しておらず、一部の知識しか理解していませんでした。過去の期間に、私がチェックしたすべてのプル リクエストでこれら 4 つの間違いが発生しました。この記事を書いたもう 1 つの理由は、私自身がこうした間違いを犯したからです。正しい使い方を見てみましょう！

1. Array.indexOf を使用せず、Array.includes を使用してください

「配列内の要素を見つけたい場合は、Array.indexOf を使用してください。」 JavaScriptのコースを勉強していたときにこの文を思い出しました。この文は正しいです。確かにこのように使用できます。

MDN ドキュメントによると、「Array.indexOf は、検索されている要素の最初に一致した位置の添字を返します。したがって、後でこのインデックスを使用する必要がある場合は、Array.indexOf が良い解決策です。」ただし、解決したい問題は、配列に要素が含まれているかどうかを調べることです。これは、はい/いいえの質問、つまりブール型を返す真または偽の質問です。したがって、ブール値を返す Array.includes を使用することをお勧めします。

'use strict';
const characters = [
  'ironman',
  'black_widow',
  'hulk',
  'captain_america',
  'hulk',
  'thor',
];
console.log(characters.indexOf('hulk'));
// 2
console.log(characters.indexOf('batman'));
// -1
console.log(characters.includes('hulk'));
// true
console.log(characters.includes('batman'));
// false

2. Array.filterを使用せず、Array.findを使用してください

Array.filterは、フィルタリング条件を満たす新しい配列を返す非常に便利な関数です。その名前が示すように、フィルタリングに使用されます。

ただし、必要な結果に要素が 1 つしかないことがわかっている場合は、それを使用することはお勧めしません。たとえば、コールバック関数定義で一意の ID を使用してフィルタリングする場合、結果は一意である必要があります。この場合、Array.filter は要素を 1 つだけ含む配列を返します。特定の ID で検索できるため、要素が 1 つしかないことがすでに決定されているため、配列を使用することは意味がありません。

さらに、パフォーマンスの問題についても話しましょう。一致する要素をすべて返すために、Array.filter は配列全体を検索する必要があります。フィルター条件を満たす要素が数百ある場合、返される配列は非常に大きくなることが想像できます。

そのような状況を避けるために、Array.find を使用することをお勧めします。フィルター条件を満たす最初の要素のみを返します。さらに、Array.find は配列全体を検索するのではなく、条件を満たす最初の要素を見つけた後に実行を終了します。

'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' }

3. 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

4. Array.map と Array.filter を組み合わせて使用​​せず、Array.reduce を使用してください

Array.reduce は少し理解するのが難しいです。しかし、毎回 Array.filter と Array.map を同時に使用すると、何かが必要になることに気づきますよね?

私が言いたいのは、配列全体を 2 回ループしたということです。 1 回目はフィルタリングして新しい配列を返し、2 回目はマップを通じて新しい配列を構築します。それぞれ独自のコールバック関数を持つ 2 つの配列メソッドを使用し、Array.filter によって返された配列が再度使用されることはありません。

非効率を避けるために、Array.reduce を使用することをお勧めします。同じ結果ですが、よりエレガントなコードになります。以下の例を参照してください:

'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 配列メソッドの誤った使用例を 4 つ共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。