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

推薦する

PostgreSQL データベースにおける varchar、char、text の比較に関する簡単な説明

以下のように表示されます。名前説明する文字可変(n)、varchar(n)長さ制限あり、可変長文字(...

Win 8 以降での最新の MySQL バージョン 5.7.17 (64 ビット ZIP グリーン バージョン) のインストールと展開のチュートリアル

まず、ブロガーはコミュニティ バージョンをプレイしていますが、学習とテストにはこれで十分です。 Bl...

MySQL のインデックスにおける NULL の影響についての詳細な説明

序文私は多くのブログを読み、弊社の DBA を含む多くの人々が、MySql では列に null が含...

Zabbix が MySQL のマスター/スレーブ状態を監視する方法の詳細な説明

MySQLマスタースレーブを設定した後、スレーブの状態が正常かどうかわからないことが多く、例外が発生...

CSSは左固定と右適応のレイアウト方法を実現します

1. フローティングレイアウト1. 最初に固定幅の div をフロートさせます。ドキュメントフローか...

CSS3 で Taobao に空白スペースを実装する方法

Taobao用の空白スペースを作成します。 ブラウザページを縮小すると、コンテンツ領域は縮小されませ...

jQuery ステップ進行軸プラグインの実装コード

毎日のjQueryプラグイン - ステップ進捗軸 ステップ進捗軸ツール系のサイトでは入門チュートリア...

CentOS での MySQL ログイン 1045 問題を解決する

アプリケーション全体を CentOS にデプロイする必要があるため、当然ながらデータベース操作は不可...

Vueを使用してタイマー機能を実装する

この記事の例では、タイマー機能を実装するためのVueの具体的なコードを参考までに共有しています。具体...

MySQL データベース開発の 36 の原則 (要約)

序文これらの原則は実際の戦闘から要約されています。あらゆる原則の背後には血なまぐさい教訓があるこれら...

Linuxの運用と保守の基本プロセス管理と環境構成分析

目次1. プロセスの基本的な概要2. プロセスの構成要素3. プロセス環境4. プロセスステータス5...

Linuxのシグナルメカニズムについての簡単な説明

目次1. シグナルリスト1.1. リアルタイム信号と非リアルタイム信号1.2 信号ステータス1.3 ...

Docker 構成 Alibaba Cloud イメージアクセラレーション プル実装

今日はdockerを使ってイメージをpullしたのですが、速度が悪くて見れず最後まで待ち続けました。...

Mybatisの各SQL文の実行時間の統計

背景最近、面接でデータベース トランザクションについてよく質問されます。通常は、@Transacti...

Centos7 で yum を使用して Mysql5.7.19 をインストールする詳細な手順

Centos7 の yum ソースには、mysql の代わりに mariaDB が使用されているため...