今日は、珍しいけれど役に立つJSテクニックをいくつか紹介します

1. 戻るボタン

history.back() を使用してブラウザの「戻る」ボタンを作成します。

<ボタン onclick="history.back()">
    戻る</button>

2. 数字区切り

数字の読みやすさを向上させるために、アンダースコアを区切り文字として使用できます。

定数largeNumber = 1_000_000_000;

console.log(largeNumber); // 1000000000

3. イベントリスナーは一度だけ実行される

イベントリスナーを追加して 1 回だけ実行する場合は、once オプションを使用できます。

element.addEventListener('click', () => console.log('1回だけ実行します'), {
    一度: 真
});

4. console.log 変数ラッパー

console.log() を実行するときは、変数名と変数値の両方が表示されるように、パラメータを中括弧で囲みます。

5. 配列から最小値/最大値を取得する

スプレッド演算子と共に Math.min() または Math.max() を使用して、配列内の最小値または最大値を見つけることができます。

定数数値 = [6, 8, 1, 3, 9];

console.log(Math.max(...数値)); // 9
console.log(Math.min(...数値)); // 1

6. Caps Lockがオンになっているか確認する

KeyboardEvent.getModifierState() を使用して、Caps Lock がオンかどうかを検出できます。

const passwordInput = document.getElementById('password');

passwordInput.addEventListener('keyup', 関数(イベント) {
    イベントの取得ModifierState('CapsLock')の場合
        // CapsLock はすでにオンになっています }
});

7. クリップボードにコピー

Clipboard API を使用して、「クリップボードにコピー」機能を作成できます。

関数 copyToClipboard(テキスト) {
    クリップボードにテキストを書き込みます。
}

8. マウスの位置を取得する

MouseEvent オブジェクトの clientX プロパティと clientY プロパティを使用して、マウス位置の現在の座標情報を取得できます。

document.addEventListener('mousemove', (e) => {
    console.log(`マウスX: ${e.clientX}、マウスY: ${e.clientY}`);
});

9. 配列を短くする

配列を短くするには、length プロパティを設定します。

定数数値 = [1, 2, 3, 4, 5]

数値の長さ = 3;

console.log(数字); // [1, 2, 3]

10. 省略された条件文

条件が真の場合にのみ関数を実行する場合は、 && ショートカットを使用できます。

// 通常の書き方 if (条件) {
    何かを実行します();
}

// 省略形条件 && doSomething();

11. console.table() は特定の形式で表を出力します

文法：

// [] はオプションのパラメータを参照します console.table(data [, columns]);

パラメータ:

data は表示されるデータを示します。配列またはオブジェクトである必要があります。

columns は列の名前を含む配列を表します。

例:

// オブジェクトの配列、firstName のみを出力
関数 Person(firstName, lastName) {
    _firstName_ は、_firstName_ の後に続く最初の名前です。
    this.lastName = 姓;
}

const john = new Person("John", "Smith");
const jane = new Person("Jane", "Doe");
const emily = new Person("エミリー", "ジョーンズ");

console.table([ジョン、ジェーン、エミリー]、["firstName"]);

印刷結果は以下のようになります。

12. アレイの重複排除

定数数値 = [2, 3, 4, 4, 2];

console.log([...new Set(numbers)]); // [2, 3, 4]

13. 文字列を数値に変換する

定数str = '404';

console.log(+str) // 404;

14. 数値を文字列に変換する

空の文字列を連結します。

定数 myNumber = 403;

console.log(myNumber + ''); // '403'

15.配列からすべての偽値をフィルタリングする

const myArray = [1, 未定義, NaN, 2, null, '@denicmarko', true, 3, false];

console.log(myArray.filter(Boolean)); // [1, 2, "@denicmarko", true, 3]

16. 使用には以下が含まれます

const myTech = 'JavaScript';
const techs = ['HTML', 'CSS', 'JavaScript'];

// 通常の記述 if (myTech === 'HTML' || myTech === 'CSS' || myTech === 'JavaScript') {
    // 何かをする
}

// 構文を含む if (techs.includes(myTech)) {
    // 何かをする 
}

17. 配列を合計するにはreduceを使う

配列を10、20、30、40に設定します。
const リデューサー = (合計、現在の値) => 合計 + 現在の値;

console.log(myArray.reduce(リデューサー)); // 100

18. console.log() スタイル

DevTools で CSS ステートメントを使用して console.log 出力をスタイルできることをご存知ですか:

19. 要素データセット

要素のカスタムデータ属性 (data-*) にアクセスするには、dataset 属性を使用します。

<div id="user" data-name="John Doe" data-age="29" data-something="いくつかのデータ">
    ジョン・ドゥ
</div>

<スクリプト>
    定数user = document.getElementById('user');
  
    console.log(ユーザー.データセット); 
    // { name: "John Doe", age: "29", something: "Some Data" }
  
    console.log(user.dataset.name); // "John Doe"
    console.log(user.dataset.age); // "29"
    console.log(user.dataset.something); // "いくつかのデータ"
</スクリプト>

本日は、珍しいけれども非常に役に立つ JS のヒントをいくつかご紹介しましたが、これで終わりです。より関連性の高い JS のヒントについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後も 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: