おい、皆さん!それは私の最後のポスト以来、しばらくされているので、残念です.私は再び新しいフレームワークを探索するそのウサギ穴を下に行きました.それはギャツビーで、私はそれを楽しんだ.それはかなりの努力と少ないパフォーマーであり、最も重要なタスク自体を行うには、あなたのサイトを構築するために残して、ほとんどの目的のためにプラグインがたくさんあります.チェックしてくださいGatsby アウト.

どのような削減ですか？

reduceは単にJavaScriptの配列メソッドで、指定された配列を反復処理するコールバック関数を受け取ります.私を信じてください、これはこれとして理解するのが簡単です.
しかし、重要なことは、どのように配列を反復し、なぜそれがとても役立つと考えられます.私たちは以下を見るつもりです、しかし、例で.

配列の書き方。減らす？

まずは基本的な例と一緒に行きましょう.だから理解してから、かなり複雑なものを探ることができます.例えば、量と呼ばれる数の配列があります.

let amounts = [100, 200, 400, 300];

さて、あなたがこれらの上記の数字を加えるように言われるならば、あなたは通常何をしますか?我々のようなものを行うことができますfor or forEach , 以下のようなスニペットです.

let totalAmount = 0;

for (let i = 0; i < amounts.length; i++) {
  totalAmount += amounts[i];
}

console.log(totalAmount); // 1000

まあ、ループを使用しても可能ですreduce かなりコンパクトで読みやすいです.見てみましょう.

let totalAmount = amounts.reduce((sum, item) => sum + item, 0);

console.log(totalAmount); // 1000

参照してください、我々はちょうど1行のコードとはるかに読みやすさと同じ結果を得る.それで、あなたは方法を減らす方法です.

もっと涼しくしましょう。

さて、現在、我々は還元方法が何をするかについてわかっていて、可能です.何か冷たいものを書きましょう.
どのような場合は、名前、場所、年齢、人々の仕事データを含むCSVファイル(コンマ区切り値)ファイルを与えられて、消耗(または読み取り可能)形式または多分JSONファイルでデータを解析するように指示した.どうやって処理するの?
しかし、あなたがCSVファイルを見たことがない場合は、待って、それはちょうど名前が自分自身を伝えるものではない.

それらはデータ処理のファイルの標準であるコンマ(),で区切られたデータです.
この例では、CSVファイルを含むid , first_name , last_name , email and gender 100人.このgithub gistからファイルをコピーできます.sample.txt .
また、私はrepl.it そのような概念で遊んでのために、それはちょうどセットアップ(1クリックでのように)ではなく、ローカルサーバー全体、または不器用なブラウザのスニペットタブを設定するよりも簡単です.あなたがしなければならないすべてはrepl.it そして、あなたのアカウントを作成します(あなたのコードを保存したいなら)他の言語を選択し、コーディングを開始します.
それで、最初にCSVファイルを作成して、それを命名しましょうsample.csv . これでCSVファイルの内容をコピーしますgist そして、あなたのCSVファイルにそれをペーストしてください.

1,Donnamarie,Jemison,[email protected],Female
2,Herculie,Chadbourne,[email protected],Male
...

これは、100行を除いてどのようにCSVファイルを見ることです.JavaScriptファイルでは、次のようにこのデータをインポートします.

const fs = require("fs");

const rawData = fs.readFileSync("sample.csv", "utf-8");

今、あなたがログをコンソールrawData このような文字列の値が表示されます.

1,Donnamarie,Jemison,[email protected],Female
2,Herculie,Chadbourne,[email protected],Male
3,Shepperd,Luquet,[email protected],Male
4,Sinclare,Nuttey,[email protected],Male
...

それで、オブジェクトにそれらを得て、それらに還元を適用するために、我々は最初にそれの配列を作る必要があります.それをしましょう.

const listedData = rawData.trim().split("\n");

