ウェブフロント
- angular
- corewebvitals
- editorconfig
- gatsby
- hls
- html
- javascript
querySelectorAllで取得した要素は配列ではないらしい
JavaScript 配列内のオブジェクトの更新ってどうする?
デバッグ関数とかnullチェック関数をutil/index.tsにおいとけば楽なことに今頃気づいた。
ブラウザからジャイロセンサーを使ってみる
JS 画像のアップロード、プレビュー機能を実装
「数値から各桁の値を取り出す処理」って言われたら数学的な処理が一番に思い浮かぶけど、JSならそんなことなかった。
Callback時代の関数をPromise化する
個人的実装されてほしいECMA Script Proposal
JavaScriptのprototypeを使う
音声をなみなみさせる
AudioWorkletとAudioWorkletProcessorを使って音声のビジュアライゼーション
- next
- nuxt
- playwright
- prettier
- react
- reactnative
- tensorflowjs
- tools
- typescript
- wasm
- websocket
- ポエム
- 開発環境
サーバー
その他
「数値から各桁の値を取り出す処理」って言われたら数学的な処理が一番に思い浮かぶけど、JSならそんなことなかった。
数値から各桁の値を取り出す
仕様
入力: 数値
number
出力: 各桁の値の配列
number[]
数学的な処理
const classifyByDigits = (n: number): Array<number> => {
const values: Array<number> = [];
while (n) {
const value = n % 10;
values.push(value);
n = Math.floor(n / 10);
}
return values.reverse();
};
console.log(classifyByDigits(123)); // [1, 2, 3]
解説
入力を123とすると、
1回目
まず123を10で割った余りは、3
配列:
[3]
123を10で割る(切り捨て)と、12
2回目
12を10で割った余りは、2
配列:
[3, 2]
12を10で割る(切り捨て)と、1
3回目
1を10で割った余りは、1
配列:
[3, 2, 1]
1を10で割る(切り捨て)と、0
おわり。
文字列として処理
普通は上の処理が一番に思い浮かぶと思うのですが、JS(TS)の場合は文字列として処理することでスッキリしたコードを書くことができます。
const classifyByDigits = (n: number): Array<number> =>
[...n.toString()].map((n) => Number(n));
解説
123を入力とすると、
文字列にする
.toString
: '123'スプレッド構文で配列として展開
[...string]
: ['1', '2', '3']配列の中身を数値に変換
.map
: [1, 2, 3]これだけで実現ができます。
考察
JSの場合 体感 、数値 => 文字列 => 配列 の順で色々なメソッドが使える気がしますね。
Thanks you for reading.