【JS】JavaScriptで範囲を指定したランダムな数字を出力
こんにちは!今日はJavaScriptのMath.random()を用いた実用的なコードについて紹介します。
結論
●●以上●●以下のランダムな数を出力する関数はこう!
const rand = (from, to) =>
~~(from + Math.random() * (to - from + 1))
rand(11, 13) // 11, 12, 13のどれか
数字逆にしてもいいバージョンはこう!
const rand = (from, to) =>
~~(Math.min(from, to) + Math.random() * (Math.abs(to - from) + 1))
rand(13, 11) // 11, 12, 13のどれか
Math.random()について
Math.random()は0以上1未満のランダムな数を返します。0は出る。1は出ない。
Math.random()
// 0.7343417844258269
よくやる例
0以上n未満
nかけると0以上n未満になります。よくやるやつ。
Math.random() * 10
// 9.138772947138971
切り捨て
~~ で切り捨て。これ↓だと0から9のどれかが出る。
~~(Math.random() * 10)
// 7
+1
10かけてるのに0から9までなのがミスの元なので1足す。
~~(Math.random() * 11)
// 10
n以上m以下
n以上m以下にするにはn足してからm-n+1をかける。
3以上5以下ならこう。
~~( 3 + Math.random() * 3)
// 3
実用例
関数rand()を作ったわ。
**rand(【最小】, 【最大】)**みたいな使い方してね。
const rand = (from, to) =>
~~(from + Math.random() * (to - from + 1))
rand(11, 13) // 11, 12, 13のどれか
おまけ
数字逆にしてもいいバージョン
**rand(【最大】, 【最小】)**とかにしてもエラーにならないやつはこう。
const rand = (from, to) =>
~~(Math.min(from, to) + Math.random() * (Math.abs(to - from) + 1))
rand(13, 11)
カリー化
こう。
const rand = from => to =>
~~(from + Math.random() * (to - from + 1))
rand(11)(13)
カリー化+数字逆ok
const rand = from => to =>
~~(Math.min(from, to) + Math.random() * (Math.abs(to - from) + 1))
rand(13)(11)
カリー化+バッククォート
const rand = from => to =>
~~((from[0]|0) + Math.random() * ((to[0]|0) - (from[0]|0) + 1))
rand`11``13`
カリー化+バッククォート+数字逆ok
const rand = from => to =>
~~(Math.min((from[0]|0), (to[0]|0)) + Math.random() * (Math.abs((to[0]|0) - (from[0]|0)) + 1))
rand`13``11`
引数がオブジェクト
const rand = ({from, to}) =>
~~(from + Math.random() * (to - from + 1))
rand({
from: 11,
to: 13,
})
引数がオブジェクト+数字逆ok
const rand = ({from, to}) =>
~~(Math.min(from, to) + Math.random() * (Math.abs(to - from) + 1))
rand({
from: 11,
to: 13,
})
これ無限に書けるわ
結局
最初に書いたやつ使っとこう
おわり!
PREV
2019-10-06
【JS】JavaScriptのundefinedを短く書く(最短4文字)
NEXT
2020-04-29
ブログをNuxt.jsからHugoに移行し、さらにGatsby.jsに移行した話
LINK
リンク
Twitter
GitHub
TAGS
タグ
LATESTS
最新の記事
POPULAR
人気の記事
- CSS2021/04/29【CSS】右寄せの方法は結局flexが一番良さそう
- React2020/07/13【JS】Reactのstyleの使い方、書き方いろいろ
- Payment2021/10/16GooglePayでVisaタッチを使う時に知っておきたい過酷な現実【追記あり】
- Others2021/07/11Slackに予約投稿機能ができて嬉しいけどそれでもまだ少し不満な理由【追記あり】
- CSS2020/04/30【CSS】tailwind.cssでよく使うデザインパターン
- CSS2019/03/30【CSS】100vhは「一画面」ではないという罠
- CSS2020/06/09【CSS】max-font-sizeやmin-font-sizeを使いたくなったら
- Vue2019/06/29【JS】Vueの:classの書き方3通り
- JavaScript2020/09/02【JS】yarnの長所とyarnからnpmに戻ってきた理由
- React2020/06/04【JS】ReactのclassNameの色々な書き方紹介