[javascript] forEachとspliceを使う変わりにfilterをつかう

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

今日の内容

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

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

vueインスタンスのdata()内で定義された配列型の変数populationがある。

変数populationをvueインスタンス内で定義

<script>
export default {
  data() {
    return {
      population: [],
    };
  },
}

populationには、ユーザーが選択した都道府県ごとの年ごと(year)の総人口(value)と都道府県コード(code)が格納された配列を格納する。

格納されている要素のひとつ

{"data": [{ "year": 1980, "value": 12817 }, { "year": 1985, "value": 12707 }, { "year": 1990, "value": 12571 }, { "year": 1995, "value": 12602 }, { "year": 2000, "value": 12199 }, { "year": 2005, "value": 11518 }, { "year": 2010, "value": 10888 }, { "year": 2015, "value": 10133 }, { "year": 2020, "value": 9275 }, { "year": 2025, "value": 8431 }, { "year": 2030, "value": 7610 }, { "year": 2035, "value": 6816 }, { "year": 2040, "value": 6048 }, { "year": 2045, "value": 5324 }], "code":11}

ここから、選択解除した都道府県の情報が格納されている要素を削除するために下のコードbefore.vueを書いた。
removeCode[]には、選択解除した都道府県コードが1つだけ格納されている。
forEachで与えられた配列の各要素に対して、「選択解除された都道府県コードが含まれている要素を、spliceでpopulationから削除する」処理を繰り返している。

before.vue

let i = 0;
this.population.forEach((p) => {
  if (p.code === removeCode[0]) {
    this.population.splice(i, 1);
  }
  i = i + 1;
});

forEachの中でspliceをすべきでない理由

forEachの中でspliceをすると、意図しない結果を返してくることがある。

コードの改善

forestとspliceを使わずにbefore.vueと同じ結果を返す処理を書くには、Array.prototype.filter()を使う。これによってコードを短くすることもできた。

filter() メソッドは、与えられた関数によって実装されたテストに合格したすべての配列からなる新しい配列を生成します。

引用元

改善したコード

after.vue

this.population = this.population.filter(function (p) {
  return p.code !== removeCode[0];
});