短いjavascriptで最大公約数を出す
yuki短いjavascriptで最大公約数をどのように出しているのか考えました。
下記のサイトにあるjavascriptで考えました。
「mebee javascript 最大公約数を求める」
https://mebee.info/2021/04/26/post-26097/
最大公約数
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>mebeeサンプル</title>
</head>
<script>
function hoge() {
// ランダムな2桁の配列を生成
const arr = new Array(2).fill().map(x => ~~(Math.random() * 100));
// 生成した配列を表示
disp(arr, "rand");
// 最大公約数を計算する関数
const f = (x, y) => y ? f(y, x % y) : x;
// 最大公約数
result.innerHTML = f(arr[0],arr[1]);
}
//フロントに表示する関数
function disp(arr, id) {
let text = [];
// 配列を利用してfor文を作成
[...arr].forEach((x, i) => text.push('<li>' + arr[i] + '</li>'))
//innerHTMLを使用して表示
document.getElementById(id).innerHTML = text.join('');
}
window.onload = () => {
// クリックイベントを登録
btn.onclick = () => { hoge(); }; // document.getElementById('btn');を省略
}
</script>
<body>
<div>
<p id="result">最大公約数</p>
<ul id="rand"></ul>
<button id="btn">実行</button>
</div>
</body>
</html> // ランダムな2桁の配列を生成
const arr = new Array(2).fill().map(x => ~~(Math.random() * 100));変数arr に 0 ~ 99 の数をランダムに2つ代入する
■ new Array(2) → 長さが２の配列
■ fill() →
第一引数 … 設定する値
第二引数 … 開始インデックス（デフォルト 0 ）
第三引数 … 終了インデックス（デフォルト array.length）
（例）const array = [1, 2, 3, 4, 5]; の場合
array.fill(4) → [4, 4, 4, 4, 4]
array.fill(6, 2) → [1, 2, 3, 6, 6]
array.fill(9, 1, 3) → [1, 9, 9, 9, 5]
■ map() → 配列の要素すべてに関数を呼び出して、新しい配列を生成する
（例）const array = [1, 3, 7, 12]; の場合
const map = array.map(x => x * 2);
→ const map = [2, 6, 14, 24];
■ ~~ → 小数の切り捨て
（例）~~(3.8) → 3
// 最大公約数を計算する関数
const f = (x, y) => y ? f(y, x % y) : x; アロー関数（関数を簡単にしたもの）を使用している
（例）
【関数】
function (a) {
return a + 100;
}
【アロー関数】
(a) => {
return a + 100;
}
function f(x, y) {
y ? f(y, x % y) : x;
}x % y → x / y のあまり
? : → 条件演算子、if文のショートカット
■ y ? f(y, x % y) : x;
y が、真なら f(y, x % y) を、偽なら x を返す
偽 → false, 0, -0, 0n, "", null, undefined, NaN
真 → 偽を除くすべての値
（例）x = 10, y = 5の場合
y が 5（真）なので f(y, x%y) を返す
→ y が 0（偽）なので x を返す
→ 結果）5
// 配列を利用してfor文を作成
[...arr].forEach((x, i) => text.push('<li>' + arr[i] + '</li>'))配列arr の各要素に対して、実行する
配列text に'<li>' + arr[i] + '</li>' を追加する
■ [...arr] → [arr[0], arr[1]]
... → 配列を展開する
（例）const arr = [1, 2, 3];
console.log(...arr) → 1 2 3
console.log([...arr]) → [1, 2, 3]
■ forEach() → 与えられた関数を配列の各要素に対して1回ずつ実行する
第一引数 … 要素の値
第二引数 … 要素のインデックス
第三引数 … 走査（先頭から順に見ていく）されている配列
■ push → 要素を追加する
（例）let text = [1, 2, 3];
text.push(4, 5, 6);
console.log(text); → [1, 2, 3, 4, 5, 6]
//innerHTMLを使用して表示
document.getElementById(id).innerHTML = text.join('');■ join → 配列の全要素を連結させた文字列を作成して返す
区切り文字はデフォルトでカンマ
（例）let text = ['a', 'b', 'c'];
console.log(text.join()) → a,b,c
console.log(text.join('')) → abc
console.log(text.join('-')) → a-b-c
window.onload = () => {
// クリックイベントを登録
btn.onclick = () => { hoge(); }; // document.getElementById('btn');を省略
}btn がクリックされたら、関数hoge を実行する
■ window.onload = 関数; → ページ全体が、cssや画像などすべてを読み込んだときに関数を実行する
■ document.getElementById → html で id が指定されている場合、省略可能
buttanタグに onclick="hoge()" を追加しても同じ
