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

推薦する

Webフロントエンド開発CSS関連チームコラボレーション

フロントエンド開発部門は成長し、スタッフも増加し、技術も向上しています。 CSSer はフロントエン...

Linux周辺ファイルシステムのカスタマイズ方法

序文一般的に、Linux システムについて話すときは、Linux カーネルと GNU プロジェクトに...

nginx をプロキシ キャッシュとして使用する方法

キャッシュを使用する目的は、バックエンドの負荷を軽減し、Web サイトの同時実行性を向上させることで...

JSX を使用してマークアップ コンポーネント スタイルの開発を作成する例 (フロントエンドのコンポーネント化)

目次JSX環境の構築NPMを初期化するwebpackをインストールするBabelをインストールするw...

Alibaba Cloud で MySQL リモート接続を構成するための詳細な手順

序文ご存知のとおり、デフォルトでは、Alibaba Cloud にインストールされている MySQL...

Windows 7 環境での Docker 高速ビルドと Alibaba Cloud コンテナ高速化構成の詳細な説明

前回の Docker に関する記事では、MAC システムでの構築について説明しました。この記事では、...

mysql5.7.18 解凍バージョンで mysql サービスを起動します

mysql5.7.18の解凍版はmysqlサービスを起動します。具体的な内容は以下のとおりです。 1...

Dockerの一般的なコマンドとヒントのまとめ

インストールスクリプトUbuntu / CentOS Debian のインストールに問題があるようで...

MySQLのorder byとlimitを混在させる際の落とし穴の詳細な説明

MySQL では、ソートには order by を、ページングには limit をよく使用します。最...

MySQL 5.7.22 バイナリパッケージのインストールとインストール不要版 Windows 設定方法

次のコードは、MySQL 5.7.22 バイナリ パッケージのインストール方法を紹介しています。具体...

React のグローバル状態管理の 3 つの基本メカニズムの調査

目次序文小道具コンテクスト州要約する序文最新のフロントエンド フレームワークはすべて、コンポーネント...

CSS 変数に基づくテーマ切り替えに最適なソリューション (推奨)

この要件を受け取ったとき、Baidu は、CSS リンクの置き換え、className の変更、le...

MySQLでインデックスエラーが発生する状況について簡単に説明します

以下に、トレーニング機関からのヒントと私自身の要約をいくつか示します。以下のインデックスの内容を説明...

mysql5.7 のエンコーディングを utf8mb4 に設定する方法

最近、問題に遭遇しました。モバイル端末の絵文字や一部の絵文字は 4 バイトですが、UTF-8 は 3...

HTML 要素 noscript の使用の紹介

noscript の定義と使用法noscript 要素は、スクリプトが実行されない場合の代替コンテン...