0

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-02-24

# はじめに

JavaScriptのArrayやObjectには便利なメソッドが備わっています．

### アロー関数式

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

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

# Arrayのメソッド

### 1. find

``````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

``````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

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

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

### 4. includes

``````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

``````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

``````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}
``````

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

であればなぜJSに用意されているメソッドをわざわざ覚えて使うのか？

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

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

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

# 参考

Register as a new user and use Qiita more conveniently

1. You get articles that match your needs
2. You can efficiently read back useful information
What you can do with signing up
0