## Math

Mathは数学を司る標準組み込みオブジェクトです。
定数や関数が搭載されています。

## Math.abs()

絶対値(Absolute value)を返します。absはabsolute: 絶対の意味を持つ。

```js
Math.abs(-10)
// 10
Math.abs(10)
// 10
```

※絶対値: 原点0からの距離をあらわす値のこと。

## Math.sign()

引数に渡された数値の符号を返します。Number以外はNaNが返ります。
数値の符号を取得したい場合に使用します。ちなみにsignは符号の意味を持つ。

```js
Math.sign(100)
// 1
Math.sign(-999)
// -1
Math.sign(0)
// 0
```

Math.abs()とMath.sign()の組み合わせ
絶対値と符号を掛け合わせる。

```js
var exampleFunc = function (x) {
  return Math.abs(x) * Math.sign(x)
}
exampleFunc(-100)
// -100
```

## Math.pow()

累乗の計算を行う。Power(累乗)の略。

```js
Math.pow(base, exponent)
Math.pow(2, 31) // 2147483648
Math.pow(-2, 31) // -2147483648
```

※累乗の指数
※冪乗の定義は、自然数・整数という縛りがない

## Math.trunc()

引数として与えた数の小数部の桁を取り除くことによって整数部を返します。
ちなみにtruncは切り捨ての意味です。

```js
Math.trunc(42.195)
// 42
```

## Math.floor()

与えられた数値以下の最大の整数を返します。

```js
Math.floor(5.9)
// 5
Math.floor(-5.9)
// -6
```

## 10進数と16進数の変換

16進数への変換は、`Number.prototype.toString(16)`

```js
Number(2147483647).toString(16) // "7fffffff"
Number(-2147483648).toString(16) // "-80000000"
// ※-2147483647はMath.pow(2, 31) - 1
```

先頭に`0x`を付けると、16進数であることを示している。付けないと構文上エラーが発生する。

16進数から10進数への変換は、`Number.parseInt("16進数", 16)`または、グローバルの`parseInt("16進数", 16)`

```js
parseInt("7fffffff", 16) // 2147483647
parseInt("-80000000", 16) // -2147483648
```

## マメ

符号付き32ビット整数は -2の32乗から2の32乗-1で表現される。

JSの最大値: `Number.MAX_SAFE_INTEGER`(9007199254740991)
JSの最小値: `Number.MIN_SAFE_INTEGER`(-9007199254740991)

※Numberの静的プロパティ
※Mathは数学でNumberは数値を扱う

## 参考

- [Math](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math)
- [Number](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number)

JavaScriptの組み込みオブジェクトMathを学ぶ

<h2>Math</h2>
<p>Mathは数学を司る標準組み込みオブジェクトです。
定数や関数が搭載されています。</p>
<h2>Math.abs()</h2>
<p>絶対値(Absolute value)を返します。absはabsol...

非同期処理を挟み、`window.open()`を実行すると、ポップアップブロックに引っかかる。

（Reactで実装）

```ts
const handleClick = async () => {
  try {
    const url = await getURL() // 非同期処理
    open.window(url, '_blank')
  } catch (e) {
    console.error(e)
  }
}
```

とにかく別タブで開きたい。

## 回避策1

先に空のwindowを開き、後でurlを入れる。

errorなどでcloseなどを行う。

（手元のChrome,Safari,Edge,Firefoxでは機能した）

```ts
const handleClick = async () => {
  try {
    let openWindow = window.open('', '_blank')
    const url = await getURL() // 非同期処理
    openWindow.localtion.href = openWindow
  } catch (e) {
    openWindow.close()
    console.error(e)
  }
}
```

https://stackoverflow.com/questions/2587677/avoid-browser-popup-blockers#answer-25050893

## 回避策2

諦めて、処理を分ける。

```ts
const [targetURL, setTargetURL] = useState('')

const handleGenerateURL = async () => {
    try {
    const url = await getURL() // 非同期処理
    setTargetURL(url)
  } catch (e) {
    console.error(e)
  }
}

const handleClick = async () => {
  targetURL && window.open(targetURL, '_blank')
}
```

## 回避策3

`useEffect()`を使用して、`{ href && <a href={href} />}`のようにセットしておく

window.open時のポップアップブロックの回避

