JavaScript (超個人的)配列操作3種の神器

JavaScript (超個人的)配列操作3種の神器:

はじめに

普段、Reactを書いていることが多いのですがその際によく使っている配列操作関数を紹介したいと思います。

（初歩的な内容かもしれませんがご了承ください。。。）

①Array.prototype.filter

詳しくはこちら

/* 概要 */ 
// 配列から条件に一致した値を抽出して配列を返す 
// ※１．index, array, thisArgは省略可能 
// ※２．thisArgはコールバック関数内でthisとして扱う値 
 
/* 使い方 */ 
const arr = [1,2,3,4,5,6].filter((element, index, array) => { 
  console.log(element, index, array); 
  return 3 < element; 
}, thisArg); 
console.log('arr', arr); 
 
/* 結果 */ 
// (1, 0, [1,2,3,4,5,6]) 
// (2, 1, [1,2,3,4,5,6]) 
// (3, 2, [1,2,3,4,5,6]) 
// (4, 3, [1,2,3,4,5,6]) 
// (5, 4, [1,2,3,4,5,6]) 
// (6, 5, [1,2,3,4,5,6]) 
// (arr, [4,5,6]) 

②Array.prototype.map

詳しくはこちら

/* 概要 */ 
// forEachとの違いは戻り値があるかどうか 
// 配列の各要素で処理して新しい配列を生成する 
// ※１．index, array, thisArgは省略可能 
// ※２．thisArgはコールバック関数内でthisとして扱う値 
 
/* 使い方 */ 
const arr = [1,2,3,4].map((currentValue, index, array) => { 
  console.log(currentValue, index, array); 
  return currentValue * 2; 
}, thisArg); 
console.log('arr', arr); 
 
/* 結果 */ 
// (1, 0, [1,2,3,4]) 
// (2, 1, [1,2,3,4]) 
// (3, 2, [1,2,3,4]) 
// (4, 3, [1,2,3,4]) 
// (arr, [2,4,6,8]) 

③Array.prototype.reduce

詳しくはこちら

/* 概要 */ 
// アキュムレータと配列の各要素に対して（左から右へ）関数を適用し、単一の値を返す 
// ※１．アキュムレータ：コールバックの戻り値を累積 
// ※２．currentIndex, array, initialValueは省略可 
 
/* 使い方 */ 
const initialValue = 10; 
const res = [1,2,3,4,5].reduce((accumulator, currentValue, currentIndex, array) => { 
  console.log(accumulator, currentValue, currentIndex, array); 
  return accumulator + currentValue; 
}, initialValue); 
console.log(res); 
 
/* 結果 */ 
// (10,1,0,[1,2,3,4,5]) 
// (11,2,1,[1,2,3,4,5]) 
// (13,3,2,[1,2,3,4,5]) 
// (16,4,3,[1,2,3,4,5]) 
// (20,5,4,[1,2,3,4,5]) 
// 25 

処理色々

配列を色々加工して配列を返したい時

// 例：10掛けした偶数だけを表示するReactコンポーネントを返す 
const hoge = () => ( 
<ul> 
{ 
  [1,2,3,4,5,6].filter(v => v % 2 === 0) 
  .map(v => <li>{v*10}</li>) 
} 
</ul>); 
 
/* 結果 */ 
// <ul> 
//   <li>20</li> 
//   <li>40</li> 
//   <li>60</li> 
// </ul> 

配列から色々と処理し合成した文字列を返したい時

// 例：style(object)を文字列に 
const style = { 
  color: 'red', 
  border: '1px solid black', 
  'background-color': 'blue' 
} 
console.log( 
  Object.keys(style).reduce((a, c) => `${a} ${c}: ${style[c]};`, '') 
); 
 
/* 結果 */ 
// color: 'red'; border: 1px solid black; background-color: blue; 

オブジェクト操作

lodash使え

// 例：style(object)から値にredがあるものだけ抽出 
const style = { 
  color: 'red', 
  border: '1px solid red', 
  'background-color': 'blue' 
} 
console.log( 
  Object.keys(style) 
  .filter(k => style[k].includes('red')) 
  .reduce((a, c) => Object.assign(a, {[c]: style[c]}), {}) 
); 
 
/* 結果 */ 
// { color: 'red', border: '1px solid red' } 
 

まとめ

上記以外にもJavaScriptの配列操作関数はたくさんありますのでリファレンスを眺めてみると思わぬ発見があるかもしれません。

自分の場合は割となんでもかんでも配列にしてゴリゴリにやっちゃいますが、それってどうなんだろ？とか思いつつ書いています。

もっとこうした方が良いみたいなのがありましたらご意見くださると幸いです。