今日は、JavaScript に関するあまり知られていない事実をいくつか紹介します。聞いたことがあるかもしれませんが、驚くこともあるかもしれません。さっそく見ていきましょう! 1. 解体のヒント通常、多層ネストされたオブジェクトのいくつかのプロパティを使用する必要があり、それを分解して使用します。 obj = { パート1: { 名前:「ゼロワン」 年齢: 23 } } // 分解 const { part1: { name, age } } = obj // console.log(name, age) を使用します // 0123 この場合、part1 から name と age を分解した後、次のように変数 obj で part1 属性を使用することはできません。 // .... 省略 const { part1: { name, age } } = obj console.log(part1) // キャッチされない ReferenceError: part1 が定義されていません 実際、次のように複数回構造化分解することができます。 // .... 省略 const { part1: { name, age }, part1 } = obj console.log(part1) // {name: "零一", age: 23} 2. デジタルセパレーターファイル内で数値定数を定義することがある 定数 myMoney = 10000000000000 0が多すぎて、1、2、6、7…全部数えると目が回ります。どうすればいいですか? 数字の区切りを整理しましょう! 定数 myMoney = 1_000_000_000_000 console.log(myMoney) // 1000000000000 このように書いても問題はなく、数字を分けた方が直感的に分かりやすいです。 ! 3. try...catch...finally が得意なのは誰ですか?通常の関数呼び出しでは、return によって関数の実行が早期に終了するのが一般的です。 関数デモ(){ 戻り値 1 console.log('私はゼロワンです') 戻る 2 } コンソール.log(デモ()) // 1 try...catch...finally では、return によって実行が早期に終了されることはありません。 関数デモ(){ 試す { 戻り値 1 } キャッチ (エラー) { コンソール.log(エラー) 戻る 2 ついに 戻る 3 } } console.log(demo()) // 何が返されるでしょうか? ? このプログラムは何を返しますか?考えてみてください 2時間後〜 答えは3です 最終的に、finally の方が強力だという結論に達しました。 それから、いくつかのトリックをやってみましょう 関数デモ(){ 試す { 戻り値 1 } キャッチ (エラー) { コンソール.log(エラー) 戻る 2 ついに 試す { 戻る 3 ついに 戻る 4 } } } console.log(demo()) // 4 を返す 4. 現在のコールスタックを取得する関数 firstFunction() { secondFunction(); } 関数 secondFunction() { thridFunction(); } 関数 thridFunction() { console.log(新しい Error().stack); } 最初の関数(); //=> エラー // thridFunction (<anonymous>:2:17) で // secondFunction (<anonymous>:5:5) で // firstFunction (<anonymous>:8:5) で // <匿名>:10:1 new Error().stack この方法では、現在のコード実行のコールスタック情報をいつでも取得することができ、コードをデバッグする方法でもあります。 5. 1行のコードでランダムな文字列を生成する初めて JS を学んだとき、ランダムな文字列を生成する関数を実装したいと思いました。その方法は次の通りです。 関数ハッシュ(){ s = ''とする 定数文字列 = [ 「a」、「b」、「c」、「d」、「e」、「f」、「g」、 「h」、「i」、「j」、「k」、「l」、「m」、「n」、 「o」、「p」、「q」、「r」、「s」、「t」、「u」、 'v'、'w'、'x'、'y'、'z'、'0'、'1'、 「2」、「3」、「4」、「5」、「6」、「7」、「8」、 '9'、 ] for(i = 0; i < 10; i++) { s += strs[Math.floor(Math.random() * strs.length)] } 返品 } ハッシュ() // 'www7v2if9r' 面倒だ! 26文字と10桁の数字を書くのにかなり時間がかかりました(もちろん、ASCIIコードを使うこともできます。その方が便利です) 次に、「ランダムに文字列を生成する」という機能を、たった1行の超短いコードで実現できる方法を紹介します。 str = Math.random().toString(36).substr(2, 10); console.log(str); // 'w5jetivt7e' 10桁のランダムな文字列も取得しました。これはかなりクールです😎、私が書いたものと比べて、とてもクールです まず、Math.random() は [0, 1) の範囲の数値、つまり 0.123312、0.982931 などを生成します。次に、数値の toString メソッドを呼び出して、それを 36 進数に変換します。MDN によると、36 進数への変換には、文字 a~z と数字 0~9 を含める必要があります。生成された数値は 0.89kjna21sa などであるため、小数部分を切り捨てる必要があります。つまり、必要なランダム文字列を取得するには、インデックス 2 から 10 文字を切り捨てる必要があります。 多くのオープンソース ライブラリは、このアプローチを使用して DOM 要素のランダム ID を作成します。 6. DOMを取得する最も速い方法HTMLのid属性を持つ要素は、同じ名前のグローバルID変数によって参照されます。 <div id="zero2one"></div> 元々DOMは次のように取得されていました 定数el = document.getElementById('zero2one') console.log(el) // <div id="zero2one"></div> 今ならできる console.log(zero2one) // <div id="zero2one"></div> 便利じゃないですか^-^ 要約する6 つの奇妙だが実用的な JavaScript テクニックに関するこの記事はこれで終わりです。より関連性の高い実用的な JavaScript テクニックについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Dockerイメージのインポート、エクスポート、バックアップ、移行操作
必要な効果: 確認コードを送信するためにクリックした後、ボタンは無効になり、5 秒後に無効解除されま...
使用フレキシブル ボックスはフロントエンドの Web ページ レイアウトで重要な役割を果たしますが、...
目次序文文章プリミティブ型プリミティブ値ラッパーオブジェクト物体コンストラクタ通常機能(関数)プリミ...
目次1. フックとは何ですか? 2. フックはなぜ現れるのでしょうか? 3. よく使われるフックは何...
ネットワーク使用チュートリアル公式サイト docker-compose.yml リファレンスドキュメ...
この投稿では、通知、画像とビデオ、フォーム フィールド、タイトル、段落、箇条書きリスト、ナビゲーショ...
Windows 2003+IIS6 の fastcgi 構成ファイル fcgiext.ini を最適...
適用シナリオ: iframe ページにスクロール バーがなく、親ウィンドウにスクロール バーが表示さ...
1. MySQL での or 構文の使用、および MySQL 構文で or を使用する際の注意点。 ...
docker リモート API を学習した学生であれば、ポート 2375 についてよくご存知だと思い...
1. 永久的な変更、すべてのユーザーに有効# vi /etc/プロファイル//キーボードの[Shi...
目次序文: 1. デフォルト値に関する操作2. 使用上の提案要約:序文: MySQL では、テーブル...
数字、文字、またはランダムな色の数字と文字の混合で構成される n 桁の確認コード。以下に完全なコード...
Ubuntu ではデフォルトで root ログインが許可されていないため、初期の root アカウン...
序文最近、偶然 MySQL の coalesce を発見しました。ちょうど時間があったので、MySQ...