```js
const arr = [
  {
    id: 1,
    age: 18
  },
  {
    id: 2,
    age: 20
  }
];

// idが消える
const output = arr.map(({ id, ...a }) => a);
console.log("output:", output);
```

[javascript - スプレッド演算子からプロパティを削除するには? - スタックオーバーフロー](https://stackoverflow.com/questions/56155922/how-to-delete-property-from-spread-operator)

[Destructuring assignment - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Rest_in_Object_Destructuring)

JS Objectの配列から特定のKeyを消す

## 特定の単語を抽出する

[danger/danger-js: ⚠️ Stop saying "you forgot to …" in code review](https://github.com/danger/danger-js)などで抽出するときに使用する。

```js
const keyword = "lookup";
const content = "aaaa lookup"
console.log('1:',content.match(new RegExp(`\b${keyword}\b`))) // Bad
console.log('2:', content.match(new RegExp(`\\b${keyword}\\b`))) // Good

// https://stackoverflow.com/questions/25938990/regex-b-word-boundary-not-works
const keyword2 = "lookup";
const content2 = "aaaa \blookup\b"
console.log('2-1:',content2.match(new RegExp(`\b${keyword2}\b`))) // match
```

`\b`: 単語境界マッチ。空白のことかな？

テンプレートリテラルが最初に実行されるのでエスケープしないといけない？

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp#%E3%82%B3%E3%83%B3%E3%82%B9%E3%83%88%E3%83%A9%E3%82%AF%E3%82%BF%E3%83%BC%E3%81%AE%E3%83%95%E3%83%A9%E3%82%B0 書いてあった

> コンストラクター関数を使用する場合は、通常の文字エスケープ規則 (文字列内に特殊文字が含まれるとき、前に \ を付加する) が必須です。

JS 正規表現まとめ

- [regex - Using JavaScript to check whether a string contains Japanese characters (including kanji) - Stack Overflow](https://stackoverflow.com/questions/15033196/using-javascript-to-check-whether-a-string-contains-japanese-characters-includi)
- [Unicode Kanji Code Table](http://www.rikai.com/library/kanjitables/kanji_codes.unicode.shtml)

```ts
// ひらがな・全角カタカナ・漢字・アルファベットを許容
value.match(/^[a-zA-Z\u3040-\u309f\u30a0-\u30ff\u4e00-\u9faf\u3400-\u4dbf]+$/))
```

全角１や全角！を排除しやすくするために、半角カタカナも排除している。

 JS 日本語のバリデーション

JSで最後の文字列を取得する

https://github.com/remarkjs/react-markdown

[GitHub](https://github.com/remarkjs/react-markdown)

Markdownでいい感じにOGPを表示する

再起関数を書く機会にパフォーマンスが気になったのでメモ。

```js
const startTime = performance.now(); // 開始時間
someFunc(); // 計測する処理
const endTime = performance.now(); // 終了時間
console.log(endTime - startTime); // 何ミリ秒かかったかを表示する
```

計測結果

```
map: 0.19999998807907104
for: 0.7000000476837158
```

結論: mapの方が早い

forEachとfor...ofとforの中では、forEachが一番パフォーマンスがよく。forEachとmapでは、mapの方が良いみたい。

他のもの

```ts
if (Array.isArray(action.payload)) {
  state.items = [...state.items, ...action.payload]
} else {
  state.items = [...state.items, action.payload]
}
```

```ts
const payload = action.payload
const pushed = Array.isArray(payload) ? payload : [payload]
state.items.push(...pushed)
```

```
0.20000004768371582
0.30000007152557373
```

- [Performance of JavaScript .forEach, .map and .reduce vs for and for..of](https://leanylabs.com/blog/js-forEach-map-reduce-vs-for-for_of/)
- [JavaScriptで任意の処理にかかる時間を計測する](https://sbfl.net/blog/2017/12/01/javascript-measure-time/)


JSで関数の実行時間を調べる

## 問題

重い処理と軽い処理が混在するケースで、いい感じにローディングを表示させたいが、__処理が早い場合、ローディングがチラついてしまう。__

## 解決策

処理が早すぎる場合を考慮して、`1000ms(1秒)　-　実行時間`表示を遅延させ、`1000ms以上`実行時間がある場合は、遅延時間`0ms`にする。

## コード

```tsx
const [isLoading, setIsLoading] = useState(false)

const handleUpdate = () => {
  setIsLoading(true) // ローディング状態にする
  const startTime = new Date().getTime()　// 計測開始時間
  dispatch(update())
    .then(() => {})
    .catch(() => {})
    .finally(() => {
      const currentTime = new Date().getTime()　// 計測終了時間
      const executionTime = currentTime - startTime　// 実行時間
      const delayTime = 1000 - executionTime　// 表示を遅延させる時間
      // ローディング状態を解除する
      setTimeout(() => setIsLoading(false), Math.max(delayTime, 0))
    })
}
```

### ショートコード

```tsx
setTimeout(() => setIsLoading(false), Math.max(1000 - (currentTime - startTime), 0))
```

## hooksを作る

凝縮性

[javascript-useStatesetメソッドは変更をすぐには反映しません-StackOverflow](https://stackoverflow.com/questions/54069253/the-usestate-set-method-is-not-reflecting-a-change-immediately)

```ts
import { useState } from 'react'

export const useLoading = () => {
  const [isLoading, setIsLoading] = useState(false)
  let startTime = 0

  const startLoading = () => {
    setIsLoading(true)
    startTime = new Date().getTime()
  }

  /**
   * ローディングを終了する
   * @param minWaitTime ローディングが完了するまでの最小待ち時間
   */
  const endLoading = (minWaitTime: number = 1000) => {
    const currentTime = new Date().getTime()
    const executionTime = currentTime - startTime
    const delayTime = minWaitTime - executionTime
    setTimeout(() => {
      setIsLoading(false)
      startTime = 0
    }, Math.max(delayTime, 0))
  }

  return { isLoading, startLoading, endLoading }
}

```

## 解説

実行時間が1000ms以下の場合、`delayTime`は、`0 ~ 999`の値になる。

実行時間が1000ms以上の場合、`delayTime`は、`-(マイナス)`になるので、`Math.max(delayTime, 0))`で0が返され、遅延時間が0msになる。

## 参考

- [Math.max() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/max)
- [javascript-useStatesetメソッドは変更をすぐには反映しません-StackOverflow](https://stackoverflow.com/questions/54069253/the-usestate-set-method-is-not-reflecting-a-change-immediately)

JavaScript 実行時間・遅延時間の計算

## Formula

1, 1, 2, 3, 5, 8, 13, 21.... と続いていく数式

$
Fn = Fn-1 + Fn-2 
$

## Noob

```js
function fib(n) {
  if (n === 0 || n === 1) {
    return 1;
  } else {
    return fib(n - 1) + fib(n - 2);
  }
}

// 出力
console.log(fib(0)); // 1
console.log(fib(1)); // 1
console.log(fib(2)); // 2
console.log(fib(3)); // 3
console.log(fib(4)); // 5
console.log(fib(50)); // stackoverflow
```

> スタックオーバーフロー ≒ メモリ不足。コールスタックを超えていった

## Student

```ts
const fib = (n: number): number => (n <= 1 ? n : fib(n - 1) + fib(n - 2));

console.log("fib:", fib(50)); // stackoverflow
```

## Expert

```ts
  const memoFib = (n: number) => {
    const memo = new Map();
    memo.set(0, 0);
    memo.set(1, 1);
    const fib_ = (n: number) => {
      if (memo.has(n)) {
        return memo.get(n);
      }
      const result: number = fib_(n - 1) + fib_(n - 2);
      memo.set(n, result);
      return result;
    };
    return fib_(n);
  };

  console.log(memoFib(50)); // 👌
```

## 学び

- __参照透過性__: 入力(渡す値)が同じであれば、出力（戻り値）が同じであるという性質
- __副作用__: 関数とは引数を受け取り、値を返すものである。それ以外の振る舞いを副作用と名付けた。望まれない子か救世主か。それは、生みの親に委ねられた。子供に罪はないと人々は豪語する。
- __純粋関数__: 副作用のないピュアな関数 


JavaScriptの組み込みオブジェクトMathを学ぶ

Math

Math.abs()

Math.sign()

Math.pow()

Math.trunc()

Math.floor()

10進数と16進数の変換

マメ

参考

Related

Tags

Share

Table of Contents