JavaScriptの場合より良い文を書くための7つのヒント

23597 ワード

このブログでは、プロのようなステートメントを書く方法を学びます.
私はあなたに何か間違った方法を人々が文とどのようにそれらを修正する場合に書き込むものの例を与えることによって教えてくれます.では、始めましょう.

不要な他のステートメント

悪い方法

const getLargestNumber = (num1, num2) => {
    if (num1 > num2) {
        return num1
    } else {
        return num2
    }
}

なぜそれは悪いですか？

return文の後の関数では、何も実行されません.したがって、NUM 1がより大きいならば、関数はNUM 1を返します.elseステートメントは決して実行されません.したがって、else文はここで不要です.

グッドウェイ

const getLargestNumber = (num1, num2) => {
    if (num1 > num2) {
        return num1
    }

    return num2
}

いいえチェック

古い機能を見ましょう.

const getLargestNumber = (num1, num2) => {
    if (num1 > num2) {
        return num1
    }

    return num2
}

この関数はパラメータとして数値をとりますが、引数として文字列を渡すとどうなりますか?
文字列の場合、何が起こるか知っています.

悪い方法

const getLargestNumber = (num1, num2) => {
    if (num1 > num2) {
        return num1
    }

    return num2
}

醜いタイプチェックで悪い方法：

const getLargestNumber = (num1, num2) => {
    if (typeof num1 === 'number' && typeof num2 === 'number') {
        if (num1 > num2) {
            return num1
        }

        return num2
    } else {
        return false
    }
}

私たちはタイプチェックをするかもしれません、しかし、それはスーパー醜いです.
しかし、我々はガード条項でよりよくすることができます.
ガード節を使用すると、単に文がはるかに短い方法を書くことができます.私たちは小さく読みやすいコードを書くのが好きです.
基本的に、ガード条項を使用すると、すぐに関数を終了するか、任意のタスクを実行できます.

const getLargestNumber = (num1, num2) => {
    const NUMBER = 'number'

    if (typeof num1 !== NUMBER || typeof num2 !== NUMBER) {
        return false
    }

    if (num1 > num2) {
        return num1
    }

    return num2
}

解説

それで、私たちはちょうどそれらのどれが数字でないかどうかチェックしています.注意、私たちはどんなかすかな括弧を使用していません.巻き括弧はオプションですから.インデントが正しいならif 次のコードは実行されません.次のif文をリファクタリングしましょう.

const getLargestNumber = (num1, num2) => {
    const NUMBER = 'number'

    if (typeof num1 !== NUMBER || typeof num2 !== NUMBER) return false

    if (num1 > num2) return num1

    return num2
}

この関数は以前よりずっと短く読みやすいです.

ノート

1括弧括弧なしで1以上の文を置かないでください.コードフォーマッタは、間違った方法をフォーマットします.また、美しいと短いバグのコードを持つことがあります.

let a = 20
let b = 30
let c = 0

// bad
if (a > b)
    c = a
    console.log(c)

// good
if (a > b) {
    c = a
    console.log(c)
}

ダブル偽条件チェック

これはあなたのコードを読みやすくするためにできることの一つです.

let tesla = {
    name: 'Nikola Tesla',
    isAlive: false,
}

if (!tesla.isAlive !== false) return true

これは、あなたがこれまでに見るコードの最も醜いタイプのうちの1つです.こんなふうに書くな.

ステートメント中のelseステートメント

バッドウェイ

let a = 0

if (10 > 20) {
    a = 10
} else {
    a = 20
}

これを三元演算子で修正することができます.三項演算子を使うと、短いif文を1行で書くことができます.これはreactjs開発において大いに使用されます.

三進法による良い方法。

let a = 0

10 > 20 ? (a = 10) : (a = 20)

これは以前よりずっとよく見えます.以前? 状況を調べています.trueの場合は、次の文を実行します.他の: .

三進法によるより良い方法。

