Zenn
📘

splitメソッド、reduceメソッドの学習

に公開
JavaScript
tech

JavaScriptの基礎的な内容ですが、自身の学習のために記載しておこうと思います。

splitメソッド

問題：
"5 2 4"のような数字（文字列）の入力が与えられているとする。
これらの入力を配列に変換するには？

（下記ではさらに中身を数字に変換し、配列を一つずつ変数に代入）

const numbers = "5 2 4"
const [A, B, C] = numbers.split(" ").map(Number)
console.log(A)
console.log(B)
console.log(C)

出力結果：
5
2
4



＜メモ＞

  • 「const [A, B, C] =」　の部分は分割代入と呼ばれるもので、
    作成された配列を一つずつ変数に代入することが可能

  • split("")（ダブルクォーテーションの間にスペースがない）だと、間のスペースも文字列として分割されてしまう。

    console.log(numbers.split(""))= ['5', ' ', '2', ' ', '4']
    となる。

  • map(Number)で文字列の配列を数字に変換している（NumberはJavaScriptに最初からある組み込み関数）

reduceメソッド

問題：
const users = [
{ id: 1, name: "田中", department: "営業", sales: 1200000 },
{ id: 2, name: "鈴木", department: "技術", sales: 0 },
{ id: 3, name: "佐藤", department: "営業", sales: 980000 }
];
上記のデータのうち、部署ごとの集計を行うには？

const sum = users.reduce((acc, user) => {
    if(!acc[user.department]) {
        acc[user.department] = 0;
    }
    acc[user.department] += user.sales;
    return acc;
}, {});

console.log(sum);

出力結果：
{営業: 2280000, 技術: 0}

＜メモ＞

  • (acc, user) => {
    if(!acc[user.department]) {
    acc[user.department] = 0;
    }
    acc[user.department] += user.sales;
    return acc;
    }
    この部分がコールバック関数となっている。

コールバック関数部分の第一引数(acc)、第二引数(user)の名前はなんでもよい。

accは集計結果を保持するオブジェクト。

userにはusersの各要素（＝オブジェクト）が順番に渡される。

第一引数[第二引数（オブジェクト）.key]でどのkeyに基づいて合計するか指定でき、keyそれぞれで合計される。

  • if(!acc[user.department]) {
    acc[user.department] = 0;
    }
    この部分ではaccオブジェクトの中に対応するkey（ここではuser.department）が存在しない場合に0で初期化している。
    初期化しない場合はundefinedとなり、数値を足そうとするとエラーが発生する。

  • }, {});

末尾のこの{}の部分には初期値を設定できる。

例えば{技術:1000000}としておくと、{営業: 2280000, 技術: 1000000}と出力される。

所感

調べものをしているうちにたまたま出てきたメソッドについて、基本的な使い方をまとめてみました。

今回の内容ぐらいは、何も調べずに操作できるようになりたいですね。

GitHubで編集を提案

Discussion