はじめに

JavaScriptのArrayやObjectには便利なメソッドが備わっています．
適切に使ってコードを読みやすく保ちましょう，というお話です．
個人的によく使うメソッドを紹介していきます．

アロー関数式

本記事のコードではアロー関数式を用います．アロー関数式は関数式の代替構文です．
以下の2文は同じ意味になります．(他にも書き方は色々あります．)

// 伝統的な関数
let double = function (val) {
    return val*2
}

// アロー関数
let double = (val) => val*2

Arrayのメソッド

1. find

引数として与えたテスト関数を配列の先頭要素から適用し，一番最初に合格した(truthyな値を返した)要素を返します．どれも合格しなければundefinedを返します．

let ary = [
    {val: 100, name: 'aaa'},
    {val: 200, name: 'bbb'},
    {val: 300, name: 'ccc'},
]
ary.find((elm) => elm.val == 200)
// -> {val: 200, name: 'bbb'}
ary.find((elm) => elm.name == 'ddd')
// -> undefined

2. findIndex

引数として与えたテスト関数を配列の先頭要素から適用し，一番最初に合格した(truthyな値を返した)要素の位置を返します．どれも合格しなければ-1を返します．

let ary = [
    {val: 100, name: 'aaa'},
    {val: 200, name: 'bbb'},
    {val: 300, name: 'ccc'},
]
ary.findIndex((elm) => elm.val == 200)
// -> 1
ary.findIndex((elm) => elm.name == 'ddd')
// -> -1

3. indexOf

引数として与えた要素を先頭から検索し，一番最初に見つけた位置を返します．見つからなければ-1を返します．

let ary = [
    {val: 100, name: 'aaa'},
    {val: 200, name: 'bbb'},
    {val: 300, name: 'ccc'},
]
let target = ary[1]
ary.indexOf(target)
// -> 1

要素の中身までは見ません．Objectなどの場合は同じインスタンスでなければいけません．

[0,1,2].indexOf(2)
// -> 2
[{val:0}, {val:1}, {val:2}].indexOf({val:2})
// -> -1

4. includes

引数として与えた要素が配列内に含まれるかどうかをtrueかfalseで返します．

let ary = [
    {val: 100, name: 'aaa'},
    {val: 200, name: 'bbb'},
    {val: 300, name: 'ccc'},
]
let target = ary[1]
ary.includes(target)
// -> true

こちらもindexOfと同様，要素の中身までは見ません．

[0,1,2].includes(2)
// -> true
[{val: 0}, {val: 1}, {val: 2}].includes({val: 2})
// -> false

5. filter

引数として与えたテスト関数に合格する要素のみを残し，新しい配列を生成して返します．

let ary = [{val: 100}, {val: 150}, {val: 200}, {val: 250}]
ary.filter((elm) => elm.val%100 == 0)
// -> [{val: 100}, {val: 200}]
ary.filter((elm) => elm.val >= 200)
// -> [{val: 200}, {val: 250}]

6. map

引数として与えた関数を各要素に適用し，その結果からなる新しい配列を生成して返します．

let ary = [
    {val: 100, name: 'aaa'},
    {val: 200, name: 'bbb'},
    {val: 300, name: 'ccc'},
]
ary.map((elm) => {
    return {val: elm.val/100, name: elm.name[0]}
})
// -> [{val: 1, name:'a'}, {val: 2, name:'b'}, {val: 3, name:'c'}]

7. every

配列の全要素が，引数として与えたテスト関数に合格するかどうかをtrueかfalseで返します．

let ary = [
    {val: 100, name: 'aaa'},
    {val: 200, name: 'bbb'},
    {val: 300, name: 'ccc'},
]
ary.every((elm) => elm.val%100 == 0)
// -> true
ary.every((elm) => elm.val == 200)
// -> false

8. some

配列内の少なくとも1つの要素が，引数として与えたテスト関数に合格するかどうかをtrueかfalseで返します．

let ary = [
    {val: 100, name: 'aaa'},
    {val: 200, name: 'bbb'},
    {val: 300, name: 'ccc'},
]
ary.some((elm) => elm.val%100 == 0)
// -> true
ary.some((elm) => elm.val == 200)
// -> true

Objectのメソッド

9. assign

1つ以上のコピー元オブジェクトから列挙可能なプロパティを，コピー先オブジェクトにコピー(シャローコピー)します．

let obj1 = {val: 100, name: 'aaa'}
let obj2 = {val: 200, age: 20}
Object.assign(obj1, obj2)
// obj1 -> {val: 200, name: 'aaa', age: 20}
// obj2 -> {val: 200, age: 20}

複数のオブジェクトを結合した「新しい」オブジェクトを作成したい場合は以下のようにも書けます．

let new_obj = {...obj1, ...obj2}
// new_obj -> {val: 200, name: 'aaa', age: 20}
// obj1 -> {val: 100, name: 'aaa'}
// obj2 -> {val: 200, age: 20}

10. fromEntries

キーと値の組み合わせのリストから，オブジェクトに変換します．
(個人的にこのメソッドは分かりづらいので，for文で書いても良いと思います．)

let items = [['val', 100], ['name', 'aaa'], ['age', 20]]

Object.fromEntries(items)
// -> {val: 100, name: 'aaa', age: 20}

for文で書くなら以下．

let items = [['val', 100], ['name', 'aaa'], ['age', 20]]

let obj = {}
for (let [k,v] of items) {
    obj[k] = v;
}
// obj -> {val: 100, name: 'aaa', age: 20}

なぜ用意されているメソッドを使うべきか？

本記事で紹介したメソッドの基本動作は簡単で，少しプログラミングを勉強した方であればfor文などを使って自力で書けると思います．
であればなぜJSに用意されているメソッドをわざわざ覚えて使うのか？
私は以下の理由を挙げます．

バグを生んでしまう可能性が減る
何の処理なのか一目で分かる
行数が少なくなり，プログラムの見通しが良くなる

いくら経験を積んでも，間違い(=バグ)は起きます．少しでもバグの発生要因になることは減らしましょう．
また，未来の自分や他人がそのプログラムを見るときのために，わかりやすさは重要です．

JavaScriptの動作は比較的早いですし，ブラウザであれば処理するデータもそこまで大きくないことが多いです．
そのため個人的には，少しぐらい処理が冗長になったとしても，用意されているメソッドを使うべきだと思っています．

参考

紹介した以外にもいくつかのメソッドが用意されています．
詳しい仕様などはMDN Web Docsが参考になると思います．

【JavaScript】Array, Object周りのメソッドを活用しよう