今日は、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イメージのインポート、エクスポート、バックアップ、移行操作
最近、Oracle は Java 14 (または Oracle JDK 14) の一般公開を発表しま...
1 Dockerサービスを開始するまず、docker サービスを開始する方法を知っておく必要がありま...
はじめに: すべてのデータを 1 つのテーブルに保存することのデメリット表の構成構造は複雑で不明瞭で...
目次1. アレイ重複排除2. 配列内のオブジェクトの重複排除3. 配列内の同じフィールドに基づいて別...
MySQL データベースでは、テーブルが互いに関連付けられた後は、それらを任意に削除することはできま...
Linux では、シンボリック リンクを作成または削除する必要がある場合があります。もしそうなら、何...
目次保守可能なコードとは何ですか?コード規約1. 読みやすさ2. 変数と関数の命名3. 透過的な変数...
目次1.1. IP経由のコンテナ間のネットワークアクセス1.2. コンテナ名またはコンテナIDによる...
目次複数テーブル結合クエリ内部結合左結合右結合サブクエリ要約する複数テーブル結合クエリテーブル間の接...
MySQL SQL ステートメントにコメントを追加できます。MySQL SQL ステートメントのコメ...
落とし穴1. ネット上の多くのチュートリアルでは環境変数を設定するファイル名はmy.iniと書いてあ...
序文国家とは何か私たちは皆、React はステート マシンであると言います。それはどのように反映され...
1. scale() メソッドズームとは「縮小」と「拡大」を意味します。 CSS3 では、scal...
<> 演算子機能: 等しくないことを示します。注: 「!=」演算子と同じ機能を持ちますが...
MySQL 8.0.12 のインストールには 2 日かかり、さまざまな問題が発生しました。以下にまと...