Array method (filter, map, reduce)

10898 ワード

INTRO.


Javascriptを使う場合、他のことはわかりませんが、いくつかの並び方を覚えておくべきだと思います.私はこのいくつかの方法自体が役に立つことを知っていますが、私はよく知っているfor文ですべてをカバーするのが好きではありません.

簡単にmap、filter、reduceの機能を見ます!

MAP


mdnの説明によれば、
Array.prototype.map()メソッドは、各配列の要素が所定の関数を呼び出す新しい配列を返します.
arr.map ( callback ( currentValue [, index[, array]]) [, thisArg])
パラメータ
callback
新しいアレイ要素の関数を生成します.3つの引数があります.
currentValue
処理する現在の要素.
index Optional
処理する現在の要素のインデックス.
array Optional
map()の配列を呼び出します.
thisArg Optional
コールバックを実行するときに使用する値.
戻り値
配列内の各要素に対して実行されるcallback結果の新しい配列.
Example.
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots는 [1, 2, 3]
// numbers는 그대로 [1, 4, 9]
Mathコールバック関数パラメータ.sqrtとして受信し、Mathをすべての要素に追加します.sqrtを使用する方法.
私がよく使うforループを使うと、
function sqrt(x) {
    let newNumb = [];
    for (let i = 0; i < x.length; i++) {
        newNumb.push(Math.sqrt(x[i]))
    }
    return newNumb;
} 
同じ戻り値があってもmapを使用してより簡潔にすることができます.

FILTER


filter()メソッドは、与えられた関数をテストするすべての要素を収集し、新しい配列に返します.
arr.filter(callback(element[, index[, array]])[, thisArg])
パラメータ
callback
各要素の関数をテストします.trueを返すと要素は保持され、falseを返すと要素は破棄されます.次の3つのパラメータを受信します.
element
処理する現在の要素.
index Optional
処理する現在の要素のインデックス.
array Optional
フィルタを呼び出す配列.
thisArg Optional
コールバックを実行するときに使用する値.
戻り値
テストされた要素からなる新しいアレイ.要素がテストに失敗した場合は、空の配列が返されます.
Example.
function isBigEnough(value) {
  return value >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered 는 [12, 130, 44]
filter法により、10未満の数を除去する方法.
isBigeEnoughというコールバック関数により、配列には10未満の値(true)しか含まれません.

REDUCE


reduce()メソッドは、アレイ内の各要素に対して所与のreducer関数を実行し、結果値を返します.
arr.reduce(callback[, initialValue])
パラメータ
callback
アレイ内の各要素に対して実行する関数.次の4つのパラメータを使用します.
accumulator
計算機accumulatorは、コールバックの戻り値を蓄積します.コールバックの最後の戻り値、またはコールバックの最初の呼び出し
initialValueが指定されている場合は、initialValueの値です.
currentValue
処理する現在の要素.
currentIndex Optional
処理する現在の要素のインデックス.InitialValueが提供されている場合は、0または1から開始します.
array Optional
reduce()の配列を呼び出します.
initialValue Optional
コールバックの最初の呼び出しで最初の引数に指定された値.初期値が指定されていない場合は、配列の最初の要素が使用されます.空の配列で初期値なしにreduce()を呼び出すと、エラーが発生します.
戻り値
計算された結果値を累計します.
Example.
重複する要素の削除
let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
let result = arr.sort().reduce((accumulator, current) => {
    const length = accumulator.length
    if (length === 0 || accumulator[length - 1] !== current) {
        accumulator.push(current);
    }
    return accumulator;
}, []);
console.log(result); //[1,2,3,4,5]
sortメソッドを使用して昇順にソートし、冗長要素をアキュムレータにのみプッシュします.
実はmdnを見るのがもっと便利です.
すでに知っている内容ですが、よく知っているfor loopの代わりに使ってもいいことを注意するためです.今後、for loopを使う必要がある場合は、利用率を高めるためにいろいろな方法を使うべきです.