[訳]Map、Reduce、Filter配列方法を説明する.

原文アドレス:An Illustrated Gide to Map,Reduce,and Filter Aray Methods

原文の作者:Unia Kravets

訳文:掘削金翻訳計画

本文の永久リンク:github.com/xitu/gold-m…

訳者:熊賢仁

校正者:Edone、Reapper 622

map、reduce、filterは三つの非常に実用的なJavaScript配列方法で、開発者に四両千斤の能力を与えました.私たちは直接本題に入ります.どうやって使えばいいですか?
Aray.map()Array.map()は、伝達された変換関数に従って、所与の配列の各値を更新し、同じ長さの新しい配列を返す.変換プロセスを実行するためのパラメータとしてのコールバック関数を受け入れます.

let newArray = oldArray.map((value, index, array) => {
  ...
});

一つの助けはmapの方法を覚えます.Morph Aray Piece-by-Paiece(配列を一つずつ変えます.)
for-eachサイクルの代わりにmapを使って、遍歴し、値ごとに変換関数を適用します.この方法は配列を更新したいときに、元の値を保持するのに適しています.それは潜在的にいかなる値も削除しないし、新しい出力も計算されない.mapは配列を一つずつ変えることができます.一例を見てみましょう.

[1, 4, 6, 14, 32, 78].map(val => val * 10)
// the result is: [10, 40, 60, 140, 320, 780]

上記の例では、1つの初期配列([1, 4, 6, 14, 32, 78])を使用して、それぞれの値を自身の10倍にマッピングする(val * 10).結果は新しい配列であり、初期配列の各値はこの式に変換される.[10, 40, 60, 140, 320, 780].
Aray.filter()
フィルタリング配列の値を他の配列にしたい場合、新しい配列の各値は特定の検査を通して、Array.filter()という高速で実用的な方法によって役に立ちます.
同様に検索フィルタ、filterは伝達パラメータに基づいて値をフィルタリングします.
例を挙げると、数字配列があると仮定して、10より大きい値をフィルタリングしたいです.

[1, 4, 6, 14, 32, 78].filter(val => val > 10)
// the result is: [14, 32, 78]

この配列上でmap方法を使用すると、上記の例では、val > 10によって判断された元の配列長と同じ配列が返され、各値が変換または検査される.元の値が10より大きいと、真の値に変換されます.このように:

[1, 4, 6, 14, 32, 78].map(val => val > 10)
// the result is: [false, false, false, true, true, true]

しかし、filterメソッドは、真の値だけを返します.したがって、すべての値が指定された検査を行うと、結果の長さは元の配列に等しいです.
filterを漏斗と想像する.一部の混合物は中から結果に入りますが、他の部分は残して捨てられます.
ペットの訓練学校に4匹の犬のクラスがあると仮定して、学校の中のすべての犬は各種の挑戦を経て、それから1つの等級の期末試験を受けます.これらの犬を対象配列で表します.

const students = [
  {
    name: "Boops",
    finalGrade: 80
  },
  {
    name: "Kitten",
    finalGrade: 45
  },
  {
    name: "Taco",
    finalGrade: 100
  },
  {
    name: "Lucy",
    finalGrade: 60
  }
]

犬たちの期末試験の成績が70点以上なら、立派な証明書が得られます.逆に、それらは修理に行きます.証明書のプリントの数を知るために、試験に合格した犬を返す方法を書きます.ループを書く必要はなく、配列の各オブジェクトを遍歴し、コードを簡略化するためにfilterを使用することができます.

const passingDogs = students.filter((student) => {
  return student.finalGrade >= 70
})

/*
passingDogs = [
  {
    name: "Boops",
    finalGrade: 80
  },
  {
    name: "Taco",
    finalGrade: 100
  }
]
*/

あなたも見ました.BoopsとTacoはいい犬です.授業を通じて証明書を取得しました.矢印関数の暗黙的戻り特性を利用して、1行のコードを実現できます.パラメータが一つしかないので、矢印関数の括弧を削除できます.

const passingDogs = students.filter(student => student.finalGrade >= 70)

/*
passingDogs = [
  {
    name: "Boops",
    finalGrade: 80
  },
  {
    name: "Taco",
    finalGrade: 100
  }
]
*/

Aray.reduce()reduce()方法は、入力値として1つの配列を受け入れ、値を返します.これは面白いです.reduceは、回転関数のパラメータを受け取ると、積算器(列毎の積算値が雪だるまのように増加する)と現在の値と索引が含まれます.reduceも第二のパラメータとしての初期値を受け入れる.

let finalVal = oldArray.reduce((accumulator, currentValue, currentIndex, array) => {
  ...
}), initalValue;

炒め物の関数と調味料リストを書きに来ました.

// our list of ingredients in an array
const ingredients = ['wine', 'tomato', 'onion', 'mushroom']

// a cooking function
const cook = (ingredient) => {
  return `cooked ${ingredient}`
}

これらの調味料をソースにしたいなら、reduce()で契約します.

const wineReduction = ingredients.reduce((sauce, item) => {
  return sauce += cook(item) + ', '
}, '')

// wineReduction = "cooked wine, cooked tomato, cooked onion, cooked mushroom, "

初期値(この例の'')は重要であり、最初の調味料が調理できることを決定している.ここで出力した結果はあまりあてにならないので、自分で炒め物をする時は気をつけてください.以下の例は私が話したい状況です.

const wineReduction = ingredients.reduce((sauce, item) => {
  return sauce += cook(item) + ', '
})

// wineReduction = "winecooked tomato, cooked onion, cooked mushroom, "

最後に、新しい文字列の末尾に追加の空白がないことを確認します.インデックスと配列を伝達して変換を実行できます.

const wineReduction = ingredients.reduce((sauce, item, index, array) => {
  sauce += cook(item)
  if (index < array.length - 1) {
    sauce += ', '
  }
  return sauce
}, '')

// wineReduction = "cooked wine, cooked tomato, cooked onion, cooked mushroom"

三つ目のオペレータ、テンプレート文字列と暗黙的に返してもいいです.もっと簡潔に書いてください.

const wineReduction = ingredients.reduce((sauce, item, index, array) => {
  return (index < array.length - 1) ? sauce += `${cook(item)}, ` : sauce += `${cook(item)}`
}, '')

// wineReduction = "cooked wine, cooked tomato, cooked onion, cooked mushroom"

この方法を覚える簡単な方法はソースの作り方を思い出します.
私と一緒に歌いましょう.
私は歌でこのブログを終わらせたいです.配列方法に短調を書いて、あなた達の記憶を助けます.
ビデオ
翻訳文に誤りがあったり、他の改善が必要なところがあれば、翻訳文を訂正してPRすることもできます.冒頭の本文の永久リンクは本稿のGitHub上のMarkDownリンクである.
金を掘り起こす翻訳計画は優良品質のインターネット技術の文章を翻訳するコミュニティで、文章の出所は金の上の英文を掘り起こして文章を分かち合うためです.Android、iOS、フロントエンド、バックエンド、ブロックチェーン、製品、デザイン、人工知能などの分野をカバーしています.より良い訳文を見たいです.引き続き、キング翻訳計画、公式微博、知乎コラムに注目してください.
転載先:https://juejin.im/post/5caf030d6fb9a068736d2d7c