あなたをエキスパートに見せるための 13 個の JavaScript ワンライナー

あなたをエキスパートに見せるための 13 個の JavaScript ワンライナー

1. ランダムなブール値( true / false )を取得する

この関数はMath.random()メソッドを使用し、ブール値 ( trueまたはalse ) を返します。 Math.random は 0 から 1 の間の乱数を生成し、それが 0.5 より大きいか小さいかをチェックするだけで、true または false になる確率は 50% になります。

const randomBoolean = () => Math.random() >= 0.5;
コンソールにログ出力します。

2. 指定された日付が営業日であるかどうかを確認する

このメソッドを使用すると、関数で指定された日付が平日か週末かを確認できます。

const isWeekday = (date) => date.getDay() % 6 !== 0;

console.log(isWeekday(新しい日付(2021, 7, 6)));
// 金曜日なので trueconsole.log(isWeekday(new Date(2021, 7, 7)));
// 土曜日なのでfalse

3. 文字列を反転する

文字列を反転する方法はいくつかあります。これは、split()、reverse()、join() メソッドを使用する最も単純な方法です。

const 逆 = str => str.split('').reverse().join('');
逆('hello world');     
// 'ダウンロード'

4. 現在のタブが非表示になっているかどうかを確認する

Document.hidden (読み取り専用プロパティ) は、ページが非表示になっているか ( true )、そうでないか ( false ) を示すブール値を返します。

const isBrowserTabInView = () => document.hidden;
ブラウザタブがビュー内にあるかどうかを確認します。

オフサイト: iQiyi 広告の再生時間は、現在のタブがアクティブになっているときのみカウントダウンされることを偶然発見しました。現在のタブを離れると、カウントダウンは停止します。Baidu で検索したところ、 document.hidden見つけました。

document.hidden h5 に追加された新しい API であり、使用すると互換性の問題が生じます。

var 非表示
if (typeof document.hidden !== "undefined") {
    hidden = "隠し";
} そうでない場合 (typeof document.mozHidden !== "undefined") {
    非表示 = "mozHidden";
} そうでない場合 (typeof document.msHidden !== "undefined") {
    非表示 = "msHidden";
} そうでない場合 (typeof document.webkitHidden !== "undefined") {
    非表示 = "webkitHidden";
}
console.log("現在のページは非表示ですか: " + document[hidden])

5. 数字が偶数か奇数かを確認する

const isEven = num => num % 2 === 0;
コンソールログ(isEven(2));
// 真実
コンソールログ(isEven(3));
// 間違い

6. 日付から時間を取得する

const timeFromDate = date => date.toTimeString().slice(0, 8);

コンソールにログ出力します。 
// "17:30:00"

コンソールにログ出力します。
// 現在の時刻を出力します

7. 小数点以下n桁を保持する

const toFixed = (n, fixed) => ~~(Math.pow(10, fixed) * n) / Math.pow(10, fixed);
// 例 toFixed(25.198726354, 1); // 25.1
固定(25.198726354, 2); // 25.19
固定(25.198726354, 3); // 25.198
toFixed(25.198726354, 4); // 25.1987
toFixed(25.198726354, 5); // 25.19872
toFixed(25.198726354, 6); // 25.198726

8. 要素が現在フォーカスされているかどうかを確認する

document.activeElementプロパティを使用して、要素が現在フォーカスされているかどうかを確認できます。

要素がフォーカスされているかどうかをconstで指定します。
要素がフォーカスされているかどうか(任意の要素)
// フォーカスされている場合は true を返し、フォーカスされていない場合は false を返します

9. 現在のブラウザがタッチイベントをサポートしているかどうかを確認する

定数 touchSupported = () => {
  (ウィンドウ内の 'ontouchstart' || window.DocumentTouch && ドキュメントの instanceof window.DocumentTouch);
}
コンソールにログを記録します。
// タッチ イベントがサポートされている場合は true が返され、そうでない場合は false が返されます。

10. 現在のブラウザがAppleデバイス上にあるかどうかを確認する

const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
console.log(AppleDevice がデバイスであるかどうか)

11. ページの先頭までスクロールします

const goToTop = () => window.scrollTo(0, 0);
先頭へ移動します。

