はじめに
reactで実装しているいて、配列を追加、削除、変更したり値が存在しているかチェックしたりします。
その中で、ある一次元配列の値が連想配列の中に全て存在するかチェックする方法がネットで見当たらず時間が少しかかったので備忘録として残します。
(ベストな書き方ではないかもですが。。)
everyメソッドとsomeメソッドを使用
everyメソッドは、配列内の値全てがメソッド内の条件式でtrueの場合にtrueを返してくれます。
そしてsomeメソッドは、配列内の値の一つでもメソッド内の条件式でtrueの場合にtrueを返してくれます。
この二つのメソッドを使用することで下記に一次元配列の値が連想配列内に存在するかチェックすることができます。
fruits = ["apple", "lemon", "banana"]
fruitsMenuExpectTrue = [
{fruitName: "apple", price: 200},
{fruitName: "banana", price: 100},
{fruitName: "lemon", price: 50}
]
fruitsMenuExpectFalse = [
{fruitName: "grape", price: 200},
{fruitName: "banana", price: 100},
{fruitName: "lemon", price: 50}
]
//fruits配列の値が、fruitsMenuExpectTrueの配列内に全て存在しているか一つづつチェックしてくれる
fruits.every(fruit => fruitsMenuExpectTrue.some(Menu => Menu.fruitName === fruit)
//=> trueを返す
fruits.every(fruit => fruitsMenuExpectFalse.some(Menu => Menu.fruitName === fruit)
//=> falseを返す
終わりに
上記の様な記述で配列に値の有無を判断して、どの処理を走らせるか判断しています。
ただ使うメソッドが増えすぎたり、配列名が長いと地獄的に読みづらいコードになってしまうので気をつけないとなと思います。