let a = 10 > 20 ? 10 : 20

ノート

ネストした三項演算子を配置しないでください.

非常に非常に悪いコード

let a = 10 > 20 ? (50 === 50 ? 50 : 100) : 20

真実や虚偽の値を使用しない。

Truthy :真の値を表す値を返すか、真の値を返す値を真の値と呼びます.たとえば、ゼロ、配列、オブジェクト、空以外の文字列以外のすべての数値.

Falsy :偽の値を表すか、返す値をFalsy値と呼びます.例えば0、空の文字列、未定義、NULL

// truthy value
if (1) return true // is same as if (true) return true
if ([]) return true // is same as if (true) return true
if ({}) return true // is same as if (true) return true

// falsy value
if (0) return false // is same as if (false) return false
if (undefined) return false // is same as if (false) return false
if ('') return false // is same as if (false) return false

lerの例を見てください.

配列が空であるかどうかを調べます.

// Bad way
if (array.length === 0) return false

// Good way
if (!array.length) return false

オブジェクトが空かどうかチェックする

// Bad way
if (Object.keys({}).length === 0) return false

// Good way
if (!Object.keys({}).length) return false

文字列が空かどうかチェックする

const string = ''
// Bad way
if (string.length === 0) return false

// Good way
if (!string) return false

配列が存在するかどうかを調べます.

const arr = null

// Bad way
if (typeof arr === 'array') return false

// Good Way
if (!arr) return false

短絡回路評価を使用しない

短絡評価は、行うことを意味します.
場合によってはif文も必要ありません.短絡操作はあなたのために仕事をするでしょう.

// Add life to the character if the character has died.

const character = {
    life: 0,
}

// bad way
if (character.life === 0) character.life = 100

// Good way
character.life = character.life || 100

// Better way
const { life } = character // Destructuring

character.life = life || 100

最後の例では、JavaScriptの破壊を使用しました.あなたが破壊することについてもっと知りたいならば、あなたはこのビデオをチェックすることができます.

AND

const character = {
    life: 0,
    status: 'dead',
}

character.life = 100

// bad way
if (character.life > 0) {
    character.status = 'alive'
}

// good way
character.status = character.life && 'alive'

switch文を使用しない

特定の値を持ち、他の値と一致する場合は、if/else文の代わりにswitch文を使用してください.これでコードがきれいになります.

const kingName = 'Anjan'

// Bad way
if (kingName === 'Thomas') {
    // do something
} else if (kingName === 'Jack') {
    // do something
} else if (kingName === 'Anjan') {
    // do something
} else {
    // do something
}

// good way
switch (kingName) {
    case 'Thomas':
    // do something

    case 'Jack':
    // do something

    case 'Anjan':
    // do something

    default:
    // do something
}

それで、それは今日のためです.あなたが私と意見が合わないならば、または、あなたが質問をするならば、コメントセクションで私に知らせてください.

シャムレスプラグ

私はいくつかのプロジェクトベースのビデオをバニラHTML、CSS、およびJavaScriptとした.
次のことを学びます.

JavaScriptの交差点のオブザーバークール効果を追加する

DOM操作

CSS位置に要素を合わせます.

敏感なウェブサイトを作る方法.

これらはあなたのフロントエンドのスキルをブラッシュアップする素晴らしいプロジェクトになります.
興味がある場合は、ビデオをチェックすることができます.
閉じるこの動画はお気に入りから削除されています.それは私がこのようなコンテンツを作成する動機.
それはこのブログのためです.私は単に物事を説明しようとした.あなたが立ち往生するならば、あなたは私に質問をすることができます.
ところで、私は私のスキルで大きな価値を提供することができる会社の新しい機会を探しています.あなたがリクルーターであるならば、完全なスタックウェブ開発において熟練していて、世界に革命を起こすことに情熱的である誰かを探して、私に連絡してください.また、フリーランスプロジェクトについて話すこともできます.
私の作品を見てくださいhere