✨
【JavaScript】分割代入を使って記述を簡略化しよう
はじめに
split() 構文を使って取得した配列にアクセスしてその情報を使用していましたが、その方法を使わなくても 分割代入（構造分解） によってスッキリ記述できる方法があります。
その方法について簡単にまとめていきます。
分割代入
配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の構文
※https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring より引用
具体例を見ていきましょう。
具体例
文字列として表された配列 pointsData を使って、速度 10m/s 以上の要素の速度 [m/s] を配列として返す upper10mpsList という関数を作成していきます。
テストケース
upper10mpsList(["100-200-10","2-313-20","422-21-100"]) --> [10,15]
input: 文字列型
output: 数値の配列
分割代入を使用しないコード例
function upper10mpsList(pointsData){
const splitedByHyphen = pointsData.map(item => {
const splited = item.split("-");
const point1 = Number(splited[0]); // 改善余地あり
const point2 = Number(splited[1]); // 改善余地あり
const time = Number(splited[2]); // 改善余地あり
const res = Math.floor((Math.abs(point1 - point2)) / time);
return res;
});
return splitedByHyphen.filter(res => res >= 10);
}
以下では、上記のように一つ一つ変数に結果を格納せず、結果を使用することができます。
分割代入を使用したコード例
function upper10mpsList(pointsData){
return pointsData.map(point => {
const [point1, point2, time] = point.split("-").map(Number);
return Math.floor(Math.abs(point2 - point1) / time);
})
.filter(res => res >= 10);
}
一つ選択肢は増えましたでしょうか？
何かの参考になれば幸いです。
最後までお読みいただき、ありがとうございました。
参考URL
Discussion