序文フロントエンド分野では、ほとんどの作業が UI で行われるため、メモリ管理は最も見落とされやすい部分です。メモリを理解していないと、多くの問題の本質が見えず、より適切なコードを書くのが難しくなります。今回は、メモリの世界に皆さんをお連れします。 JSマジックナンバーケース1:金額の計算と振替 18.9 * 100 =1889.99999999999998 ケース2: 数学的法則の違反 0.1 + 0.2 === 0.3 // 間違い (関数 (a, b, c) { a + b + c === a + ( b + c ) を返す })(0.1, 0.2, 0.3) // 間違い ケース3: 無限ループ加算 (関数 (数値) { while(true) { (++num % 13 === 0)の場合{ 数値を返す } } })(2 ** 53) ケース4: JSON.parse JSON.parse('{"a":180143985094813214124}') //{a: 180143985094813220000} 上記の 4 つのケースから、コンピューターでの数値計算はしばしば「驚き」をもたらすことがわかります。これらの予期しない結果を防ぐために、まず JavaScript で数値がどのように保存されるかを理解する必要があります。 数値の保存コンピュータはデータを 2 進数で保存するため、数字も対応する 2 進数 (000 または 111 のさまざまな組み合わせ) に変換する必要があります。 バイナリ変換方法数値をバイナリに変換する方法を説明する例を以下に示します。
小数変換が発生した場合は、整数部分と小数部分を別々に処理する必要があります。整数 106106106 を商が 000 になるまで 222 で割り、各割り算の余り結果を 222 で取ります。 106 / 2 = 53 ... 0 53 / 2 = 26 ... 1 26 / 2 = 13 ... 0 13 / 2 = 6 ... 1 6 / 2 = 3 ... 0 3 / 2 = 1 ... 1 1 / 2 = 0 ... 1 結果は右から左に並べた余り1101010です 小数 0.69531250.69531250.6953125 を 222 倍して小数点がなくなるまで繰り返し、各乗算後の整数結果を数えます。 0.6953125 × 2 = 1.390625 ... 1 0.390625 × 2 = 0.78125 ... 0 0.78125 × 2 = 1.5625 ... 1 0.5625×2 = 1.125…1 0.125 × 2 = 0.25 ... 0 0.25 × 2 = 0.5 ... 0 0.5 × 2 = 1 ... 1 結果は左から右に並べられた整数の数字1011001である。 計算された 000 111 シーケンスを組み合わせると、変換されたバイナリ 1101010.10110011101010.10110011101010.1011001 が得られ、これは科学的記数法で表現すると 1.1010101011001∗261.1010101011001*2^61.1010101011001∗26 となります。バイナリが計算されたので、それをコンピューターに保存する必要があります。Javascript では、整数と小数は区別されず、数値は倍精度浮動小数点数の要件に従って均一に保存されます。主に次の規則が含まれます。
指数の 11 ビットには符号ビットが含まれていないため、正の指数と負の指数の効果を実現するために指数オフセットが導入されます。 図は以下のとおりです。 変換した2進数を規則に従ってメモリに格納します。まず、106.6953125106.6953125106.6953125は正の数なので、符号ビットは111になります。000は正の符号を表し、111は負の符号を表します(図では000と表示されていますが、これはタイプミスです)。 2進数 1.1010101011001∗261.1010101011001*2^61.1010101011001∗26 指数は 666 (ここでオフセット 1023 を追加する必要があります) で、2進数に変換すると 100000001011000000010110000000101 になります。指数ビットには 2 の補数を配置する必要があり、2 の補数の計算規則は次のとおりです。
[+1] = [00000001] オリジナル = [00000001] 逆 [-1] = [10000001] オリジナル = [11111110] 逆 画像インデックスを埋める必要があります 仮数部は10進数から変換された2進数で直接埋めることができます 数字は最終的にこの形式でコンピュータに保存されます なぜ 0.1 + 0.2 !== 0.3 なのでしょうか?デジタルストレージの原理を理解した後、なぜ0.1+0.2!==0.30.1 + 0.2 !== 0.30.1+0.2!==0.3なのかを分析してみましょう。 まず、0.10.10.1 0.20.20.2 0.30.30.3をそれぞれ2進数に変換します。 0.1 × 2 = 0.2 ... 0 0.2 × 2 = 0.4 ... 0 0.4 × 2 = 0.8 ... 0 0.8 × 2 = 1.6 ... 1 0.6 × 2 = 1.2 ... 1 0.2 × 2 = 0.4 ... 0 0.4 × 2 = 0.8 ... 0 0.8 × 2 = 1.6 ... 1 0.6 × 2 = 1.2 ... 1 得られた整数の桁は左から右に 000110011... のように並べられます。 0.1→0.00011(0011)∞ 0.2 × 2 = 0.4 ... 0 0.4 × 2 = 0.8 ... 0 0.8 × 2 = 1.6 ... 1 0.6 × 2 = 1.2 ... 1 0.2 × 2 = 0.4 ... 0 0.4 × 2 = 0.8 ... 0 0.8 × 2 = 1.6 ... 1 0.6 × 2 = 1.2 ... 1 0.2 × 2 = 0.4 ... 0 得られた整数の桁は左から右に 001100110... のように並べられます。 0.2→0.00110(0110)∞ 0.3 × 2 = 0.6 ... 0 0.6 × 2 = 1.2 ... 1 0.2 × 2 = 0.4 ... 0 0.4 × 2 = 0.8 ... 0 0.8 × 2 = 1.6 ... 1 0.6 × 2 = 1.2 ... 1 0.2 × 2 = 0.4 ... 0 0.4 × 2 = 0.8 ... 0 0.8 × 2 = 1.6 ... 1 得られた整数ビットは左から右に 010011001... と並べられます。 0.3→0.01001(1001)∞ 科学的記法は次のように統一的に表現される。 0.1→0.00011(0011)∞→1.(1001)∞∗2 −4 0.2→0.00110(0110)∞→1.(1001)∞∗2 −3 0.3→0.01001(1001)∞→1.(0011)∞∗2 −2 倍精度浮動小数点数はコンピュータに保存されます。末尾の赤は、バイナリが仮数部を超えていることを示しており、切り上げる必要があることを意味します。 64ビット倍精度保存後のバイナリ表現は次のようになります。 0.2→0−01111111100−(1001) 12 1010 0.3→0−01111111101−(0011) 12 0011 この時点で、0.1+0.20.1 + 0.20.1+0.20.1+0.2は0.30.30.3と等しくありません。 これが、コンピューターでの数値計算がしばしば「驚き」をもたらす理由です。 要約するJS のメモリと変数の保存に関するこの記事はこれで終わりです。JS のメモリと変数の保存に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL 8.0 以降の一般的なコマンドの詳細な説明
>>: Tomcat プロセスの CPU 使用率が高い場合のトラブルシューティング記録を記録する
目次1. 需要2. 解決策3. 最初の改善4.砂糖を加える5. 理解不能6. 問題点7. オブジェク...
この記事では、星空アニメーションを実現するための高度な CSS3 LESS のサンプルコードを次のよ...
1. デザインの方向性を明確にする<br />まず、どのユーザーを対象にデザインするのか...
目次1. 遭遇した問題2. 問題を分析する3. 本当の問題4. 解決策5. ソリューション効果1. ...
最近、業務上のボタンの増加により、ページレイアウトにボタンが多すぎて、ページが美しくなく、ユーザーエ...
Rownum は、Oracle での独自の書き込み方法です。Oracle では、rownum を使用...
Windows: NTFS、FATをサポートLinux は次のファイル形式をサポートしています: C...
1.ページを XML タイプとして宣言しないでください。ページでは UTF-8 または UTF-16...
まず、画像を見てみましょう。今日はこのエフェクトを作成します。 実は、何でもないんです。Web ペー...
目次Reactの公式サイトではライフサイクルの説明を見ることができます次に、ネストされたコンポーネン...
目次序文Vue Nativeの機能宣言的レンダリング双方向バインディングVue.js エコシステムの...
目次リナックス1. SWAPとは2. swappiness は何を調節しますか? 3. スワップ操作...
成果を達成する html <div class="コンテナ"> &l...
テキストカルーセルは私たちの日常生活で非常に一般的です。スーパーマーケットや実店舗の入り口には、テキ...
このセクションから、http モジュールの実装原理について説明します。http モジュールで非常に重...