【JavaScript】配列を操作する際よく使うメソッド８つ #JavaScript

はじめに

JavaScriptで配列を操作するメソッドのうち、頻出のもの８つをまとめました。

見返しやすいように、操作する配列は各メソッド毎に記載しています。

環境

OS: macOS Catalina 10.15.1

1.filter()

Array.prototype.filter() - JavaScript | MDN

filter() メソッドは、引数として与えられたテスト関数を各配列要素に対して実行し、それに合格したすべての配列要素からなる新しい配列を生成します。

const items = [
  { name: 'Bike', price: 100 },
  { name: 'TV', price: 200 },
  { name: 'Album', price: 10 },
  { name: 'Book', price: 5 },
  { name: 'Phone', price: 500 },
  { name: 'Computer', price: 1000 },
  { name: 'Keyboard', price: 25 },
]

//filterメソッド
const filterdItems = items.filter((item) => {
  return item.price <= 100
})
console.log(filterdItems)

出力

[ { name: 'Bike', price: 100 }, 
  { name: 'Album', price: 10 }, 
  { name: 'Book', price: 5 }, 
  { name: 'Keyboard', price: 25 } ]

2.map()

Array.prototype.map() - JavaScript | MDN

map() メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。

const items = [
  { name: 'Bike', price: 100 },
  { name: 'TV', price: 200 },
  { name: 'Album', price: 10 },
  { name: 'Book', price: 5 },
  { name: 'Phone', price: 500 },
  { name: 'Computer', price: 1000 },
  { name: 'Keyboard', price: 25 },
]

//mapメソッド
const itemNames = items.map((item) => {
  return item.name
})
console.log(itemNames)

出力

[ 'Bike', 'TV', 'Album', 'Book', 'Phone', 'Computer', 'Keyboard' ]

3.find()

Array.prototype.find() - JavaScript | MDN

find() メソッドは、提供されたテスト関数を満たす配列内の最初の要素の値を返します。

const items = [
  { name: 'Bike', price: 100 },
  { name: 'TV', price: 200 },
  { name: 'Album', price: 10 },
  { name: 'Book', price: 5 },
  { name: 'Phone', price: 500 },
  { name: 'Computer', price: 1000 },
  { name: 'Keyboard', price: 25 },
]

//findメソッド
const foundItem = items.find((item) => {
  return item.name === 'Album'
})
console.log(foundItem)

出力

{ name: 'Album', price: 10 }

4.forEach()

Array.prototype.forEach() - JavaScript | MDN

forEach() メソッドは与えられた関数を、配列の各要素に対して一度ずつ実行します。

const items = [
  { name: 'Bike', price: 100 },
  { name: 'TV', price: 200 },
  { name: 'Album', price: 10 },
  { name: 'Book', price: 5 },
  { name: 'Phone', price: 500 },
  { name: 'Computer', price: 1000 },
  { name: 'Keyboard', price: 25 },
]

//forEachメソッド
items.forEach((item) => {
  console.log(item.price)
})

出力

5.some

Array.prototype.some() - JavaScript | MDN

some() メソッドは、配列の少なくとも 1 つの要素が、渡された関数によって実施されるテストに通るかどうかをテストします。

注: このメソッドは空の配列ではあらゆる条件式に対して false を返します。

const items = [
  { name: 'Bike', price: 100 },
  { name: 'TV', price: 200 },
  { name: 'Album', price: 10 },
  { name: 'Book', price: 5 },
  { name: 'Phone', price: 500 },
  { name: 'Computer', price: 1000 },
  { name: 'Keyboard', price: 25 },
]
//someメソッド
const hasInexpensiceItems = items.some((item) => {
  return item.price <= 100
})
console.log(hasInexpensiceItems)

出力

true

6.every

Array.prototype.every() - JavaScript | MDN

every() メソッドは、与えられた関数によって実行されるテストに、配列のすべての要素が通るかどうかをテストします。

注: このメソッドは空の配列ではあらゆる条件式に対して true を返します。

const items = [
  { name: 'Bike', price: 100 },
  { name: 'TV', price: 200 },
  { name: 'Album', price: 10 },
  { name: 'Book', price: 5 },
  { name: 'Phone', price: 500 },
  { name: 'Computer', price: 1000 },
  { name: 'Keyboard', price: 25 },
]
//everyメソッド
const hasExpensiceItems = items.every((item) => {
  return item.price > 100
})
console.log(hasExpensiceItems)

出力

false

7.reduce()

Array.prototype.reduce() - JavaScript | MDN

reduce() は配列の各要素に対して（引数で与えられた）reducer 関数を実行して、単一の値にします。

const items = [
  { name: 'Bike', price: 100 },
  { name: 'TV', price: 200 },
  { name: 'Album', price: 10 },
  { name: 'Book', price: 5 },
  { name: 'Phone', price: 500 },
  { name: 'Computer', price: 1000 },
  { name: 'Keyboard', price: 25 },
]

//reduceメソッド
const total = items.reduce((currentTotal, item) => {
  return currentTotal + item.price
}, 100)
console.log(total)

出力

8.includes()

Array.prototype.includes() - JavaScript | MDN

includes() メソッドは、特定の要素が配列に含まれているかどうかを true または false で返します。与えられた要素が見つかるかどうかを計算するために、 SameValueZero (ゼロの同値) アルゴリズムを使用します。

const numbers = [1, 2, 3, 4, 5]

// includesメソッド
const includesNumber = numbers.includes(7)
console.log(includesNumber)

出力

false

おわりに

最後まで読んで頂きありがとうございました

どなたかの参考になれば幸いです

参考にさせて頂いたサイト（いつもありがとうございます）

8 Must Know JavaScript Array Methods - YouTube