Zenn
📕

JavaScriptでオブジェクトの配列から何かを探す時に使うメソッドをまとめてみた

2021/07/20に公開
JavaScript
tech

はじめに

JavaScriptで開発をしていて、これmapにする必要ある？という時があります。
そういう時、filterとかfindとかで置き換えようと試みます。
でも、ブランクが長いとすぐにやりかたが浮かんでこないです。
いちいち調べ直してて効率悪いなぁと困っていました。

なので、一旦整理して見ようと思います。
その上で、具体的なテストケースも含めてサンプルコード形式でまとめておいて、ときどき素振りしてブランクを短くしようと思います。

やってみたこと

よく使う次のメソッドの使い方を、自分流で可能な限りシンプルにまとめてみました。その上でサンプルコードを書いてみました。

まとめ

シンプルなまとめとMDNへのリンクを書きました（よく見るので）

  • Arrayで欲しい時系
    • filter：条件にマッチした配列を返す MDN
  • 単体のObjectで欲しい時系
    • find：条件にマッチする最初の要素を返す MDN
    • reduce：各要素にreducer関数を実行した結果を返すMDN
    • reduceRight：reduceと同じだが逆順に処理した結果を返すMDN
  • 添字で欲しい
    • findIndex：条件にマッチする最初の要素の位置を返すMDN
  • Booleanで欲しい時系
    • includes: 指定した要素が含まれていたら(参照が同じなら)trueを返すMDN
    • some：各要素に実行した関数の結果が1つでも合格したらtrueを返すMDN
    • every：各要素に実行した関数の結果が全部合格したらtrueを返すMDN
  • その他
    • map：自分ルールでは、上記で対応できなかったらこれを使う。各要素に実行した関数の結果を新しい配列として返すMDN

サンプルコードの前提

次のデータを使っています

const data = [
  {
    "id":1,
    "name":"apple",
    "price":100
  },
  {
    "id":2,
    "name":"banana",
    "price":200
  },
  {
    "id":3,
    "name":"cherry",
    "price":300
  },
  {
    "id":4,
    "name":"apple",
    "price":400
  },
  {
    "id":5,
    "name":"apple",
    "price":100
  },
]

サンプルコード

filter

条件にマッチした配列を返す MDN

const resultFilter = data.filter( d => {
  return d.name === 'apple';
})
console.log("resultFilter = " + JSON.stringify(resultFilter, undefined, 2));
// resultFilter = [
//   {
//     "id": 1,
//     "name": "apple",
//     "price": 100
//   },
//   {
//     "id": 4,
//     "name": "apple",
//     "price": 400
//   },
//   {
//     "id": 5,
//     "name": "apple",
//     "price": 100
//   }
// ]

find

find：条件にマッチする最初の要素を返す MDN
逆順だと結果が変わることがあるので2パターン書いてます

const resultFind = data.find( d => {
  return d.name === 'apple';
})
console.log("resultFind = " + JSON.stringify(resultFind, undefined, 2));
// resultFind = {
//   "id": 1,
//   "name": "apple",
//   "price": 100
// }

const resultFind2 = data.reverse().find( d => {
  return d.name === 'apple';
})
console.log("resultFind2 = " + JSON.stringify(resultFind2, undefined, 2));
// resultFind2 = {
//   "id": 5,
//   "name": "apple",
//   "price": 100
// }

reduce

reduce：各要素にreducer関数を実行した結果を返すMDN

const resultReduce = data.reduce( (prev, curr) => {
  return {
    id: 6,
    name: prev.name + curr.name,
    price: prev.price + curr.price
  }
})
console.log("resultReduce = " + JSON.stringify(resultReduce, undefined, 2));
// resultReduce = {
//   "id": 6,
//   "name": "applebananacherryappleapple",
//   "price": 1100

reduceRight

reduceRight：reduceと同じだが逆順に処理した結果を返すMDN

