0%

Programmingプログラミングナレッジ

Posted:2019.11.19

javascriptで配列を扱う時によく使うメソッド#5【配列の値から別の配列を作成・単一の値を算出する】

javascriptでの配列操作に使うメソッドについては、これまでにも過去記事でまとめてきました。今回で5回目となる本記事では、引き続き配列を自由に扱うのに必須なメソッドを見ていきたいと思います。

 

(参考記事)
javascriptで配列を扱う時によく使うメソッド#1【配列の作成・値や総数の取得・空判定など】
javascriptで配列を扱う時によく使うメソッド#2【配列の値に対して繰り返し処理を行う】
javascriptで配列を扱う時によく使うメソッド#3【配列に値が含まれるか・値のインデックスを検索する】
javascriptで配列を扱う時によく使うメソッド#4【配列から条件に合う値を取得・フィルタリングする】

 

Array.map()

元の配列の値から、別の配列を作成する場合には「Array.map()」を使うと便利です。引数にはコールバック関数をとり、その中で、新たに配列を生成するための処理を記述します。

【javascript】

const arrayObject = [
 { name: 'りんご', price: 100 },
 { name: 'みかん', price: 80 },
 { name: 'ぶどう', price: 300 },
 { name: 'いちご', price: 500 }
];
const result = arrayObject.map((value) => {
 return value.price;
});
console.log(result);

 

【console】

[100, 80, 300, 500]

 

上記ではオブジェクト型の値を持つ配列において、特定のキーの値をそれぞれ抽出して、新たな配列として作成しています。このように複雑なオブジェクトを持つ配列を切り分けるのに使うと便利ですね。

 

また、Array.map()では、元の配列にある値を変えた上で、新たな配列として作り出すことも可能です。その際にはコールバック関数内で、値を変えるための処理を記述します。下記の例では、金額に対して税込みの値にして配列を作成するサンプルになります。

【javascript】

const tax = 0.1
const result = arrayObject.map((value) => {
 return value.price + value.price * tax;
});
console.log(result);

 

【console】

[110, 88, 330, 550]

 

このように値は元の配列のものから変化しているのがわかります。

 

Array.reduce()

複数存在している配列の値を、一つの値として生成する場合には「Array.reduce()」を使います。引数にはコールバック関数と、初期値の値を取り、さらにコールバック関数の引数には、累計値と、現在の値、インデックスを取ります。

【javascript】

const arrayData = [ 100, 80, 300, 500 ];
const result = arrayData.reduce((prev, current) => {
 return prev + current;
});
console.log(result);

 

【console】

980

 

Array.reduce()の使用例として、このような配列の値の合計を算出するなどがあります。出力されるのは1つの値になっているのが確認できます。累計値に現在の値が加算され、配列の値の数だけ順番に処理される形になります。ちなみに「Array.reduceRight()」を使うと、配列の後ろの値から処理されるようになります。

 

その他にもArray.reduce()はいろんな活用方法があります。例えば、下記のように配列の値をオブジェクトに変換することも可能です。

【javascript】

const arrayData = [ 100, 80, 300, 500 ];
const result = arrayData.reduce((prev, current, index) => {
 prev[index] = { 'price': current }
 return prev;
}, []);
console.log(result);

 

【console】

[
 { 'price': 100 },
 { 'price': 80 },
 { 'price': 300 },
 { 'price': 500 }
]

 

このような場合、Array.reduce()の第二引数に初期値を設定するようにします。ここでは空の配列を初期値に設定しています。こうすることで、初期値の値から処理が始まるようになります。

 

まとめ

【配列の値から別の配列を作成する】

Array.map(( value ) => { callback });

 

【配列の値から単一の値を算出する】

Array.reduce(( prev, current ) => { callback });

もしくは

Array.reduce(( prev, current, index ) => { callback }, initialvalue);

 


 

今回のメソッドは、使い所がわかりにくいかもしれませんが、うまく活用することで、かなりコードが短縮できるのではないでしょうか。特にフロント側でデータの加工や整形をする場合にはかなり高い頻度で登場するので、ぜひ覚えておきたいメソッドですね。Array.map()とArray.reduce()は一見よく似ていますが、出力するものが配列か単独の値かで使い分けると良いですね。

 

(こちらの記事もどうぞ)
javascriptで配列を扱う時によく使うメソッド#1【配列の作成・値や総数の取得・空判定など】
javascriptで配列を扱う時によく使うメソッド#2【配列の値に対して繰り返し処理を行う】
javascriptで配列を扱う時によく使うメソッド#3【配列に値が含まれるか・値のインデックスを検索する】
javascriptで配列を扱う時によく使うメソッド#4【配列から条件に合う値を取得・フィルタリングする】

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】