TIL 5|配列メソッドフィルタ、map、reduce、forEach

15971 ワード
JavaScript TIL テキストリンク
配列内のすべての要素を遍歴しながらコールバック関数を繰り返す4つの配列法をまとめた.必要なときはその方法で思い出せばいいのに思い出せない
この機会に整理して、どんな場合に特定の方法を使ったほうがいいか見てみましょう.

filter()


呼び出し
  • 自体の配列のすべての要素をループ呼び出し、コールバック関数を繰り返し呼び出し、戻り値trueの要素のみからなる新しい配列を返します.
  • 元の配列は変更されません.
    • const numbers = [1, 2, 3, 4, 5];

const odds = numbers.filter(item => item % 2);
console.log(odds); // [1, 3, 5]

    アレイから特定の要素を削除(重複要素)

  • フィルタリング方法を使用して一部の要素を削除すると、一部の要素が重複している場合、重複しているすべての要素が削除されます.
    • const number = [1, 1, 2, 2, 3, 4, 5];

let arr = number.filter((item, index) => 
    number.indexOf(item) === index
);

console.log(arr); // [ 1, 2, 3, 4, 5 ]

    AとBの交わり

    let arr1 = [1, 2, 3, 4];
let arr2 = [1, 2, 5, 6, 7];

let arr3 = arr1.filter(item => arr2.includes(item));
console.log(arr3); // [1, 2]

    map()


    呼び出し
  • 自体の配列内のすべての要素をループ呼び出し、コールバック関数を繰り返し呼び出し、戻り値からなる要素が새로운 배열を返す.
  • 元の配列は変更されません.
    • const numbers = [1, 4, 9];

const roots = numbers.map(item => Math.sqrt(item));
console.log(roots); // [1, 2, 3]
  • mapメソッドを呼び出す配列とmapメソッドによって生成される配列は1:1 매핑であり、同じ長さ値を有する.

    • reduce()

  • 独自の配列のすべての要素が呼び出されると、コールバック関数が繰り返し呼び出され、最終的に結果値が生成され、返されます.
  • 元の配列は変更されません.
    • 1回目の買収は
  • 、콜백함수、2回目の買収は초기값を受け取った.
  • 初期値は、数値から配列までの様々な値を入力することができる.
    • 最初の買収
  • は、以前に呼び出された함수들의 결과가 누적되어 저장の「アキュムレータ」とみなすことができる.最後の関数を呼び出すと、その値はreduceの戻り値になります.
  • は初期値と配列の最初の要素値をパラメータとしてコールバック関数に渡し、次のループはコールバック関数の戻り値(acc)と2番目の要素値(cur)をパラメータとして呼び出し、これらのプロセスを繰り返して結果値を返す.

    • アレイ内のすべての要素の累積結果を取得

    const arr = [1,2,3,4]
let sum = arr.reduce((acc, cur) => acc + cur, 0)

console.log(sum); //

    平均値を求める

    const arr = [1, 2, 3, 4, 5];
const average = arr.reduce((acc, cur, index) => {
    return index === arr.length - 1 ? (acc + cur) / arr.length : acc + cur
}, 0);

console.log(average); // 3

    繰り返しを求める

    const alphabet = ['a', 'b', 'c', 'b', 'd'];

const count = alphabet.reduce((acc, cur) => {
    acc[cur] = (acc[cur] || 0) + 1;
    return acc;
}, {});
// 초기값인 빈 객체에 요소값인 cur을 property key로, 요소의 개수를 value로 할당한다.

console.log(count); // { a: 1, b: 2, c: 1, d: 1 }

    forEach()


    呼び出し
  • 自身の配列では、コールバック関数を渡すことによって繰り返し呼び出される.
  • 複文の高次関数に代わることができます.
  • 反復文との違いは、break、continue文を使用できないことです.配列された各要素は漏れなく巡回し,中間は中断できない.
    • const arr = [1, 2, 3];

const newArr = arr.forEach(item => item ** 2);
console.log(newArr); // undefined
// forEach 메소드의 반환값은 언제나 undefined다.
  • の戻り値は、常にundefinedです.配列内の要素は、指定された関数のみで呼び出されます.
    • const arr = [1, 2, 3];
const newArr = [];

const arr2 = arr.forEach(item => newArr.push(item ** 2));
console.log(newArr); // [1, 4, 9]
    Repeaterは、データレコードがない場合に「関連レコードなし...」を表示します.
    IEnumerableタイプを直接DataTableに変換