const resultReduceRight = data.reduceRight( (prev, curr) => {
  return {
    id: 6,
    name: prev.name + curr.name,
    price: prev.price + curr.price
  }
})
console.log("resultReduceRight = " + JSON.stringify(resultReduceRight, undefined, 2));
// resultReduceRight = {
//   "id": 6,
//   "name": "appleapplecherrybananaapple",
//   "price": 1100
// }

findIndex

findIndex：条件にマッチする最初の要素の位置を返すMDN
逆順だと結果が変わることがあるので2パターン書いてます

const resultFindIndex = data.findIndex( d => {
  return d.name === 'apple';
})
console.log("resultFindIndex = " + JSON.stringify(resultFindIndex, undefined, 2));
// resultFindIndex = 0
const resultFindIndex2 = data.reverse().findIndex( d => {
  return d.name === 'apple';
})
console.log("resultFindIndex2 = " + JSON.stringify(resultFindIndex2, undefined, 2));
// resultFindIndex2 = 0

includes

includes: 指定した要素が含まれていたら(参照が同じなら)trueを返すMDN
配列内の内容が同じでも、参照が違うと結果が変わるのでそれがわかりやすいように3パターン書いてます。

const resultIncludes = data.includes(
  {
    "id":1,
   "name":"apple",
    "price":100
  }
)
console.log("resultIncludes = " + JSON.stringify(resultIncludes, undefined, 2));
// resultIncludes = false

const copyOfdata0 = {...data[0]};
const resultIncludes2 = data.includes(copyOfdata0)
console.log("resultIncludes2 = " + JSON.stringify(resultIncludes2, undefined, 2));
// resultIncludes2 = false

const data0 = data[0];
const resultIncludes3 = data.includes(data0)
console.log("resultIncludes3 = " + JSON.stringify(resultIncludes3, undefined, 2));
// resultIncludes3 = true

some

各要素に実行した関数の結果が1つでも合格したらtrueを返すMDN
一つも合格しないパターンも書いてます。

const resultSome = data.some( d => {
  return d.name === 'apple';
})
console.log("resultSome = " + JSON.stringify(resultSome, undefined, 2));
// resultSome = true
const resultSome2 = data.some( d => {
  return d.name === 'hoge';
})
console.log("resultSome2 = " + JSON.stringify(resultSome2, undefined, 2));
// resultSome2 = false

every

各要素に実行した関数の結果が全部合格したらtrueを返すMDN
一つも合格しないパターンも書いてます。

const resultEvery = data.every( d => {
  return d.name === 'apple';
})
console.log("resultEvery = " + JSON.stringify(resultEvery, undefined, 2));
// resultEvery = false
const resultEvery2 = data.every( d => {
  return d.name === 'hoge';
})
console.log("resultEvery2 = " + JSON.stringify(resultEvery2, undefined, 2));
// resultEvery2 = false

map

自分ルールでは、他のメソッドで対応できなかったらこれを使う。各要素に実行した関数の結果を新しい配列として返すMDN

const resultMap = data.map( (d) => {
  return d;
})
console.log("resultMap = " + JSON.stringify(resultMap, undefined, 2));
// resultMap = [{"id":1,"name":"apple","price":100},{"id":2,"name":"banana","price":200},{"id":3,"name":"cherry","price":300},{"id":4,"name":"apple","price":400},{"id":5,"name":"apple","price":100}]

全部

最後に、全部まとめて一つにすることで素振りビリティの高いサンプルコードを書いてみました。

app.js
const data = [
  {
    "id":1,
    "name":"apple",
    "price":100
  },
  {
    "id":2,
    "name":"banana",
    "price":200
  },
  {
    "id":3,
    "name":"cherry",
    "price":300
  },
  {
    "id":4,
    "name":"apple",
    "price":400
  },
  {
    "id":5,
    "name":"apple",
    "price":100
  },
]

