JS スクリプトで if ステートメントを多用しすぎないようにします。if を置き換える 6 つの方法を次に示します。

推奨チュートリアル: 「JavaScript ビデオ チュートリアル 」

最近コードをリファクタリングしていたとき、初期のコードで使用されているコードが多すぎることに気付きました。 # #if ステートメントは、これまでに見たことのないレベルです。だからこそ、あまりにも多くの if ステートメントを使用しないようにするための簡単なヒントを共有することが重要だと考えています。

次に、

if の使用を置き換える 6 の方法を紹介します。これは、if を使用しないことに偏執的であるわけではありません。コーディングのアイデアを考える方法です。

1. 三項演算子

例 1

IF を使用したコード:

function saveCustomer(customer) {
  if (isCustomerValid(customer)) {
    database.save(customer)
  } else {
    alert('customer is invalid')
  }
}

リファクタリングされたコード:

function saveCustomer(customer) {
  return isCustomerValid(customer)
    ? database.save(customer)
    : alert('customer is invalid')
}

ES6 の使用

const saveCustomer = customer =>
   isCustomerValid(customer)?
     database.save(customer) : alert('customer is invalid')

例 2

IF を使用したコード:

function customerValidation(customer) {
  if (!customer.email) {
    return error('email is require')
  } else if (!customer.login) {
    return error('login is required')
  } else if (!customer.name) {
    return error('name is required')
  } else {
    return customer
  }
}

リファクタリングされたコード:

const customerValidation = customer =>
  !customer.email   ? error('email is required')
  : !customer.login ? error('login is required')
  : !customer.name  ? error('name is required')
                    : customer

例 3

IF を使用したコード:

function getEventTarget(evt) {
    if (!evt) {
        evt = window.event;
    }
    if (!evt) {
        return;
    }
    const target;
    if (evt.target) {
        target = evt.target;
    } else {
        target = evt.srcElement;
    }
    return target;
}

リファクタリングされたコード:

function getEventTarget(evt) {
  evt = evt || window.event;
  return evt && (evt.target || evt.srcElement);
}

2。短絡演算子

例 1

IF を使用したコード:

const isOnline = true;
const makeReservation= ()=>{};
const user = {
    name:'Damian',
    age:32,
    dni:33295000
};

if (isOnline){
    makeReservation(user);
}

リファクタリングされたコード:

const isOnline = true;
const makeReservation= ()=>{};
const user = {
    name:'Damian',
    age:32,
    dni:33295000
};

isOnline&&makeReservation(user);

例 2

IF を使用したコード:

const active = true;
const loan = {
    uuid:123456,
    ammount:10,
    requestedBy:'rick'
};

const sendMoney = ()=>{};

if (active&&loan){
    sendMoney();
}

リファクタリングされたコード:

const active = true;
const loan = {
    uuid:123456,
    ammount:10,
    requestedBy:'rick'
};

const sendMoney = ()=>{};

active && loan && sendMoney();

3. 関数デリゲート:

ケース 1

IF を使用したコード:

function itemDropped(item, location) {
    if (!item) {
        return false;
    } else if (outOfBounds(location) {
        var error = outOfBounds;
        server.notify(item, error);
        items.resetAll();
        return false;
    } else {
        animateCanvas();
        server.notify(item, location);
        return true;
    }
}

リファクタリングされたコード:

function itemDropped(item, location) {
    const dropOut = function() {
        server.notify(item, outOfBounds);
        items.resetAll();
        return false;
    }

    const dropIn = function() {
        server.notify(item, location);
        animateCanvas();
        return true;
    }

    return !!item && (outOfBounds(location) ? dropOut() : dropIn());
}

誰もが、「履歴書に書くプロジェクトがあるので、全員が参加できるプロジェクトを見つけ、[構築チュートリアル] も含めました。

サーバー上で Alibaba Cloud と連携しており、割引価格は 89/年、223/3 年と比較的安く、学生の月額 9.9 よりも安いです。プロジェクトを構築するために購入しました。技術スタックに慣れるとより快適です (古いユーザー向け) 家族アカウントで購入するだけです。母の勧めで 3 年間購入しています。この記事をクリックすると確認できます。

4. 非分岐戦略

この手法では、

switch ステートメントの使用を回避し、代わりに key/ を使用して作成しようとします。 value マップであり、関数を使用して引数として渡されたキーの値にアクセスします。

例 1

switch を使用したコード:

switch(breed){
    case 'border':
      return 'Border Collies are good boys and girls.';
      break;  
    case 'pitbull':
      return 'Pit Bulls are good boys and girls.';
      break;  
    case 'german':
      return 'German Shepherds are good boys and girls.';
      break;
    default:
      return 'Im default'
}

リファクタリングされたコード:

const dogSwitch = (breed) =>({
  "border": "Border Collies are good boys and girls.",
  "pitbull": "Pit Bulls are good boys and girls.",
  "german": "German Shepherds are good boys and girls.",  
})[breed]||'Im the default';


dogSwitch("border xxx")

5. データとしての関数

関数は JS の最初のクラスであることがわかっているので、それを使用してコードを関数オブジェクトに分割できます。

IF を使用したコード:

const calc = {
    run: function(op, n1, n2) {
        const result;
        if (op == "add") {
            result = n1 + n2;
        } else if (op == "sub" ) {
            result = n1 - n2;
        } else if (op == "mult" ) {
            result = n1 * n2;
        } else if (op == "p" ) {
            result = n1 / n2;
        }
        return result;
    }
}

calc.run("sub", 5, 3); //2

リファクタリングされたコード:

const calc = {
    add : function(a,b) {
        return a + b;
    },
    sub : function(a,b) {
        return a - b;
    },
    mult : function(a,b) {
        return a * b;
    },
    p : function(a,b) {
        return a / b;
    },
    run: function(fn, a, b) {
        return fn && fn(a,b);
    }
}

calc.run(calc.mult, 7, 4); //28

6. ポリモーフィズム

ポリモーフィズムとはオブジェクトが複数の形式を持つことができる能力。 OOP におけるポリモーフィズムの最も一般的な使用法は、親クラス参照を使用して子クラス オブジェクトを参照することです。

IF を使用したコード:

const bob = {
  name:'Bob',
  salary:1000,
  job_type:'DEVELOPER'
};

const mary = {
  name:'Mary',
  salary:1000,
  job_type:'QA'
};

const calc = (person) =>{

    if (people.job_type==='DEVELOPER')
        return person.salary+9000*0.10;

    if (people.job_type==='QA')
        return person.salary+1000*0.60;
}

console.log('Salary',calc(bob));
console.log('Salary',calc(mary));

リファクタリングされたコード:

const qaSalary  = (base) => base+9000*0.10;
const devSalary = (base) => base+1000*0.60;

//Add function to the object.
const bob = {
  name:'Bob',
  salary:1000,
  job_type:'DEVELOPER',
  calc: devSalary
};

const mary = {
  name:'Mary',
  salary:1000,
  job_type:'QA',
  calc: qaSalary
};

console.log('Salary',bob.calc(bob.salary));
console.log('Salary',mary.calc(mary.salary));

元のテキスト: https://dev.to/damxipo/avoid-use-if-on -our-js-scripts-1b95

著者: Damian Ciplat

プログラミング関連の知識の詳細については、

プログラミング コース をご覧ください。 ！

以上がJS スクリプトで if ステートメントを多用しすぎないようにします。if を置き換える 6 つの方法を次に示します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。