さて、listedData はコンマで区切られた単一の文字列のデータを保持する配列です.我々の仕事の半分はここで行われます、そして、我々は現在それを減らすことができます.

let parseData = listedData
  .map(item => item.split(","))
  .reduce((acc, item) => {
    acc.push({
      id: item[0],
      first_name: item[1],
      last_name: item[2],
      email: item[3],
      gender: item[4],
    });
    return acc;
  }, []);

さて、それはコードの大きく間隔をあけられた部分です、私にこれを理解するのはより簡単です.
まず第一に、我々はlistedData 人々に関するデータの列の配列であった配列.下記の通り.

[
  '1,Donnamarie,Jemison,[email protected],Female',
  '2,Herculie,Chadbourne,[email protected],Male',
  '3,Shepperd,Luquet,[email protected],Male',
  '4,Sinclare,Nuttey,[email protected],Male'
    ...
]

ここで、各文字列をマップし、コンマ(""")から分割して独自の配列を作成する必要があります.これは以下のようになります.

[
  [ '1', 'Donnamarie', 'Jemison', '[email protected]', 'Female' ],
  [ '2', 'Herculie', 'Chadbourne', '[email protected]', 'Male'],
  [ '3', 'Shepperd', 'Luquet', '[email protected]', 'Male' ],
  [ '4', 'Sinclare', 'Nuttey', '[email protected]', 'Male' ],
    ...
]

プロのヒント:あなたはコンソールすることができます.あなたが理解しないか、より明快さを必要とするどこでも、出力を記録してください、そして、私はすべてがそれの後、より意味をなすと確信します.
最後に、大きな配列の各サブアレイを減らし、ID、最初の名前、最後の名前、性別を含むオブジェクトにします.見てわかるように、reduceは最初の例のようにコールバック関数を2つの引数で取ります:acc and item , を返します.acc 初期値として.
今、私たちが大きい配列の上で、各々の反復の上でループしてitem 小さな配列とacc 各小さな配列内の文字列からオブジェクトを作成し、その値をその値にプッシュします.
そして、以下に示すように、CSVファイルから一人一人のためにオブジェクトの配列を作成する方法です.

[
  {
    id: '1',
    first_name: 'Donnamarie',
    last_name: 'Jemison',
    email: '[email protected]',
    gender: 'Female'
  },
  {
    id: '2',
    first_name: 'Herculie',
    last_name: 'Chadbourne',
    email: '[email protected]',
    gender: 'Male'
  },
  {
    id: '3',
    first_name: 'Shepperd',
    last_name: 'Luquet',
    email: '[email protected]',
    gender: 'Male'
  },
  {
    id: '4',
    first_name: 'Sinclare',
    last_name: 'Nuttey',
    email: '[email protected]',
    gender: 'Male'
  },
    ...
]

JSONファイルへのエクスポート

ちょうど楽しみのために、あなたは我々がこのようにJSONファイルに得た出力を輸出することができます.
鍛える
これを使用してオブジェクトの代わりにJSON構造に変換することができますJSON.stringify , など.

const jsonData = JSON.stringify(parseData, null, 8);

JSONファイルへの書き込み
私たちはwriteFileSync ファイルシステムモジュールから以下のようなJSONファイルに書き込みます.

fs.writeFileSync("sample.json", jsonData);

JSON形式でCSVファイルにあるすべてのデータで新しいファイルが作成されます.
< div >

結論

<小野寺>スーパーパワーのように縮小することは簡単です.個人的には、私は、私はすべての変数名を持っている必要はありませんし、私は簡単にデバッグし、良い探して動作するようにする必要がない感じを使用して私は、より理解可能なコードは、私の一日をより良くします.あなたはTwitterで私といっしょに議論することができますp >

更なる読書

<高橋潤子>p >
<ウル>

A Guide To The Reduce Method In Javascript​

Useful "reduce" use cases

Array.prototype.reduce()

Explanation of avascript's reduce() with a real world use case

< ull >