プロジェクトに必須の 8 つの JavaScript コード スニペット

プロジェクトに必須の 8 つの JavaScript コード スニペット

1. ファイル拡張子を取得する

使用シナリオ:ファイルをアップロードしてサフィックスを決定する

/**
 * ファイル拡張子を取得します * @param {String} filename
 */
 エクスポート関数 getExt(ファイル名) {
    if (typeof ファイル名 == '文字列') {
        ファイル名を返す
            。スプリット('。')
            。ポップ()
            .toLowerCase()
    } それ以外 {
        新しいエラーをスローします('ファイル名は文字列型でなければなりません')
    }
}

使い方

getExt("1.mp4") //->mp4

2. コンテンツをクリップボードにコピーする

エクスポート関数 copyToBoard(値) {
    const 要素 = document.createElement('textarea')
    document.body.appendChild(要素)
    要素.値 = 値
    要素を選択()
    document.execCommand('コピー')の場合{
        document.execCommand('コピー')
        document.body.removeChild(要素)
        真を返す
    }
    document.body.removeChild(要素)
    偽を返す
}

方向:

// コピーが成功した場合は true を返します
copyToBoard('lalallala')

原理:

  • textare要素を作成し、 select()メソッドを呼び出して選択します。
  • document.execCommand('copy')メソッドは、現在選択されているコンテンツをクリップボードにコピーします。

3. スリープ時間は何ミリ秒か

/**
 * xxxms スリープ
 * @param {Number} ミリ秒
 */
エクスポート関数sleep(ms) {
    新しい Promise を返します(resolve => setTimeout(resolve, ms))
}

//使用法 const fetchData=async()=>{
 スリープを待つ(1000)
}

4. ランダムな文字列を生成する

/**
 * ランダムIDを生成する
 * @param {*} 長さ
 * @param {*} 文字
 */
エクスポート関数 uuid(長さ, 文字数) {
    文字 =
        文字 ||
        '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
    長さ = 長さ || 8
    var 結果 = ''
    (var i = 長さ; i > 0; --i) の場合
        結果 += chars[Math.floor(Math.random() * chars.length)]
    結果を返す
}

方向:

//最初のパラメータは桁数を指定し、2 番目の文字列は文字を指定します。どちらもオプションのパラメータです。どちらも渡されない場合は、デフォルトで 8 ビットの UUID が生成されます。()  

使用シナリオ:フロントエンドでランダム ID を生成するために使用されます。結局、Vue と React の両方でキーをバインドする必要があります。

5. シンプルなディープコピー

/**
 *ディープコピー* @export
 * @param {*} オブジェクト
 * @戻り値
 */
エクスポート関数 deepCopy(obj) {
    if (typeof obj != 'object') {
        オブジェクトを返す
    }
    (オブジェクトがnullの場合){
        オブジェクトを返す
    }
    JSON.parse(JSON.stringify(obj)) を返します。
}

デメリット:オブジェクト、配列、オブジェクトの配列のみをコピーするため、ほとんどのシナリオではこれで十分です。

const person={name:'xiaoming',child:{name:'Jack'}}
deepCopy(person) //新しい人物

6. アレイの重複排除

/**
 * 配列の重複排除* @param {*} arr
 */
エクスポート関数uniqueArray(arr) {
    Array.isArray(arr) の場合 {
        throw new Error('最初のパラメータは配列である必要があります')
    }
    (arr.length == 1)の場合{
        リターン
    }
    [...新しいSet(arr)]を返す
}

原則としては、 Set

ユニーク配列([1,1,1,1,1]) // [1]

7. オブジェクトをFormDataオブジェクトに変換

/**
 * オブジェクトをフォームデータに変換
 * @param {Object} オブジェクト
 */

 エクスポート関数 getFormData(オブジェクト) {
    const フォームデータ = 新しいフォームデータ()
    Object.keys(オブジェクト).forEach(キー => {
        const 値 = オブジェクト[キー]
        Array.isArray(値)の場合{
            値.forEach((サブ値、i) =>
                formData.append(キー + `[${i}]`, サブ値)
            )
        } それ以外 {
            formData.append(キー、オブジェクト[キー])
        }
    })
    フォームデータを返す
}

