javascript - Array.prototype.find()

仕事で身に付けた技術や仕事以外で身に付けた知識を、自分用の備忘録として投稿していきたいと思います。

今日の内容

会社で先輩方にしていただいた、Vue.jsで書いたコードのフィードバックで、javascriptの関数であるArray.prototype.find()を初めて使ったので、備忘録として残します。

初めて使った関数

• Array.prototype.find()
  配列から指定した条件をクリアした最初の要素を返す。クリアした要素がなければ undefined を返す。

使うきっかけになったコード(サンプル)

配列型の２つの変数newArrayとoldArrayがある。
newArrayの要素がoldArrayの中になければその要素を返すというコードを書いた。返ってくる要素は多くて1つであると分かっている。

before.vue

this.oldArray.filter(
  (value)=>this.newArray.indexOf(value) === -1
);

before.vueの良くないところ

before.vueでは、oldArrayの要素全てを調べて、条件をクリアする要素からなる新しい配列を作成する。返ってくる要素は多くて1つと分かっているので、条件をクリアした最初の要素を見つけるとその要素をreturnするfind()を使って書く方が、無駄な処理がなくなる。

コードの改善

after.vue

this.oldArray.find(
  (value)=>this.newArray.indexOf(value) === -1
);

おまけ

返り値は異なるが同じ処理をしている関数がある。

• Array.prototype.find()
  配列から指定した条件をクリアした最初の要素の位置を返す。クリアした要素がなければ -1 を返す