JavaScript に関する 6 つの奇妙で便利な点

JavaScript に関する 6 つの奇妙で便利な点

今日は、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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JSは3つの実用的な方法で配列内に重複した値があるかどうかを判断します
  • 見逃せない実用的な JS カスタム関数 100 個
  • 5つの実用的なjs上級スキル
  • js でスペースを削除する 12 の実用的な方法
  • より実用的なjsメソッド
  • 非常に実用的なjsタブ切り替え効果
  • js フォーム検証方法 (実践的)
  • より実践的な基礎を学ぶjsスクリプト
  • Javascript の実用的なヒント

<<:  Dockerイメージのインポート、エクスポート、バックアップ、移行操作

>>:  MySQL ソートの原則とケース分析

推薦する

MySQL 5.7 をバイナリモードでインストールし、Linux でシステムを最適化する手順

この記事では主に、MySQL バイナリ パッケージのインストール/起動/シャットダウンのプロセスを紹...

node_modulesを削除して再インストールする方法

目次ステップ1: プロジェクトをインストールするディレクトリにnode_modulesをインストール...

テーブルのネストと境界の結合の問題に対する解決策

【質問】外側のテーブルと内側のテーブルがネストされていて、内側のテーブルと外側のテーブルの両方に境界...

nginx プロキシ サーバーで双方向証明書検証を構成する方法

証明書チェーンを生成するスクリプトを使用して、ルート証明書、中間証明書、および 3 つのクライアント...

MySQL の null 制約のケースの説明

目次テーブルを作成するときにNOT NULL制約を設定するテーブルを変更するときに非NULL制約を追...

WeChatアプレットはシンプルなサイコロゲームを実装します

この記事では、サイコロゲームを実装するためのWeChatアプレットの具体的なコードを参考までに共有し...

nestjs からフロントエンドに返されるデータ形式のカプセル化実装

通常、開発プロセスでは、インターフェイス要求の成功または失敗は httpcode に基づいて決定され...

CSSアニメーションがJSによってブロックされるかどうかについての簡単な議論

CSS のアニメーション部分は JS によってブロックされますが、transform のアニメーショ...

MySQL 学習ノート: データ エンジン

現在のデータベースでサポートされているエンジンを表示します エンジンを表示 +-----------...

WeChatミニプログラムマップの使い方を詳しく解説

この記事の例では、WeChatアプレットマップで使用される具体的な実装コードを参考までに共有していま...

uniapp アプレットでウォーターフォール フロー レイアウトを実装するためのアイデアとコード

1. はじめに今、ウォーターフォールフローについて書くことは、古い内容の焼き直しと見なされますか?気...

MySQL でテーブルを作成するときの NULL と NOT NULL の使用方法の詳細な説明

MySQL の仕様によっては、テーブル作成仕様にすべてのフィールドが空であってはならないという要件を...

Dockerコンテナ間のホスト間通信 - オーバーレイベースの実装方法

オーバーレイネットワーク分析組み込みのホスト間ネットワーク通信は、常に Docker の待望の機能で...

MySQL をインストールするときに初期パスワードを忘れた場合のシンプルで効果的な解決策

MySQL をインストールすると初期パスワードが与えられますが、この初期パスワードは大文字と小文字の...

海外のウェブページのカラーマッチング事例20選共有

この記事では、優れた Web ページのカラー マッチングの事例を 20 件集めて紹介します。これらの...