集める価値のある 15 個の JavaScript 関数

集める価値のある 15 個の JavaScript 関数

1. 数字を逆にする

定数逆数 = n =>
  parseFloat(`${n}`.split('').reverse().join('')) * Math.sign(n);

逆数(123); // 321
逆数(-200); // -2
逆数(32.4); // 4.23
逆数(-32.4); // -4.23

2. 配列内の最大のn個の数値を取得する

const maxFromArray = (配列、数値 = 1) => [...配列]
  .sort((x, y) => y -x).slice(0, 数値);

maxFromArray([2, 1, 4, 3, 5, 6]); // [6]
maxFromArray([2, 1, 4, 3, 6, 6], 2); // [6, 6]


3. 階乗を計算する

const 階乗 = (数値) =>
  数値 < 0
    ? (() => {
      新しい TypeError をスローします ('型エラー')。
    })()
    : 数値 <= 1
    ? 1
    : 数値 * 階乗(数値 - 1);

階乗(4); // 24
階乗(10); // 3628800


4. 現在の動作環境がブラウザであるかどうかを判断する

const isBrowser = () => ![typeof window, typeof document].includes('undefined');

isBrowser(); // false (ノード)
isBrowser(); // true (ブラウザ)


5. 現在の動作環境がNode.jsであるかどうかを確認する

定数isNode = () =>
  プロセスのタイプ !== 'undefined' &&
  !!プロセス.バージョン &&
  !!プロセス.バージョン.ノード;

isNode(); // true (ノード)
isNode(); // false (ブラウザ)


6. URLのパラメータを取得する

const getURLParams = url =>
  (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
    (a, v) => (
      (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1))、a
    )、
    {}
  );

getURLParams('qq.com'); // {}
getURLParams('https://xx.com?name=tntweb&age=20');
// {名前: 'tntweb'、年齢: '20'}


7. rgb(x,x,x)カラー表現形式をオブジェクト形式に変換する

定数toRGBObject = rgbStr => {
  const [赤、緑、青] = rgbStr.match(/\d+/g).map(Number);
  { 赤、緑、青 } を返します。
};

toRGBObject('rgb(100, 150, 200)'); // {赤: 100、緑: 150、青: 200}

8. HTMLで使用するための文字列のエスケープ

const escapeHTML = str =>
  str.replace() 文字列を置換します。
    /[&<>'"]/g,
    タグ =>
      ({
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        "'": '&#39;',
        '"': '&quot;'
      }[タグ] || タグ)
  );

escapeHTML('<a href="#" rel="external nofollow" >tntweb</a>'); 


9. アンエスケープはHTML文字をエスケープします

const unescapeHTML = str =>
  str.replace() 文字列を置換します。
    /&amp;|&lt;|&gt;|&#39;|&quot;/g,
    タグ =>
      ({
        '&': '&',
        '&lt;': '<',
        '&gt;': '>',
        '&#39;': "'",
        '&quot;': '"'
      }[タグ] || タグ)
  );

unescapeHTML('&lt;a href=&quot;#&quot;&gt;tntweb&lt;/a&gt;');


10. 指定された範囲内でランダムな整数を生成する

定数ランダム整数範囲 = (最小, 最大) =>
  Math.floor(Math.random() * (max - min + 1)) + min;

ランダム整数範囲(1, 7); // 1 - 7


11. チルダパスを絶対パスに変換する

const 逆パス = str =>
  str.replace(/^~($|\/|\\)/, `${require('os').homedir()}$1`);

逆パス('~/web'); // '/Users/[ユーザー名]/web'


12. パラメータやフラグメント識別子なしで現在のURLを取得する

