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

推薦する

Ubuntu LinuxにOracle Java 14をインストールする方法

最近、Oracle は Java 14 (または Oracle JDK 14) の一般公開を発表しま...

Dockerコンテナの入退出方法の詳細な説明

1 Dockerサービスを開始するまず、docker サービスを開始する方法を知っておく必要がありま...

MySQL 外部キー (FOREIGN KEY) の使用例の詳細な説明

はじめに: すべてのデータを 1 つのテーブルに保存することのデメリット表の構成構造は複雑で不明瞭で...

JavaScript配列重複排除の詳細な説明

目次1. アレイ重複排除2. 配列内のオブジェクトの重複排除3. 配列内の同じフィールドに基づいて別...

MySQLで関連テーブルを削除する実用的な方法

MySQL データベースでは、テーブルが互いに関連付けられた後は、それらを任意に削除することはできま...

Linuxでシンボリックリンクを削除(削除)するコマンド

Linux では、シンボリック リンクを作成または削除する必要がある場合があります。もしそうなら、何...

メンテナンス可能なJSコードの書き方を教えます

目次保守可能なコードとは何ですか?コード規約1. 読みやすさ2. 変数と関数の命名3. 透過的な変数...

Dockerリンクはコンテナの相互接続を実現します

目次1.1. IP経由のコンテナ間のネットワークアクセス1.2. コンテナ名またはコンテナIDによる...

MySQL マルチテーブル結合クエリの詳細な説明

目次複数テーブル結合クエリ内部結合左結合右結合サブクエリ要約する複数テーブル結合クエリテーブル間の接...

Mysql SQL ステートメントのコメント

MySQL SQL ステートメントにコメントを追加できます。MySQL SQL ステートメントのコメ...

MySQL 8.0.15 バージョンのインストールチュートリアル Navicat.list への接続

落とし穴1. ネット上の多くのチュートリアルでは環境変数を設定するファイル名はmy.iniと書いてあ...

reactにおけるstateの略語の詳細な説明

序文国家とは何か私たちは皆、React はステート マシンであると言います。それはどのように反映され...

CSS3は、ズームと回転を実現するためにscale()とrotate()を使用します。

1. scale() メソッドズームとは「縮小」と「拡大」を意味します。 CSS3 では、scal...

MySQL <> および <=> 演算子の紹介

<> 演算子機能: 等しくないことを示します。注: 「!=」演算子と同じ機能を持ちますが...

MySQL 8.0.12 クイックインストールチュートリアル

MySQL 8.0.12 のインストールには 2 日かかり、さまざまな問題が発生しました。以下にまと...