JavaScript配列方法のエラー使用例

1.アラy.indexOfを使わないで、アラy.includesを使います.
配列内の要素を検索する場合は、Aray.indexOfを使用します.JavaScriptの授業を勉強していた時、このような言葉がありました.この言葉は間違いないです.確かにこのように使えます.
MDN文書によると、「Aray.indexOfは、検索された要素の最初の一致した位置の下付きを返します.」というので、このインデックスを使う必要がある場合、Aray.indexOfは、非常に良い解法です.しかし、私たちが解決したい問題は、行列に要素が含まれているかどうかを調べることです.これはYes/Noの問題で、ブールタイプの真偽に戻ります.したがって、アラy.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.アラy.filterを使わないで、アラy.findを使います.
Aray.filterはフィルタ条件を満たす新しい配列を返すために有用な関数である.名前が表すように、フィルタリングに使われています.
しかし、もし私たちが必要な結果が一つの要素しかないと知っているなら、それを使うことを勧めません.例えば、私たちのコールバック関数定義が唯一のIDでフィルタリングされるなら、結果は必ず唯一です.この場合、Aray.filterは1つの要素だけの配列を返します.特定のIDで検索できる以上、配列は一つの要素しかないと判断したからです.
また、性能について話をしましょう.すべての整合要素を返すために、Aray.filterは配列全体を検索する必要がある.100個以上の要素がフィルタ条件を満たしていれば、戻る配列は大きいと考えられます.
このような状況を避けるために、Aray.findを使用することを提案します.フィルタ条件を満たす最初の要素だけを返します.また、Aray.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.アラy.findを使わないで、アラy.someを使います.
何度も間違えたことを認めます.その後、親しい友達にMDNの文書を見せてもらいました.もっといい解決策があると言いました.この状況は先ほど述べたAray.indexOf/Aray.includesに似ています.
前の例では、Aray.findがフィルタ関数を受け取り、満足される要素を返すのを見た.では、もし配列にある要素が含まれているかどうかを調べるなら、Aray.findは一番いい案ですか?ブール値ではなく、要素の具体的な値を返します.
アルラy.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.Aray.mapとAray.filterを使用しないで、Aray.reduceを使用します.
Aray.reduceはちょっと分かりにくいです.しかし、もし私たちがAray.filterとAray.mapを同時に使うたびに、何か必要なものがあると気づいていますか?
私たちは配列全体を2回循環したという意味です.最初はフィルタリングで新しい配列を返します.2回目はmapで新しい配列を作ります.二つの配列法を使用して、各方法にはそれぞれのコールバック関数があります.また、アラy.filterが戻ってきた配列は二度と使われません.
低効率化を避けるために、アラy.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'] }
// ]