const resultFilter = data.filter( d => {
  return d.name === 'apple';
})
console.log("resultFilter = " + JSON.stringify(resultFilter, undefined, 2));
// resultFilter = [
//   {
//     "id": 1,
//     "name": "apple",
//     "price": 100
//   },
//   {
//     "id": 4,
//     "name": "apple",
//     "price": 400
//   },
//   {
//     "id": 5,
//     "name": "apple",
//     "price": 100
//   }
// ]

const resultFind = data.find( d => {
  return d.name === 'apple';
})
console.log("resultFind = " + JSON.stringify(resultFind, undefined, 2));
// resultFind = {
//   "id": 1,
//   "name": "apple",
//   "price": 100
// }

const resultFind2 = data.reverse().find( d => {
  return d.name === 'apple';
})
console.log("resultFind2 = " + JSON.stringify(resultFind2, undefined, 2));
// resultFind2 = {
//   "id": 5,
//   "name": "apple",
//   "price": 100
// }

const resultReduce = data.reduce( (prev, curr) => {
  return {
    id: 6,
    name: prev.name + curr.name,
    price: prev.price + curr.price
  }
})
console.log("resultReduce = " + JSON.stringify(resultReduce, undefined, 2));
// resultReduce = {
//   "id": 6,
//   "name": "applebananacherryappleapple",
//   "price": 1100
// }

const resultReduceRight = data.reduceRight( (prev, curr) => {
  return {
    id: 6,
    name: prev.name + curr.name,
    price: prev.price + curr.price
  }
})
console.log("resultReduceRight = " + JSON.stringify(resultReduceRight, undefined, 2));
// resultReduceRight = {
//   "id": 6,
//   "name": "appleapplecherrybananaapple",
//   "price": 1100
// }

const resultFindIndex = data.findIndex( d => {
  return d.name === 'apple';
})
console.log("resultFindIndex = " + JSON.stringify(resultFindIndex, undefined, 2));
// resultFindIndex = 0
const resultFindIndex2 = data.reverse().findIndex( d => {
  return d.name === 'apple';
})
console.log("resultFindIndex2 = " + JSON.stringify(resultFindIndex2, undefined, 2));
// resultFindIndex2 = 0

const resultIncludes = data.includes(
  {
    "id":1,
   "name":"apple",
    "price":100
  }
)
console.log("resultIncludes = " + JSON.stringify(resultIncludes, undefined, 2));
// resultIncludes = false

const copyOfdata0 = {...data[0]};
const resultIncludes2 = data.includes(copyOfdata0)
console.log("resultIncludes2 = " + JSON.stringify(resultIncludes2, undefined, 2));
// resultIncludes2 = false

const data0 = data[0];
const resultIncludes3 = data.includes(data0)
console.log("resultIncludes3 = " + JSON.stringify(resultIncludes3, undefined, 2));
// resultIncludes3 = true

const resultSome = data.some( d => {
  return d.name === 'apple';
})
console.log("resultSome = " + JSON.stringify(resultSome, undefined, 2));
// resultSome = true
const resultSome2 = data.some( d => {
  return d.name === 'hoge';
})
console.log("resultSome2 = " + JSON.stringify(resultSome2, undefined, 2));
// resultSome2 = false

const resultEvery = data.every( d => {
  return d.name === 'apple';
})
console.log("resultEvery = " + JSON.stringify(resultEvery, undefined, 2));
// resultEvery = false
const resultEvery2 = data.every( d => {
  return d.name === 'hoge';
})
console.log("resultEvery2 = " + JSON.stringify(resultEvery2, undefined, 2));
// resultEvery2 = false

const resultMap = data.map( (d) => {
  return d;
})
console.log("resultMap = " + JSON.stringify(resultMap, undefined, 2));
// resultMap = [{"id":1,"name":"apple","price":100},{"id":2,"name":"banana","price":200},{"id":3,"name":"cherry","price":300},{"id":4,"name":"apple","price":400},{"id":5,"name":"apple","price":100}]

おわりに

時々素振りします。

Discussion