12. パラメータの平均値を取得する

const average = (...args) => args.reduce((a, b) => a + b) / args.length;
平均(1, 2, 3, 4);
// 2.5

13. 華氏/摂氏変換

const celsiusToFahrenheit = (摂氏) => 摂氏 * 9/5 + 32;
const fahrenheitToCelsius = (華氏) => (華氏 - 32) * 5/9;
// 例 celsiusToFahrenheit(15); // 59
摂氏から華氏(0); // 32
摂氏から華氏(-20); // -4
華氏から摂氏へ(59); // 15
華氏から摂氏へ(32); // 0

これで、エキスパートのように見える 13 個の JavaScript ワンライン プログラムに関する記事は終了です。JavaScript に関するその他のコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript でのカスタム スワイパー コンポーネントの詳細な説明
  • JavaScript の矢印関数と通常の関数の違いの詳細な説明
  • JavaScript でカルーセル効果を実装する
  • ボタンをクリックして画像を切り替える JavaScript
  • JavaScriptで配列かどうかを判断するためのさまざまな方法のまとめ
  • 花火効果を実現するJavaScript(オブジェクト指向)
  • JavaScript Canvas で三目並べゲームを実装
  • JavaScriptのループの違いについての詳細な説明
  • JavaScript コードを省略する一般的な方法の概要

<<:  この構成ファイルの排他ロックに失敗したという VMware 仮想マシンのプロンプトの解決方法

>>:  MySQL が group by をサポートしない場合の解決策の概要

推薦する

国内SNSのホームページを比較・分析して得た経験をみんなで共有(写真)

この記事では、ソーシャル ウェブサイトのホームページを比較分析することで洞察を得て、ソーシャル ウェ...

MySQL 8.0 の統計が不正確である理由

序文Oracle であれ MySQL であれ、新バージョンで導入された新機能は、一方では製品の機能性...

XHTML CSSを使用して正式なブログを書く

ブログの正式名称は「Web log」で、中国語で「ネットワークログ」を意味します。後にブログに短縮さ...

フロントエンドとバックエンドを分離した nginx 構成を展開するための完全な手順

序文決まり文句です。ここでは、フロントエンドとバックエンドの分離についての私の理解についてお話ししま...

便利で使いやすいウェブアプリケーションを設計するための 10 のヒント

より使いやすい Web アプリケーションを設計するための 10 のヒントをご紹介します。ヒント1: ...

MySQL における count(*)、count(1)、count(col) の違いのまとめ

序文count 関数は、テーブルまたは配列内のレコードをカウントするために使用されます。count(...

Vueコンポーネントの7つの通信方法についての深い理解

目次1. props/$emit導入コードサンプル2.Vスロット導入コードサンプル3.$refs/ ...

PSを使用して2分でxhtml+cssウェブサイトのホームページを作成します

xhtml+css のウェブサイト再構築、ウェブ標準などについては、記事が多すぎるので繰り返しません...

Docker で Kong API Gateway をインストールして使用する詳細なチュートリアル

1 はじめにKong は単純な製品ではありません。この記事で言及されている Kong は主に Kon...

スクロール時に選択領域のフォント色を暗くするために CSS を使用するサンプルコード

日付ピッカーをカプセル化する場合、選択時にフォントの色を暗くする必要があります。実装後の効果を見てみ...

ViteでReactプロジェクトを構築する方法

目次序文Viteプロジェクトを作成する改修プロジェクトディレクトリの規則その他の構成序文毎日鳩、火ば...

MySQL例外に対する一般的な解決策をいくつか分析する

目次序文1. コードによって設定されたデータベース名またはパスワードがローカルデータベースと一致して...

ウェブページコンテンツの閲覧設計手法に関する議論

<br />コンテンツ ページの記事の場合、記事が長すぎる場合やカテゴリ (ランキング)...

Viteプロジェクトを作成する手順

目次序文yarn create は何をしますか?ソースコード分析プロジェクトの依存関係テンプレート構...

優れたWebフォームデザイン事例20選

ソフィー・ハルダッククライドキー埠頭 37 東ソープボックス Rxバランス EEハーバー対比 SVN...