使用シナリオ:ファイルをアップロードするときに、新しいFormDataオブジェクトを作成し、パラメータの数だけappend必要があります。この関数を使用すると、ロジックを簡素化できます。

方向:

要求を={
    ファイル:xxx,
    ユーザーID:1,
    電話番号:'15198763636',
    //...
}
取得(getFormData(req))

8. 小数点以下n桁まで

// 小数点以下何桁を保持するか、デフォルトは2です export function cutNumber(number, no = 2) {
    if (typeof number != 'number') {
        数値 = 数値(数値)
    }
    Number(number.toFixed(no)) を返します
}

使用シナリオ: JS浮動小数点数は長すぎるため、ページを表示するときに小数点以下 2 桁を保持する必要がある場合があります。

結論:

プロジェクトに必須のJavaScriptコード スニペットに関するこの記事はこれで終わりです。プロジェクトに必須のJavaScriptコード スニペットに関するその他のコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • 効果的な Java (例外処理)
  • Android 向け Mono は効率的なナビゲーション (効果的なナビゲーション) を実装します
  • 効果的なC# 代入文の代わりにメンバー初期化子を使用する
  • Javaで整数型の値が等しいかどうかを判断する方法
  • JavaサードパーティライブラリJodaTimeの具体的な使用
  • JavaScript における一般的な配列操作
  • 仕事におけるEffective Javaの応用の概要

<<:  写真とテキストによる MySQL 8.0.21 インストール チュートリアル

>>:  SSH接続を介してXshellを使用したUbuntu 20.04で報告されたサービス問題の詳細な説明

推薦する

CentOS 7.5 に Python 3.6.6 を最初からインストールするための詳細なチュートリアル

ps: 環境はタイトル通りです依存関係をインストールする yum インストール openssl-de...

収集する価値のあるCSS命名規則(ルール) よく使われるCSS命名規則

CSS命名規則(ルール) よく使われるCSS命名規則ヘッダー: ヘッダーコンテンツ: コンテンツ/コ...

TypeScript ジェネリックパラメータのデフォルト型と新しい厳密なコンパイルオプション

目次概要コンポーネントクラスの型定義を作成するジェネリック型を使用してPropsとStateを定義す...

フレックスレイアウトとposition:absolute/fixedの競合の詳細な説明

以前、プロジェクトを開発しているときに、flex レイアウトと position:absolute/...

JavaScript プロトタイプとプロトタイプチェーンの詳細

目次1. プロトタイプ(明示的なプロトタイプ) 2. __proto__ (暗黙のプロトタイプ) 3...

CSS スタイルの導入方法とその長所と短所の紹介

CSSを導入する3つの方法1. インラインスタイル利点: 書きやすく、重みがある 欠点: 構造とスタ...

CentOS での mysql5.7 の詳細なインストールと設定のチュートリアル

インストールユーザーにインストール権限があることを確認してくださいルートスイッチなしsuルート(su...

Dockerは複数のポートマッピングコマンドを有効にします

次のように: docker run -d -p 5000:23 -p 5001:22 --name ...

Vuexはセッションストレージデータを結合して、ページを更新するときにデータが失われる問題を解決します

目次序文1. 理由: 2. 解決策のアイデア: 1. ローカル保存方法: 2. 実装手順: 3. 最...

Nginx の起動に失敗した場合のいくつかのエラー処理の詳細な説明

Nginx を Web サーバーとして使用する際に、次の問題が発生しました。 1. nginxの起動...

ウェブサイトはいつ広告を掲載すべきでしょうか?

最近、インターネットのベテランと「広告」について議論したのですが、彼から非常に興味深い意見を聞きまし...

シンプルなリスト機能を実装するミニプログラム

この記事の例では、参考のために簡単なリスト機能を実装するアプレットの具体的なコードを共有しています。...

Dockerイメージ作成の完全なプロセス

目次序文作成手順CentOSベースイメージを作成するコンテナを作成してカスタマイズするカスタムコンテ...

エレガントなJSコードの書き方

目次変数意味があり発音しやすい変数名を使用する同じ型の変数には同じ語彙を使用する検索可能な名前を使用...

MySQL インストール プロンプト「詳細なヘルプについては NET HELPMSG 3534 と入力してください」の解決方法

今日、MySQL をインストールすると次のエラー メッセージが表示されます。 かなり長い時間ネットで...