RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのITエンジニアによる技術ブログです。

トップ > JavaScript > JavaScriptのArray関数【まとめ】

JavaScriptのArray関数【まとめ】

JavaScript

f:id:tech-rakus:20210802154834p:plain

はじめに

こんにちは。UI開発課のmtaaaです。UI開発課のフロントエンドチームでは、定期的にメンバー間で勉強会や輪読会を行っております。JavaScriptのArray関数をテーマにした会で主導となって動く機会があったため、記録も兼ねて今回記事にしました。
Array関数は業務での利用機会も非常に多く、細かい部分を再確認できる良い機会になりました。それでは本題に入っていきます。

前置き

今回アロー関数を使用した記法が多く出てきますが、こちらは基本を理解している前提でサンプルコードを用意しています。

some

概要：配列内の要素が、条件に一致するか調べる。１つでも一致すればtrueを返す。

【使用例1】

const arr = [1, 2, 3, 4, 5, 6, 7, 8 ,9]
console.log(arr.some(value => value > 0))
// return true
console.log(arr.some(value => value > 5))
// return true
// ※ 後述のeveryではfalse
console.log(arr.some(value => value > 10))
// return false

【使用例2】

// 配列内に男性がいるか判定
const members = {
  taro: "male",
  ichiro: "male",
  hanako: "female"
};

const hasMale = Object.keys(members).some(function(key) {
    return members[key] === "male";
});
console.log(hasMale);
// return true

every

概要：配列内のすべての要素が、条件に一致するか調べる。配列内のすべての要素に一致した場合はtrueを返す。

【使用例1】

const arr = [1, 2, 3, 4, 5, 6, 7, 8 ,9]
console.log(arr.every(value => value > 0))
// return true
console.log(arr.every(value => value > 5))
// return false
// ※ 前述のsomeではtrue
console.log(arr.every(value => value > 10))
// return false

【使用例2】

// 配列内の要素が全て男性か判定
const members = { 
  taro: "male",
  ichiro: "male",
  hanako: "female"
};

const isMale = Object.keys(members).every(function(key) {
    return members[key] === "male";
});
console.log(isMale);
// return false

filter

概要：ある配列に対して、指定した条件に一致する要素を抽出して新しい配列を生成する。

【使用例1】

const members = ['sato', 'suzuki', 'kobayashi', 'yamamoto'];

// 名前の文字数が7より大きい要素を抽出
const result = members.filter((name) => name.length > 7)
console.log(result)
// Array['kobayashi', 'yamamoto']

// 名前の文字数が10より大きい要素を抽出
const result2= members.filter((name) => name.length > 10)
console.log(result2)
// Array[]

【使用例2】

// 東京に位置する観光地を抽出
const spots = [
{ name: 'DisneyLand', area: 'Chiba'},
{ name: 'SkyTree', area: 'Tokyo'},
{ name: 'FujiHighland', area: 'Yamanashi'},
{ name: 'GhibliMuseum', area: 'Tokyo'}
]

const tokyo = spots.filter(function(spot){
    return spot.area === 'Tokyo'
})

console.log(tokyo)
// Array[{ name: 'SkyTree', area: 'Tokyo'}, { name: 'GhibliMuseum', area: 'Tokyo'}]

find

概要：指定した条件に一致した、配列内の最初の要素の値を返す。

【使用例1】

const array = [5, 12, 8, 140, 33]

const found = array.find((element) => element > 10)
console.log(found)
// 12
// 140, 33も該当するが、一番最初の値である12が入る

const found2 = array.find((element) => element > 200)
console.log(found2)
// undefined

【使用例2】

// idが2の要素を探す
const dataList = [
  {id: 1, name: "taro"},
  {id: 2, name: "ichiro"},
  {id: 3, name: "hanako"}
]
    
const findId = 2
const findData = dataList.find((data) => data.id === findId)
console.log(findData.name)
// ichiro

findIndex

概要：指定された条件式で、配列内の最初の要素の位置を返す。条件を満たす要素がない場合は-1を返す。

【使用例1】

const array = [5, 12, 8, 130, 77]

const isLargeNumber = (element) => element > 13
console.log(array.findIndex(isLargeNumber))
// 最初に条件に一致するのは130のため、その位置である3が返却される

const isLargeNumber2 = (element) => element > 500
console.log(array.findIndex(isLargeNumber2))
// 条件に一致する要素がないため、-1が返却される

【使用例2】

// 同じプロパティを持つオブジェクトの配列から、指定したオブジェクトを削除したい。
const templates = [
  {"template": "campaign"},
  {"template": "test"},
  {"template": "seminar"}
]

const indexOfItem = templates.findIndex((element) => {return element.template === "test"})
console.log(indexOfItem)
// 1
console.log(templates[indexOfItem])
// { template: "test" }

templates.splice(indexOfItem, 1)
console.log(templates)
// [{ template: "campaign"}, {template: "seminar"}]

map

概要：与えられた関数を全ての要素に対して呼び出し、その結果を要素とする配列を生成する。

【使用例1】

// 名前のリストに一律敬称をつける
const names = ['佐藤太郎', '山田花子', '鈴木次郎']
const honorificNames = names.map((name) => {return name + `様`})
console.log(honorificNames) 
// ["佐藤太郎様", "山田花子様", "鈴木次郎様"]

【使用例2】

// 年度が変わって給料を一律上げる
interface employeeInfo {
  name: string
  salary: number
}

const info2020 = [ {name:'佐藤太郎', salary:100}, {name:'山田花子', salary:150}, {name:'鈴木次郎', salary:200} ]
const info2021 = info2020.map((info) => {return {name: info.name, salary: Number(info.salary*2)}})
console.log(info2021)
/* 
[{
  name: "佐藤太郎",
  salary: 200
}, {
  name: "山田花子",
  salary: 300
}, {
  name: "鈴木次郎",
  salary: 400
}] 
*/

forEach

概要：与えられた関数を全ての要素に対して呼び出す(返り値なし)。通常のfor文に近い感覚で扱える。

【使用例】

// 配列内の要素全てをコンソールに書き出す
const arr = ["taro", "ichiro", "hanako"]
arr.forEach( value => {console.log(value)})
/* 
"taro"
"ichiro"
"hanako"
*/

reduce

概要：配列内の要素に与えられた関数を適用して蓄積し、1つの値を返す。

【使用例1】

// 配列内の要素の合計を算出する
const arr = [1, 2, 3, 4, 5, 6, 7, 8 ,9]
const sum = arr.reduce((total, element) => total + element)
console.log(sum)
// 45

【使用例2】

// 配列内の最大値を返す
const arr = [1, 2, 3, 4, 5, 6, 7, 8 ,9]
const result = arr.reduce(function (provisional, element) {
    if(provisional > element){
        return provisional;
    } else {
        return element;
    }
});
console.log(result);
// 9

reduceRight

概要：配列内の要素に与えられた関数を一番後ろの要素から順に適用して蓄積し、1つの値を返す。

【使用例】

// 配列内の要素を逆から順に並び替える
const arr = [1, 2, 3, 4, 5, 6, 7, 8 ,9]
const reversedArr = arr.reduceRight((p, c) => [...p, c], [])
console.log(reversedArr)
// [9, 8, 7, 6, 5, 4, 3, 2, 1]

さいごに

JavaScriptのArray関数は工夫すれば他の関数と同じような処理をできるケースが多いですが、用途によって使い分けを行うことでコード量を減らせて可読性も上がるため、一フロントエンドエンジニアとして抑えておきたい領域だと改めて感じました。
今回紹介しきれなかった関数もあるため、興味が出た方は調べていただければと思います。
ここまで読んでいただきありがとうございました。

参考文献

  • エンジニア中途採用サイト
    ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております！
    ご興味ありましたら是非ご確認をお願いします。
    20210916153018
    https://career-recruit.rakus.co.jp/career_engineer/

  • カジュアル面談お申込みフォーム
    どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
    以下フォームよりお申込みください。
    forms.gle

  • イベント情報
    会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

ラクスの技術 / デザイン情報サイト
Copyright © RAKUS Co., Ltd. All rights reserved.