今日は、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イメージのインポート、エクスポート、バックアップ、移行操作
以下のように表示されます。名前説明する文字可変(n)、varchar(n)長さ制限あり、可変長文字(...
まず、ブロガーはコミュニティ バージョンをプレイしていますが、学習とテストにはこれで十分です。 Bl...
序文私は多くのブログを読み、弊社の DBA を含む多くの人々が、MySql では列に null が含...
MySQLマスタースレーブを設定した後、スレーブの状態が正常かどうかわからないことが多く、例外が発生...
1. フローティングレイアウト1. 最初に固定幅の div をフロートさせます。ドキュメントフローか...
Taobao用の空白スペースを作成します。 ブラウザページを縮小すると、コンテンツ領域は縮小されませ...
毎日のjQueryプラグイン - ステップ進捗軸 ステップ進捗軸ツール系のサイトでは入門チュートリア...
アプリケーション全体を CentOS にデプロイする必要があるため、当然ながらデータベース操作は不可...
この記事の例では、タイマー機能を実装するためのVueの具体的なコードを参考までに共有しています。具体...
序文これらの原則は実際の戦闘から要約されています。あらゆる原則の背後には血なまぐさい教訓があるこれら...
目次1. プロセスの基本的な概要2. プロセスの構成要素3. プロセス環境4. プロセスステータス5...
目次1. シグナルリスト1.1. リアルタイム信号と非リアルタイム信号1.2 信号ステータス1.3 ...
今日はdockerを使ってイメージをpullしたのですが、速度が悪くて見れず最後まで待ち続けました。...
背景最近、面接でデータベース トランザクションについてよく質問されます。通常は、@Transacti...
Centos7 の yum ソースには、mysql の代わりに mariaDB が使用されているため...