他人が書いたjavascriptは古代文字が並んでいるように見えてしまう、ユゲタです。
もうね、a || bとか、a ? b : cとか、
変数が記号にどう影響しているのかパッと見、わからなくなります。
でも、javascriptの言語学習は、こういう記述になれるという事ですね。
記号の意味
ちなみに、この記号の意味は、
const value = a || b
これは、valueという変数に、aの値を代入するけど、その値がif判定でfalseに当たる場合はbを挿入する。という意味です。
if判定でfalseというのは、aの値がfalseまたは、nullまたは、undefinedまたは、NaNまたは、0の時を意味します。
そして、
const value = a ? b : C
これは、三項演算子という書き方で、
if(a){ value = b }else{ value = c }
これと同じ意味になります。
ホント初心者には分かりづらいですが、なれるとかなり便利な言語なんですけどね
配列操作の検索技
次のような配列データがある場合に、中のobjectをカンタンに検索する方法です。
const datas = [
{
"id" : 1,
"name" : "a",
"value" : "hoge"
},
{
"id" : 2,
"name" : "b",
"value" : "hage"
},
{
"id" : 3,
"name" : "c",
"value" : "huga"
}
]
id=1を抽出したい場合次の１文でカンタンにできます。
datas.find(e => e.id === 1)
ちなみに、idに同じ値が複数ある場合は、一番先頭のオブジェクトデータが取得されます。
{
"id" : 1,
"name" : "a",
"value" : "hoge"
}
でも単一だけじゃなく、同じ値を全部とか複数の値にマッチする全部（複数）を選択したい場合は、次のように書きます。
datas.filter(e => e.id === 2 || e.id === 3)
idが2または3の場合の結果です。
[
{
"id" : 2,
"name" : "b",
"value" : "hage"
},
{
"id" : 3,
"name" : "c",
"value" : "huga"
}
]
どうですか？カンタンでしょ？
findは、querySelectorに操作が似ていて、filterはquerySelectorAllに似ている感じがしませんか？
そんなイメージで覚えておくと便利に使えると思いますよ。
どんな時に使えばいいの？
こうしたオブジェクトを複数含んだ配列データって、データベースの検索結果のデータがこんな感じで得られる場合が多いです。
他にもAPIから取得した複数のデータもArray in Objectの形状になっている場合がほどんどなので、その配列データ内の検索を簡易に、且つ柔軟にできるという技でした。
ちなみに、それぞれ返り値がない場合は、
findはundefinedが返り、
filterは、空配列([])が変えるので、この点も覚えておけばもはや配列検索は無敵になるでしょう。
いや〜、開発が捗る捗る！
0 件のコメント:
コメントを投稿