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

序文

プログラミング言語には通常、さまざまな隠されたトリックが含まれており、これらのトリックを上手に使用すると開発効率が向上します。 JavaScript は高度に技術的な言語です。一般的な文法技法を習得すると、言語機能の理解が深まるだけでなく、コードが簡素化され、コーディングの効率が向上します。

ここに、いつか役に立つと思われる、いくつかの便利な JavaScript のヒントのリストを示します。

1. アレイ重複排除

定数数値 = [1, 2, 3, 4, 4, 1]
console.log([...new Set(numbers)]) // [1, 2, 3, 4]

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

const myArray = [1、未定義、null、2、NaN、true、false、3]
console.log(myArray.filter(Boolean)) // [1, 2, true, 3]

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

定数str = '123'
定数 num = +str
console.log(typeof num) // 数値

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

定数数値 = 123;
console.log(数値 + ''); // '123'

5. 条件文を省略するには&&記号を使用する

// 通常の書き方 if (条件) {
    何かを行う()
}

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

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

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

パラメータ:

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

例:

関数 商品(名前, 価格) {
    this.name = 名前
    this.price = 価格
}

const book = new Goods("《Webpack入門から廃刊まで》", "¥ 9.00")
const knowledge = new Goods("《フロントエンド自己啓発》", "¥ 99.00")
const ebook = new Goods("node.js コース", "¥ 199.00")

console.table([書籍、知識、電子書籍]、["名前", "価格"])

結果を印刷:

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

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

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

定数 = 2_000_000_000
console.log(数値) // 2000000000

9. データセット属性を使用して、要素のカスタムデータ属性 (data-*) にアクセスします。

<div id="カード" データ名="FE" データ番号="5" データラベル="リストカード">
    カード情報</div>

<スクリプト>
    const el = document.getElementById('カード')

    コンソールログ(el.dataset)
    // { 名前: "FE", 番号: "5", ラベル: "listCard" }

      console.log(el.dataset.name) // "FE"
    console.log(el.dataset.number) // "5"
    console.log(el.dataset.label) // "listCard"
</スクリプト>

要約する

実践的なJSスキルに関する記事はこれで終わりです。より関連性の高い実践的なJSスキルについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

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