const getBaseURL = url => url.replace(/[?#].*$/, '');

'https://xx.com/index?name=tntweb&company=tencent' を取得します。
// https://xx.com/index


13. 文字列の長さをバイト単位で返す

const byteSize = str => new Blob([str]).size;

バイトサイズ('🚗'); // 4
byteSize('Hello World'); // 11


14. 配列内の要素をランダムに取得する

const ランダム = arr => arr[Math.floor(Math.random() * arr.length)];

ランダムに([1, 3, 5, 7, 9, 11]);


15. 文字列が有効なJSONであるかどうかを確認する

定数isValidJSON = str => {
  試す {
    JSON を解析します。
    true を返します。
  } キャッチ (e) {
    false を返します。
  }
};

isValidJSON('{"name":"tntweb","age":20}'); // 真
isValidJSON('{"name":"tntweb",age:"20"}'); // 偽
isValidJSON(null); // 真

これで、収集する価値のある 15 個の JavaScript 関数に関するこの記事は終了です。より関連性の高い JavaScript 関数のコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript 関数型プログラミングの基礎
  • JS関数の継承について学ぶ記事
  • JavaScript 基礎シリーズ: 関数とメソッド
  • JS関数の呼び出し、適用、バインドの超詳細な方法
  • JavaScript 関数呼び出し、適用、バインド メソッドのケース スタディ
  • JavaScript の矢印関数と通常の関数の違いの詳細な説明
  • JavaScript の知識: コンストラクタも関数である
  • JavaScriptのスリープ関数の使用
  • JavaScript における変数と関数の昇格の詳細な例
  • JavaScript の 50 以上のユーティリティ関数の概要

<<:  MySQL データベース クエリ パフォーマンス最適化戦略

>>:  MySQL はどのようにしてデータの整合性を確保するのでしょうか?

推薦する

Hyper-V インストール CentOS 8 の問題の分析

CentOS 8 がリリースされてから随分経ちました。Linux 仮想マシンをいじっている人間として...

js で下線とキャメルケースの変換を実装する (複数の方法)

目次適用シナリオ:方法 1: 正規表現 (推奨)方法2: 配列のreduceメソッドを使用する方法3...

モバイル アプリのユーザー インターフェース設計に関する 10 のヒント

ヒント1: 集中力を保つ最高のモバイル アプリは、1 つのことを非常にうまく行うことに重点を置いてい...

MySQLデッドロック問題の詳細な分析

序文私たちのビジネスがまだ初期段階にあり、同時実行の度合いが比較的低い場合、数年間はデッドロックの問...

ウェブページの背景色を制御する CSS コード

誰もが自分の Web ページの背景にふさわしい画像を見つけることに悩むことが多いと思います。これは事...

ie8/ie9/ie10/ie11 chrome firefox を区別するための CSS コード

ウェブサイトの互換性のデバッグは本当に面倒です。今日のウェブサイト デザイナーは、以前よりもはるかに...

MySQLがデータの削除を推奨しない理由

目次序文InnoDB ストレージ アーキテクチャInnodb テーブルスペースインドストレージディス...

Ubuntu 20.04でLNMP環境を構築する方法

簡単な説明以前 Centos7 で構築し、その後個人開発環境として Ubuntu 20.04 を使っ...

シェルスクリプトを使用して CentOS7 に python3.8 環境をインストールする (推奨)

ワンクリック実行仮想マシンに Python 3.8 をインストールするには、ネットワーク アダプター...

MySQL 5.7.17 圧縮パッケージのインストール不要の構成プロセス図

MySQL データベース管理ソフトウェアには、エンタープライズ エディションとコミュニティ エディシ...

MYSQL SERVER のログファイルを縮小する方法

トランザクション ログには、関連するデータベースに対する操作が記録され、データベースの回復に関連する...

訪問者にあなたのウェブサイトを覚えてもらうための3つの便利なコード

訪問者があなたのウェブサイトを覚えておくのに役立つ3つの便利なコード。お気に入りに追加するためのヒン...

Nginx レイヤー 4 負荷分散構成ガイド

1. レイヤー4負荷分散の概要レイヤー 4 ロード バランシングとは何ですか?いわゆる 4 層負荷分...

Docker 構成コンテナの場所とヒントのまとめ

Docker の使用に関するヒント1. 停止したDockerコンテナをすべてクリーンアップする停止し...

SQL 実装 LeetCode (185. 部門内で最も給与の高い上位 3 名)

[LeetCode] 185. 部門別給与上位3位従業員テーブルにはすべての従業員が保持されます。...