LoginSignup
5
2

More than 3 years have passed since last update.

[js]配列の中身がObjectのとき、特定の要素があるかチェックするうまい方法

Last updated at Posted at 2020-02-06

配列の中に特定の要素があるかチェックする方法はいくつかあります。
ここではpersonsというオブジェクト要素を複数もつ配列で考えてみます。

まずは、まあよくある書き方

例1

sample.js
const persons = [
    {name: 'takada'},
    {name: 'yamada'},
    {name: 'tanaka'},
    ]
const target = 'takada'

let hasTargetName = false
persons.map((person) => {
    if (person.name === target) {
        hasTargetName = true
    }
})

console.log(hasTargetName) //trueが表示される

for文でもいいですが、mapを使って配列の要素を見ていって、targetと一致するものがあるかを調べています。でもなんか、すごく原始的な感じがして嫌だ。。。

例2

調べてみるとincludesというのがあった。使い方はどれどれ・・・

const array = ['a' , 'b', 'c']
const target = 'a'
console.log(array.includes(target)) //trueが表示される

なるほど、簡単ですね。でも今回は配列の中身がオブジェクトだからこう書けばいいのか?

const persons = [
    {name: 'takada'},
    {name: 'yamada'},
    {name: 'tanaka'},
    ]
const target = 'takada'
const hasTargetName = persons.includes({name: target})
console.log(hasTargetName) //falseが表示される

おいおいおい、falseになったぞ!!
どうやらincludesはオブジェクト比較のときは参照元が一致しているかを見てるようです。
試しにこう書いたらtrueになった。ふーん。

const persons = [
    {name: 'takada'},
    {name: 'yamada'},
    {name: 'tanaka'},
    ]
const target = persons[0] //ここを変えてみた
const hasTargetName = persons.includes(target)
console.log(hasTargetName) //trueが表示される

とりあえず、includesはこの場合には使えないってのは分かりました。

例3 じゃあどうするの!

どうやら、someというナイスガイがいるらしい。使い方は、ほぼincludesと同じだが比較する値を渡すのではなく、booleanを返す関数を渡してあげればいいようだ。

const persons = [
    {name: 'takada'},
    {name: 'yamada'},
    {name: 'tanaka'},
    ]
const target = 'takada'
const hasTargetName = persons.some((person) => {return person.name === target})
console.log(hasTargetName) //trueが表示される

いいじゃないか!!!使いやすい!!!
ついでに、冗長な書き方を修正して・・・

const persons = [
    {name: 'takada'},
    {name: 'yamada'},
    {name: 'tanaka'},
    ]
const target = 'takada'
const hasTargetName = persons.some(person => person.name === target)
console.log(hasTargetName) //trueが表示される

はい、スッキリです☆彡
今後使っていこう~!

5
2
0

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
  3. You can use dark theme
What you can do with signing up
5
2