今回はJavaScriptで配列の特定の条件に合致した値を更新する方法を解説します。
配列で特定の条件に合致した値を更新する方法
map()を使って条件を満たす場合は値を更新したものをreturnすればokです。以下のように書きます。
const array = [1, 2, 3, 4, 5];
const newArray = array.map((item) => {
if (item % 2 === 0) { // 条件（今回は偶数の数字の場合）
return item * 2; // 更新した値を返す
}
return item;
// (以下のような短縮記法でも同じ結果が返る)
// return item % 2 === 0 ? item * 2 : item;
});
console.log(newArray); // [1, 4, 3, 8, 5]
ifの条件に合致する場合は更新した値をreturnし、それ以外はそのままの値をreturnします。これで配列内の特定の条件に合致した値のみを更新できるわけです。
またmap()は必ずreturnが必要なので忘れないようにしましょう。
Vue3を使っていて配列のrefをそのまま更新したい場合は以下のように書いても大丈夫です。
<script setup>
const array = ref([1, 2, 3, 4, 5]);
// 配列のrefをそのまま更新
array.value = array.value.map((item) =>({
// 処理
});
</script>元々のrefに更新したあとのrefをそのまま入れればrefが更新されるという感じですね。
まとめ
特定の条件を満たす場合に配列の値を更新したい場合はmap()を使って更新した値をreturnすればokです。
やりたいこと的に考えるとfind()やfilter()が使えそうな気がしますが、更新対象の値を取得したところで元の配列が更新できないのでは？ってなるんですよね。
地味に引っかかりそうな内容なので頭に入れておくと役に立つと思います。
