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 ソートの原則とケース分析

推薦する

jQueryは検証コード送信のコントロールボタンを無効にする機能を実装します

必要な効果: 確認コードを送信するためにクリックした後、ボタンは無効になり、5 秒後に無効解除されま...

CSS3 弾性拡張ボックスの詳細な説明

使用フレキシブル ボックスはフロントエンドの Web ページ レイアウトで重要な役割を果たしますが、...

JavaScriptのプリミティブ値とラッパーオブジェクトの詳細な紹介

目次序文文章プリミティブ型プリミティブ値ラッパーオブジェクト物体コンストラクタ通常機能(関数)プリミ...

Reactにおけるフックの一般的な使用法

目次1. フックとは何ですか? 2. フックはなぜ現れるのでしょうか? 3. よく使われるフックは何...

docker-compose ネットワーク設定についての簡単な説明

ネットワーク使用チュートリアル公式サイト docker-compose.yml リファレンスドキュメ...

Photoshop を使って Web ワイヤーフレームを作成する方法

この投稿では、通知、画像とビデオ、フォーム フィールド、タイトル、段落、箇条書きリスト、ナビゲーショ...

jQuery を使用して、iframe 下の無効なページ アンカー ポイントの問題を修正する

適用シナリオ: iframe ページにスクロール バーがなく、親ウィンドウにスクロール バーが表示さ...

MySQL での or ステートメントの使用例

1. MySQL での or 構文の使用、および MySQL 構文で or を使用する際の注意点。 ...

Docker がポート 2375 を公開し、サーバー攻撃を引き起こす問題と解決策

docker リモート API を学習した学生であれば、ポート 2375 についてよくご存知だと思い...

Linux で環境変数 JAVA_HOME を変更/設定する方法について簡単に説明します。

1. 永久的な変更、すべてのユーザーに有効# vi /etc/プロファイル//キーボードの[Shi...

MySQLフィールドのデフォルト値を設定する方法

目次序文: 1. デフォルト値に関する操作2. 使用上の提案要約:序文: MySQL では、テーブル...

JavaScript 関数はランダムな色の検証コードをカプセル化します (完全なコード)

数字、文字、またはランダムな色の数字と文字の混合で構成される n 桁の確認コード。以下に完全なコード...

Linuxルートの初期値を設定する方法の簡単な分析

Ubuntu ではデフォルトで root ログインが許可されていないため、初期の root アカウン...

MySQL での coalesce() の使用に関するヒントのまとめ

序文最近、偶然 MySQL の coalesce を発見しました。ちょうど時間があったので、MySQ...